Benannte Farbe · #644D42
Chocolate Coco
Chocolate Coco ist #644D42: rgb(100 77 66), hsl(19 20% 33%), oklch(0.441 0.036 46.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Brown mean? → · Chocolate Coco color name →
#644D42
oklch(0.441 0.036 46.8)
Farbumrechnungen
- HEX
- #644d42
- RGB
- rgb(100 77 66)
- HSL
- hsl(19 20% 33%)
- HWB
- hwb(19 26% 61%)
- OKLCH
- oklch(0.441 0.036 46.8)
- OKLab
- oklab(0.441 0.025 0.026)
- CIE Lab
- lab(34.98 8.71 10.46)
- LCH
- lch(34.98 13.61 50.2)
- CMYK
- cmyk(0% 23% 34% 61%)
Tints · Shades · Tones
Tints
- 735D53
- 816E64
- 907F76
- 9F9089
- AFA29B
- BFB4AF
- CEC6C2
- DED9D6
- EFECEA
Shades
- 564238
- 48372F
- 3B2C25
- 2E221C
- 221814
- 160F0B
- 0B0705
- 030201
- 000000
Tones
- 675248
- 6A574E
- 6D5C54
- 70615A
- 726660
- 756B67
- 78706D
- 7B7673
- 7D7B7A
Farbharmonien
Komplementär +180°
- 644D42
Chocolate Coco
- 3E5762
≈ Steiglitz Fog
Analog -30° +30°
- 644D42
Chocolate Coco
- 654B4C
≈ Soul Searching
- 5E503D
≈ Best Bronze
Triadisch +120° +240°
- 644D42
Chocolate Coco
- 40594F
≈ Patio Green
- 515066
≈ Magic Spell
Geteilt komplementär +150° +210°
- 644D42
Chocolate Coco
- 3B595A
≈ Abysse
- 465467
≈ Inkjet
Tetradisch +90° +180° +270°
- 644D42
Chocolate Coco
- 4A5844
≈ Grey Asparagus
- 3E5762
≈ Steiglitz Fog
- 5B4D60
≈ Purple Fury
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.82:1 · APCA Lc 87
Ag
FailAuf Schwarz
WCAG 2.68:1 · APCA Lc 15
Beste Textfarbe: #FFFFFF
WCAG 7.82:1 (AAA) · APCA Lc 87
Contrast pairs
Code-Snippets
CSS
:root {
--chocolate-coco: #644d42;
--chocolate-coco-rgb: 100 77 66;
--chocolate-coco-oklch: oklch(0.441 0.036 46.8);
}
.element {
color: var(--chocolate-coco);
background-color: hsl(19 20% 33%);
border-color: oklch(0.441 0.036 46.8);
}Tailwind CSS v4
@theme {
--color-chocolate-coco: #644d42;
--color-chocolate-coco-50: #fef2ec;
--color-chocolate-coco-100: #f3e5de;
--color-chocolate-coco-200: #e2d0c7;
--color-chocolate-coco-300: #c8b2a8;
--color-chocolate-coco-400: #b1988d;
--color-chocolate-coco-500: #9b7f72;
--color-chocolate-coco-600: #836c61;
--color-chocolate-coco-700: #69564d;
--color-chocolate-coco-800: #4d3f38;
--color-chocolate-coco-900: #362b26;
--color-chocolate-coco-950: #211815;
}SCSS
$chocolate-coco: #644d42;
$chocolate-coco-rgb: 100, 77, 66;
$chocolate-coco-light: mix(#fff, $chocolate-coco, 20%);
$chocolate-coco-dark: mix(#000, $chocolate-coco, 20%);
.element {
color: $chocolate-coco;
box-shadow: 0 0 0 2px rgba($chocolate-coco, 0.35);
}