#877D61#877D61
#877D61 is a mid, muted orange. Relative luminance 0.207; OKLCH L 59.1% C 0.042 H 90.7°. Best body text is #000000 at 5.14:1 contrast (WCAG AA passes).
Color values
| HEX | #877D61 |
|---|---|
| RGB | rgb(135, 125, 97) |
| HSL | hsl(44, 16%, 45%) |
| HSV | hsv(44, 28%, 53%) |
| CMYK | cmyk(0%, 7.4%, 28.1%, 47.1%) |
| CIE-LAB | lab(52.60, -0.88, 16.68) |
| CIE-LCH | lch(52.60, 16.70, 93.01°) |
| OKLab | oklab(59.11% -0.0005 0.0423) |
| OKLCH | oklch(59.11% 0.042 90.7) |
| XYZ | xyz(19.4831, 20.6817, 14.2726) |
| Luminance | 0.2068 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Brown Grey
#8D8468
ΔE00 2.61
Brownish Grey
#86775F
ΔE00 3.87
Taupe
#8B7D6B
ΔE00 5.18
Grey Brown
#7F7053
ΔE00 5.36
Greyish Brown
#7A6A4F
ΔE00 7.73
Dull Brown
#876E4B
ΔE00 8.17
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#877D61 #616B87
analogous
#876A61 #877D61 #7E8761
triadic
#877D61 #61877D #7D6187
tetradic
#877D61 #61876A #616B87 #87617E
square
#877D61 #61876A #616B87 #87617E
split-complementary
#877D61 #617E87 #6A6187
monochromatic
#403B2E #635C47 #877D61 #A49B81 #BEB7A4
Accessibility & contrast
On white
4.09
#877D61 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.14
#877D61 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #877D61
5.14:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##877D61 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##877D61 | 1.00 | 4.09 | 5.14 | 5.14 |
| #FFFFFF | 4.09 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.14 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.14 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#837C5F
Deuteranopia (green-blind)
#867F62
Tritanopia (blue-blind)
#8D7975
Achromatopsia (no color)
#7D7D7D
Design tokens & code
CSS
--color: #877d61; /* rgb */ color: rgb(135, 125, 97); /* oklch */ color: oklch(59.1% 0.042 90.7);
Tailwind
colors: {
custom: {
50: '#aaa28e',
500: '#877d61',
950: '#000000',
},
}SCSS
$custom: #877d61; $custom-light: #aaa28e; $custom-dark: #000000;
JSON
{
"hex": "#877d61",
"rgb": {
"r": 135,
"g": 125,
"b": 97
},
"hsl": {
"h": 44.211,
"s": 16.379,
"l": 45.49
},
"oklch": {
"l": 0.5911,
"c": 0.04227,
"h": 90.7
},
"luminance": 0.20681
}Semantic roles & 50–950 ramp
primary
#877D61
secondary
#979DAD
accent
#82B96F
background
#FAF9F8
surface
#F4F2F0
border
#CECCCB
text
#100F0C
muted
#7F7E7D