#88786C#88786C
#88786C is a mid, muted orange. Relative luminance 0.198; OKLCH L 58.4% C 0.027 H 59.1°. Best body text is #000000 at 4.95:1 contrast (WCAG AA passes).
Color values
| HEX | #88786C |
|---|---|
| RGB | rgb(136, 120, 108) |
| HSL | hsl(26, 11%, 48%) |
| HSV | hsv(26, 21%, 53%) |
| CMYK | cmyk(0%, 11.8%, 20.6%, 46.7%) |
| CIE-LAB | lab(51.55, 4.10, 8.85) |
| CIE-LCH | lch(51.55, 9.75, 65.14°) |
| OKLab | oklab(58.39% 0.0138 0.023) |
| OKLCH | oklch(58.39% 0.027 59.1) |
| XYZ | xyz(19.5766, 19.7504, 16.9654) |
| Luminance | 0.1975 (WCAG relative) |
| Temperature | neutral |
| Family | orange |
Closest named colors
Taupe
#8B7D6B
ΔE00 3.82
Brownish Grey
#86775F
ΔE00 5.77
Warm Grey
#978A84
ΔE00 7.20
Dark Taupe
#7F684E
ΔE00 8.35
Grey Brown
#7F7053
ΔE00 8.47
Gray
#808080
ΔE00 8.90
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#88786C #6C7C88
analogous
#886C6E #88786C #88866C
triadic
#88786C #6C8878 #786C88
tetradic
#88786C #6E886C #6C7C88 #866C88
square
#88786C #6E886C #6C7C88 #866C88
split-complementary
#88786C #6C8886 #6C6E88
monochromatic
#443C36 #665A51 #88786C #A4978D #BFB6AF
Accessibility & contrast
On white
4.24
#88786C on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.95
#88786C on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #88786C
4.95:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##88786C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##88786C | 1.00 | 4.24 | 4.95 | 4.95 |
| #FFFFFF | 4.24 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.95 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.95 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7D796B
Deuteranopia (green-blind)
#817C6C
Tritanopia (blue-blind)
#8D7575
Achromatopsia (no color)
#7B7B7B
Design tokens & code
CSS
--color: #88786c; /* rgb */ color: rgb(136, 120, 108); /* oklch */ color: oklch(58.4% 0.027 59.1);
Tailwind
colors: {
custom: {
50: '#ab9f96',
500: '#88786c',
950: '#000000',
},
}SCSS
$custom: #88786c; $custom-light: #ab9f96; $custom-dark: #000000;
JSON
{
"hex": "#88786c",
"rgb": {
"r": 136,
"g": 120,
"b": 108
},
"hsl": {
"h": 25.714,
"s": 11.475,
"l": 47.843
},
"oklch": {
"l": 0.58392,
"c": 0.02678,
"h": 59.1
},
"luminance": 0.1975
}Semantic roles & 50–950 ramp
primary
#88786C
secondary
#A1A9AF
accent
#99B473
background
#FAF9F9
surface
#F4F2F1
border
#CECCCB
text
#100E0D
muted
#7F7E7E