#561E20#561E20
#561E20 is a dark, moderate red. Relative luminance 0.030; OKLCH L 32.1% C 0.083 H 20.9°. Best body text is #FFFFFF at 13.11:1 contrast (WCAG AA passes).
Color values
| HEX | #561E20 |
|---|---|
| RGB | rgb(86, 30, 32) |
| HSL | hsl(358, 48%, 23%) |
| HSV | hsv(358, 65%, 34%) |
| CMYK | cmyk(0%, 65.1%, 62.8%, 66.3%) |
| CIE-LAB | lab(20.09, 26.16, 12.17) |
| CIE-LCH | lch(20.09, 28.85, 24.95°) |
| OKLab | oklab(32.12% 0.0778 0.0298) |
| OKLCH | oklch(32.12% 0.083 20.9) |
| XYZ | xyz(4.5631, 3.0118, 1.7073) |
| Luminance | 0.0301 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Claret
#680018
ΔE00 6.45
Dried Blood
#4B0101
ΔE00 6.59
Mahogany
#4A0100
ΔE00 6.70
Maroon (survey)
#650021
ΔE00 6.85
Deep Brown
#410200
ΔE00 6.89
Wine
#722F37
ΔE00 7.21
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#561E20 #1E5654
analogous
#561E3C #561E20 #56381E
triadic
#561E20 #20561E #1E2056
tetradic
#561E20 #3C561E #1E5654 #381E56
square
#561E20 #3C561E #1E5654 #381E56
split-complementary
#561E20 #1E5638 #1E3C56
monochromatic
#170808 #290E0F #561E20 #832E31 #B13E42
Accessibility & contrast
On white
13.11
#561E20 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.60
#561E20 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #561E20
13.11:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##561E20 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##561E20 | 1.00 | 13.11 | 1.60 | 13.11 |
| #FFFFFF | 13.11 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.60 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.11 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#2C2920
Deuteranopia (green-blind)
#3A351F
Tritanopia (blue-blind)
#5F141F
Achromatopsia (no color)
#303030
Design tokens & code
CSS
--color: #561e20; /* rgb */ color: rgb(86, 30, 32); /* oklch */ color: oklch(32.1% 0.083 20.9);
Tailwind
colors: {
custom: {
50: '#8a5d5b',
500: '#561e20',
950: '#000000',
},
}SCSS
$custom: #561e20; $custom-light: #8a5d5b; $custom-dark: #000000;
JSON
{
"hex": "#561e20",
"rgb": {
"r": 86,
"g": 30,
"b": 32
},
"hsl": {
"h": 357.857,
"s": 48.276,
"l": 22.745
},
"oklch": {
"l": 0.32121,
"c": 0.08332,
"h": 20.9
},
"luminance": 0.03011
}Semantic roles & 50–950 ramp
primary
#561E20
secondary
#458B89
accent
#D8D350
background
#F8F5F5
surface
#F0E9E9
border
#CBC5C5
text
#0C0404
muted
#7D7979