#54181F#54181F
#54181F is a dark, moderate red. Relative luminance 0.026; OKLCH L 30.9% C 0.089 H 17.3°. Best body text is #FFFFFF at 13.75:1 contrast (WCAG AA passes).
Color values
| HEX | #54181F |
|---|---|
| RGB | rgb(84, 24, 31) |
| HSL | hsl(353, 56%, 21%) |
| HSV | hsv(353, 71%, 33%) |
| CMYK | cmyk(0%, 71.4%, 63.1%, 67.1%) |
| CIE-LAB | lab(18.53, 28.36, 10.73) |
| CIE-LCH | lch(18.53, 30.32, 20.72°) |
| OKLab | oklab(30.87% 0.0849 0.0264) |
| OKLCH | oklch(30.87% 0.089 17.3) |
| XYZ | xyz(4.2305, 2.6376, 1.5824) |
| Luminance | 0.0264 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Maroon (survey)
#650021
ΔE00 5.47
Burgundy (survey)
#610023
ΔE00 5.67
Claret
#680018
ΔE00 6.03
Dark Maroon
#3C0008
ΔE00 6.31
Deep Brown
#410200
ΔE00 6.40
Dried Blood
#4B0101
ΔE00 6.42
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#54181F #18544D
analogous
#54183D #54181F #542F18
triadic
#54181F #1F5418 #181F54
tetradic
#54181F #3D5418 #18544D #2F1854
square
#54181F #3D5418 #18544D #2F1854
split-complementary
#54181F #18542F #183D54
monochromatic
#180709 #240A0D #54181F #842631 #B33342
Accessibility & contrast
On white
13.75
#54181F on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.53
#54181F on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #54181F
13.75:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##54181F | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##54181F | 1.00 | 13.75 | 1.53 | 13.75 |
| #FFFFFF | 13.75 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.53 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.75 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#27251F
Deuteranopia (green-blind)
#36321D
Tritanopia (blue-blind)
#5C0C1B
Achromatopsia (no color)
#2D2D2D
Design tokens & code
CSS
--color: #54181f; /* rgb */ color: rgb(84, 24, 31); /* oklch */ color: oklch(30.9% 0.089 17.3);
Tailwind
colors: {
custom: {
50: '#89595a',
500: '#54181f',
950: '#000000',
},
}SCSS
$custom: #54181f; $custom-light: #89595a; $custom-dark: #000000;
JSON
{
"hex": "#54181f",
"rgb": {
"r": 84,
"g": 24,
"b": 31
},
"hsl": {
"h": 353,
"s": 55.556,
"l": 21.176
},
"oklch": {
"l": 0.30869,
"c": 0.08886,
"h": 17.3
},
"luminance": 0.02637
}Semantic roles & 50–950 ramp
primary
#54181F
secondary
#3D8B82
accent
#DFCD49
background
#F8F5F5
surface
#F0E9E9
border
#CBC5C5
text
#0C0403
muted
#7D7978