Cor nomeada · #9D7651
Mocha
Mocha é #9D7651: rgb(157 118 81), hsl(29 32% 47%), oklch(0.596 0.071 64.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Mocha color name →
#9D7651
oklch(0.596 0.071 64.3)
Conversões de cor
- HEX
- #9d7651
- RGB
- rgb(157 118 81)
- HSL
- hsl(29 32% 47%)
- HWB
- hwb(29 32% 38%)
- OKLCH
- oklch(0.596 0.071 64.3)
- OKLab
- oklab(0.596 0.031 0.064)
- CIE Lab
- lab(52.94 12.3 26.58)
- LCH
- lch(52.94 29.29 65.2)
- CMYK
- cmyk(0% 25% 48% 38%)
Tons claros · Sombras · Tons
Tons claros
- A78362
- B19073
- BA9E84
- C4AB95
- CEB9A6
- D8C7B7
- E1D4C9
- EBE3DB
- F5F1ED
Sombras
- 886645
- 73563A
- 5F472F
- 4C3824
- 3A291A
- 281C10
- 180F07
- 090502
- 010100
Tons
- 9A7756
- 98785B
- 957960
- 927A65
- 8F7B6A
- 8C7C6E
- 897D73
- 867E77
- 837F7C
Harmonias de cor
Complementar +180°
- 9D7651
Mocha
- 5984A7
≈ Peyton
Análoga -30° +30°
- 9D7651
Mocha
- A57063
≈ Blast-Off Bronze
- 8D7F4C
≈ Ovoid Fruit
Tríade +120° +240°
- 9D7651
Mocha
- 488D84
≈ Royal Palm
- 8874A2
≈ Smashed Grape
Complementar dividida +150° +210°
- 9D7651
Mocha
- 478A99
≈ Hippie Blue
- 727CAA
≈ Minuet Lilac
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 4.08:1 · APCA Lc 68
Ag
AASobre preto
WCAG 5.14:1 · APCA Lc 34
Melhor cor de texto: #000000
WCAG 5.14:1 (AA) · APCA Lc 34
Contrast pairs
Trechos de código
CSS
:root {
--mocha: #9d7651;
--mocha-rgb: 157 118 81;
--mocha-oklch: oklch(0.596 0.071 64.3);
}
.element {
color: var(--mocha);
background-color: hsl(29 32% 47%);
border-color: oklch(0.596 0.071 64.3);
}Tailwind CSS v4
@theme {
--color-mocha: #9d7651;
--color-mocha-50: #fff2e0;
--color-mocha-100: #f9e4cf;
--color-mocha-200: #eacfb5;
--color-mocha-300: #d1b191;
--color-mocha-400: #bd9672;
--color-mocha-500: #a77c53;
--color-mocha-600: #8e6947;
--color-mocha-700: #715438;
--color-mocha-800: #543d28;
--color-mocha-900: #3b2a1b;
--color-mocha-950: #25170b;
}SCSS
$mocha: #9d7651;
$mocha-rgb: 157, 118, 81;
$mocha-light: mix(#fff, $mocha, 20%);
$mocha-dark: mix(#000, $mocha, 20%);
.element {
color: $mocha;
box-shadow: 0 0 0 2px rgba($mocha, 0.35);
}