#877253#877253
#877253 is a mid, muted orange. Relative luminance 0.178; OKLCH L 56.4% C 0.052 H 77.1°. Best body text is #FFFFFF at 4.60:1 contrast (WCAG AA passes).
Color values
| HEX | #877253 |
|---|---|
| RGB | rgb(135, 114, 83) |
| HSL | hsl(36, 24%, 43%) |
| HSV | hsv(36, 39%, 53%) |
| CMYK | cmyk(0%, 15.6%, 38.5%, 47.1%) |
| CIE-LAB | lab(49.27, 3.51, 20.25) |
| CIE-LCH | lch(49.27, 20.55, 80.16°) |
| OKLab | oklab(56.4% 0.0116 0.0505) |
| OKLCH | oklch(56.4% 0.052 77.1) |
| XYZ | xyz(17.5707, 17.8108, 10.6942) |
| Luminance | 0.1781 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Dull Brown
#876E4B
ΔE00 2.19
Grey Brown
#7F7053
ΔE00 2.94
Brownish Grey
#86775F
ΔE00 3.44
Dirt
#8A6E45
ΔE00 3.61
Greyish Brown
#7A6A4F
ΔE00 4.10
Dark Taupe
#7F684E
ΔE00 4.37
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#877253 #536887
analogous
#875853 #877253 #828753
triadic
#877253 #538772 #725387
tetradic
#877253 #538758 #536887 #875382
square
#877253 #538758 #536887 #875382
split-complementary
#877253 #538287 #585387
monochromatic
#3B3224 #61523C #877253 #A79170 #BEAE96
Accessibility & contrast
On white
4.60
#877253 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.56
#877253 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#FFFFFF on #877253
4.60:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##877253 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##877253 | 1.00 | 4.60 | 4.56 | 4.60 |
| #FFFFFF | 4.60 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.56 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.60 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7A7251
Deuteranopia (green-blind)
#807754
Tritanopia (blue-blind)
#8F6C6A
Achromatopsia (no color)
#757575
Design tokens & code
CSS
--color: #877253; /* rgb */ color: rgb(135, 114, 83); /* oklch */ color: oklch(56.4% 0.052 77.1);
Tailwind
colors: {
custom: {
50: '#ab9a83',
500: '#877253',
950: '#000000',
},
}SCSS
$custom: #877253; $custom-light: #ab9a83; $custom-dark: #000000;
JSON
{
"hex": "#877253",
"rgb": {
"r": 135,
"g": 114,
"b": 83
},
"hsl": {
"h": 35.769,
"s": 23.853,
"l": 42.745
},
"oklch": {
"l": 0.56397,
"c": 0.05181,
"h": 77.1
},
"luminance": 0.1781
}Semantic roles & 50–950 ramp
primary
#877253
secondary
#8A98AC
accent
#8BC067
background
#FAF9F8
surface
#F4F2EF
border
#CECCCA
text
#100E0A
muted
#7F7E7C