#97571F#97571F
#97571F is a mid, moderate orange. Relative luminance 0.135; OKLCH L 52.1% C 0.109 H 57.5°. Best body text is #FFFFFF at 5.68:1 contrast (WCAG AA passes).
Color values
| HEX | #97571F |
|---|---|
| RGB | rgb(151, 87, 31) |
| HSL | hsl(28, 66%, 36%) |
| HSV | hsv(28, 79%, 59%) |
| CMYK | cmyk(0%, 42.4%, 79.5%, 40.8%) |
| CIE-LAB | lab(43.50, 22.00, 41.94) |
| CIE-LCH | lch(43.50, 47.36, 62.33°) |
| OKLab | oklab(52.11% 0.0584 0.0916) |
| OKLCH | oklch(52.11% 0.109 57.5) |
| XYZ | xyz(16.4194, 13.4964, 3.0364) |
| Luminance | 0.1349 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Sepia
#985E2B
ΔE00 2.48
Warm Brown
#964E02
ΔE00 3.44
Sienna (survey)
#A9561E
ΔE00 4.78
Raw Umber
#A75E09
ΔE00 5.31
Cinnamon
#AC4F06
ΔE00 5.88
Milk Chocolate
#7F4E1E
ΔE00 5.90
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#97571F #1F5F97
analogous
#971F23 #97571F #97931F
triadic
#97571F #1F9757 #571F97
tetradic
#97571F #23971F #1F5F97 #931F97
square
#97571F #23971F #1F5F97 #931F97
split-complementary
#97571F #1F9793 #1F2397
monochromatic
#311C0A #643A15 #97571F #CA7429 #DC9454
Accessibility & contrast
On white
5.68
#97571F on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.70
#97571F on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #97571F
5.68:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##97571F | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##97571F | 1.00 | 5.68 | 3.70 | 5.68 |
| #FFFFFF | 5.68 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.70 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.68 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6A5E17
Deuteranopia (green-blind)
#796C1F
Tritanopia (blue-blind)
#A5494C
Achromatopsia (no color)
#676767
Design tokens & code
CSS
--color: #97571f; /* rgb */ color: rgb(151, 87, 31); /* oklch */ color: oklch(52.1% 0.109 57.5);
Tailwind
colors: {
custom: {
50: '#bb875f',
500: '#97571f',
950: '#000000',
},
}SCSS
$custom: #97571f; $custom-light: #bb875f; $custom-dark: #000000;
JSON
{
"hex": "#97571f",
"rgb": {
"r": 151,
"g": 87,
"b": 31
},
"hsl": {
"h": 28,
"s": 65.934,
"l": 35.686
},
"oklch": {
"l": 0.52108,
"c": 0.10864,
"h": 57.5
},
"luminance": 0.13495
}Semantic roles & 50–950 ramp
primary
#97571F
secondary
#528DBF
accent
#9AE93F
background
#FCF8F5
surface
#F8EFE9
border
#D1CAC5
text
#130B05
muted
#827C79