Cor nomeada · #6D4433
Noble Chocolate
Noble Chocolate é #6D4433: rgb(109 68 51), hsl(18 36% 31%), oklch(0.43 0.063 43.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Brown mean? → · Noble Chocolate color name →
#6D4433
oklch(0.43 0.063 43.2)
Conversões de cor
- HEX
- #6d4433
- RGB
- rgb(109 68 51)
- HSL
- hsl(18 36% 31%)
- HWB
- hwb(18 20% 57%)
- OKLCH
- oklch(0.43 0.063 43.2)
- OKLab
- oklab(0.43 0.046 0.043)
- CIE Lab
- lab(33.45 16.71 18)
- LCH
- lch(33.45 24.56 47.1)
- CMYK
- cmyk(0% 38% 53% 57%)
Tons claros · Sombras · Tons
Tons claros
- 7B5545
- 8A6758
- 98786C
- A78B7F
- B59D94
- C4B0A8
- D2C3BD
- E1D7D3
- F0EBE9
Sombras
- 5E3A2B
- 4F3023
- 41261C
- 331D14
- 26140D
- 190C07
- 0D0503
- 040201
- 010000
Tons
- 6F4A3B
- 725042
- 74564A
- 765C51
- 786259
- 7A6861
- 7B6E69
- 7D7470
- 7F7A78
Harmonias de cor
Complementar +180°
- 6D4433
Noble Chocolate
- 225769
≈ Bright Nautilus
Análoga -30° +30°
- 6D4433
Noble Chocolate
- 6E4146
≈ Purplish Brown
- 654A26
≈ Dallas
Tríade +120° +240°
- 6D4433
Noble Chocolate
- 2B5B46
≈ Billiard Green
- 4B4B72
≈ Purple Berry
Complementar dividida +150° +210°
- 6D4433
Noble Chocolate
- 1B5B59
≈ Dark Turquoise
- 365272
≈ Aerostatics
Tétrade +90° +180° +270°
- 6D4433
Noble Chocolate
- 425733
≈ Zen Garden Olive
- 225769
≈ Bright Nautilus
- 5C4568
≈ Velvet Beret
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 8.31:1 · APCA Lc 89
Ag
FailSobre preto
WCAG 2.52:1 · APCA Lc 14
Melhor cor de texto: #FFFFFF
WCAG 8.31:1 (AAA) · APCA Lc 89
Contrast pairs
Trechos de código
CSS
:root {
--noble-chocolate: #6d4433;
--noble-chocolate-rgb: 109 68 51;
--noble-chocolate-oklch: oklch(0.43 0.063 43.2);
}
.element {
color: var(--noble-chocolate);
background-color: hsl(18 36% 31%);
border-color: oklch(0.43 0.063 43.2);
}Tailwind CSS v4
@theme {
--color-noble-chocolate: #6d4433;
--color-noble-chocolate-50: #fff0e7;
--color-noble-chocolate-100: #fbe2d7;
--color-noble-chocolate-200: #ecccbe;
--color-noble-chocolate-300: #d4ae9d;
--color-noble-chocolate-400: #bf9381;
--color-noble-chocolate-500: #aa7964;
--color-noble-chocolate-600: #906655;
--color-noble-chocolate-700: #735244;
--color-noble-chocolate-800: #563b31;
--color-noble-chocolate-900: #3c2921;
--color-noble-chocolate-950: #251611;
}SCSS
$noble-chocolate: #6d4433;
$noble-chocolate-rgb: 109, 68, 51;
$noble-chocolate-light: mix(#fff, $noble-chocolate, 20%);
$noble-chocolate-dark: mix(#000, $noble-chocolate, 20%);
.element {
color: $noble-chocolate;
box-shadow: 0 0 0 2px rgba($noble-chocolate, 0.35);
}