Cor nomeada · #6B574A
Chocolate Chunk
Chocolate Chunk é #6B574A: rgb(107 87 74), hsl(24 18% 35%), oklch(0.473 0.033 54.8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Chocolate Chunk color name →
#6B574A
oklch(0.473 0.033 54.8)
Conversões de cor
- HEX
- #6b574a
- RGB
- rgb(107 87 74)
- HSL
- hsl(24 18% 35%)
- HWB
- hwb(24 29% 58%)
- OKLCH
- oklch(0.473 0.033 54.8)
- OKLab
- oklab(0.473 0.019 0.027)
- CIE Lab
- lab(38.76 6.92 10.84)
- LCH
- lch(38.76 12.86 57.4)
- CMYK
- cmyk(0% 19% 31% 58%)
Tons claros · Sombras · Tons
Tons claros
- 79665A
- 87766B
- 95867C
- A4968E
- B3A7A0
- C1B8B2
- D1CAC5
- E0DBD8
- EFEDEB
Sombras
- 5C4B3F
- 4E3E35
- 3F332A
- 322720
- 251C17
- 18120E
- 0D0806
- 040302
- 000000
Tons
- 6D5B4F
- 6F5F55
- 72635A
- 74675F
- 766B65
- 786F6A
- 7A7470
- 7C7875
- 7E7C7A
Harmonias de cor
Complementar +180°
- 6B574A
Chocolate Chunk
- 4A5F6C
≈ Ragtime Blues
Análoga -30° +30°
- 6B574A
Chocolate Chunk
- 6D5552
≈ Bourbon Truffle
- 645A46
≈ Grand Avenue
Tríade +120° +240°
- 6B574A
Chocolate Chunk
- 48625A
≈ Pine Haven
- 5D586D
≈ Orchid Grey
Complementar dividida +150° +210°
- 6B574A
Chocolate Chunk
- 456165
≈ Linen Grey
- 525C6F
≈ Vintage Indigo
Tétrade +90° +180° +270°
- 6B574A
Chocolate Chunk
- 506150
≈ Hampton Green
- 4A5F6C
≈ Ragtime Blues
- 665566
≈ Fedora
Contraste e acessibilidade
Ag
AASobre branco
WCAG 6.80:1 · APCA Lc 83
Ag
FailSobre preto
WCAG 3.08:1 · APCA Lc 18
Melhor cor de texto: #FFFFFF
WCAG 6.80:1 (AA) · APCA Lc 83
Contrast pairs
Trechos de código
CSS
:root {
--chocolate-chunk: #6b574a;
--chocolate-chunk-rgb: 107 87 74;
--chocolate-chunk-oklch: oklch(0.473 0.033 54.8);
}
.element {
color: var(--chocolate-chunk);
background-color: hsl(24 18% 35%);
border-color: oklch(0.473 0.033 54.8);
}Tailwind CSS v4
@theme {
--color-chocolate-chunk: #6b574a;
--color-chocolate-chunk-50: #fdf3ec;
--color-chocolate-chunk-100: #f1e5dd;
--color-chocolate-chunk-200: #e0d1c7;
--color-chocolate-chunk-300: #c5b3a7;
--color-chocolate-chunk-400: #af9a8c;
--color-chocolate-chunk-500: #988171;
--color-chocolate-chunk-600: #816d60;
--color-chocolate-chunk-700: #67574d;
--color-chocolate-chunk-800: #4c3f38;
--color-chocolate-chunk-900: #352c26;
--color-chocolate-chunk-950: #201915;
}SCSS
$chocolate-chunk: #6b574a;
$chocolate-chunk-rgb: 107, 87, 74;
$chocolate-chunk-light: mix(#fff, $chocolate-chunk, 20%);
$chocolate-chunk-dark: mix(#000, $chocolate-chunk, 20%);
.element {
color: $chocolate-chunk;
box-shadow: 0 0 0 2px rgba($chocolate-chunk, 0.35);
}