#5B3716#5B3716
#5B3716 is a dark, moderate orange. Relative luminance 0.050; OKLCH L 37.3% C 0.069 H 60.4°. Best body text is #FFFFFF at 10.49:1 contrast (WCAG AA passes).
Color values
| HEX | #5B3716 |
|---|---|
| RGB | rgb(91, 55, 22) |
| HSL | hsl(29, 61%, 22%) |
| HSV | hsv(29, 76%, 36%) |
| CMYK | cmyk(0%, 39.6%, 75.8%, 64.3%) |
| CIE-LAB | lab(26.78, 12.75, 26.68) |
| CIE-LCH | lch(26.78, 29.57, 64.45°) |
| OKLab | oklab(37.35% 0.0343 0.0602) |
| OKLCH | oklch(37.35% 0.069 60.4) |
| XYZ | xyz(5.8258, 5.0150, 1.4201) |
| Luminance | 0.0501 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Brown (survey)
#653700
ΔE00 4.91
Espresso
#4B382A
ΔE00 8.39
Mud Brown
#60460F
ΔE00 8.71
Chocolate
#7B3F00
ΔE00 8.81
Chocolate (survey)
#3D1C02
ΔE00 9.31
Milk Chocolate
#7F4E1E
ΔE00 9.68
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5B3716 #163A5B
analogous
#5B1617 #5B3716 #5B5A16
triadic
#5B3716 #165B37 #37165B
tetradic
#5B3716 #175B16 #163A5B #5A165B
square
#5B3716 #175B16 #163A5B #5A165B
split-complementary
#5B3716 #165B5A #16175B
monochromatic
#190F06 #2A190A #5B3716 #8C5522 #BE732E
Accessibility & contrast
On white
10.49
#5B3716 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.00
#5B3716 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #5B3716
10.49:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5B3716 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##5B3716 | 1.00 | 10.49 | 2.00 | 10.49 |
| #FFFFFF | 10.49 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.00 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 10.49 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#423A12
Deuteranopia (green-blind)
#4B4316
Tritanopia (blue-blind)
#642F30
Achromatopsia (no color)
#3F3F3F
Design tokens & code
CSS
--color: #5b3716; /* rgb */ color: rgb(91, 55, 22); /* oklch */ color: oklch(37.3% 0.069 60.4);
Tailwind
colors: {
custom: {
50: '#8d6e55',
500: '#5b3716',
950: '#000000',
},
}SCSS
$custom: #5b3716; $custom-light: #8d6e55; $custom-dark: #000000;
JSON
{
"hex": "#5b3716",
"rgb": {
"r": 91,
"g": 55,
"b": 22
},
"hsl": {
"h": 28.696,
"s": 61.062,
"l": 22.157
},
"oklch": {
"l": 0.37348,
"c": 0.0693,
"h": 60.4
},
"luminance": 0.05014
}Semantic roles & 50–950 ramp
primary
#5B3716
secondary
#3B6892
accent
#97E444
background
#F9F6F5
surface
#F1EBE8
border
#CBC6C4
text
#0D0703
muted
#7E7A78