#86703E#86703E
#86703E is a mid, moderate orange. Relative luminance 0.170; OKLCH L 55.5% C 0.074 H 86.2°. Best body text is #FFFFFF at 4.77:1 contrast (WCAG AA passes).
Color values
| HEX | #86703E |
|---|---|
| RGB | rgb(134, 112, 62) |
| HSL | hsl(42, 37%, 38%) |
| HSV | hsv(42, 54%, 53%) |
| CMYK | cmyk(0%, 16.4%, 53.7%, 47.5%) |
| CIE-LAB | lab(48.27, 1.89, 30.80) |
| CIE-LCH | lch(48.27, 30.86, 86.49°) |
| OKLab | oklab(55.48% 0.0048 0.0734) |
| OKLCH | oklch(55.48% 0.074 86.2) |
| XYZ | xyz(16.4958, 17.0053, 6.9700) |
| Luminance | 0.1700 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Dirt
#8A6E45
ΔE00 3.76
Dull Brown
#876E4B
ΔE00 4.70
Dirt Brown
#836539
ΔE00 5.16
Grey Brown
#7F7053
ΔE00 5.95
Greyish Brown
#7A6A4F
ΔE00 6.91
Hazel
#8E7618
ΔE00 7.55
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#86703E #3E5486
analogous
#864C3E #86703E #78863E
triadic
#86703E #3E8670 #703E86
tetradic
#86703E #3E864C #3E5486 #863E78
square
#86703E #3E864C #3E5486 #863E78
split-complementary
#86703E #3E7886 #4C3E86
monochromatic
#322A17 #5C4D2B #86703E #AF9352 #C2AD7C
Accessibility & contrast
On white
4.77
#86703E on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.40
#86703E on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #86703E
4.77:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##86703E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##86703E | 1.00 | 4.77 | 4.40 | 4.77 |
| #FFFFFF | 4.77 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.40 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.77 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7B6F3A
Deuteranopia (green-blind)
#807540
Tritanopia (blue-blind)
#906864
Achromatopsia (no color)
#737373
Design tokens & code
CSS
--color: #86703e; /* rgb */ color: rgb(134, 112, 62); /* oklch */ color: oklch(55.5% 0.074 86.2);
Tailwind
colors: {
custom: {
50: '#ab9874',
500: '#86703e',
950: '#000000',
},
}SCSS
$custom: #86703e; $custom-light: #ab9874; $custom-dark: #000000;
JSON
{
"hex": "#86703e",
"rgb": {
"r": 134,
"g": 112,
"b": 62
},
"hsl": {
"h": 41.667,
"s": 36.735,
"l": 38.431
},
"oklch": {
"l": 0.55476,
"c": 0.07356,
"h": 86.2
},
"luminance": 0.17004
}Semantic roles & 50–950 ramp
primary
#86703E
secondary
#7385AC
accent
#7ECD5B
background
#FAF9F7
surface
#F4F2ED
border
#CECCC8
text
#100D08
muted
#7F7E7B