#58271A#58271A
#58271A is a dark, moderate red. Relative luminance 0.036; OKLCH L 33.8% C 0.076 H 35.9°. Best body text is #FFFFFF at 12.21:1 contrast (WCAG AA passes).
Color values
| HEX | #58271A |
|---|---|
| RGB | rgb(88, 39, 26) |
| HSL | hsl(13, 54%, 22%) |
| HSV | hsv(13, 70%, 35%) |
| CMYK | cmyk(0%, 55.7%, 70.5%, 65.5%) |
| CIE-LAB | lab(22.31, 21.45, 19.05) |
| CIE-LCH | lch(22.31, 28.69, 41.62°) |
| OKLab | oklab(33.83% 0.0617 0.0446) |
| OKLCH | oklch(33.83% 0.076 35.9) |
| XYZ | xyz(4.9369, 3.6009, 1.4121) |
| Luminance | 0.0360 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Chocolate Brown
#411900
ΔE00 6.48
Chocolate (survey)
#3D1C02
ΔE00 7.97
Reddy Brown
#6E1005
ΔE00 8.00
Rosewood
#65000B
ΔE00 8.75
Dried Blood
#4B0101
ΔE00 8.78
Mahogany
#4A0100
ΔE00 8.80
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#58271A #1A4B58
analogous
#581A2C #58271A #58461A
triadic
#58271A #1A5827 #271A58
tetradic
#58271A #2C581A #1A4B58 #461A58
square
#58271A #2C581A #1A4B58 #461A58
split-complementary
#58271A #1A5846 #1A2C58
monochromatic
#180A07 #29120C #58271A #873C28 #B65136
Accessibility & contrast
On white
12.21
#58271A on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.72
#58271A on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #58271A
12.21:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##58271A | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##58271A | 1.00 | 12.21 | 1.72 | 12.21 |
| #FFFFFF | 12.21 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.72 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 12.21 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#342F19
Deuteranopia (green-blind)
#403919
Tritanopia (blue-blind)
#611E24
Achromatopsia (no color)
#353535
Design tokens & code
CSS
--color: #58271a; /* rgb */ color: rgb(88, 39, 26); /* oklch */ color: oklch(33.8% 0.076 35.9);
Tailwind
colors: {
custom: {
50: '#8b6256',
500: '#58271a',
950: '#000000',
},
}SCSS
$custom: #58271a; $custom-light: #8b6256; $custom-dark: #000000;
JSON
{
"hex": "#58271a",
"rgb": {
"r": 88,
"g": 39,
"b": 26
},
"hsl": {
"h": 12.581,
"s": 54.386,
"l": 22.353
},
"oklch": {
"l": 0.33832,
"c": 0.07611,
"h": 35.9
},
"luminance": 0.036
}Semantic roles & 50–950 ramp
primary
#58271A
secondary
#407E8E
accent
#BFDE4A
background
#F8F5F5
surface
#F0EAE9
border
#CBC6C5
text
#0D0503
muted
#7D7978