#511A18#511A18
#511A18 is a dark, moderate red. Relative luminance 0.026; OKLCH L 30.4% C 0.083 H 25.4°. Best body text is #FFFFFF at 13.90:1 contrast (WCAG AA passes).
Color values
| HEX | #511A18 |
|---|---|
| RGB | rgb(81, 26, 24) |
| HSL | hsl(2, 54%, 21%) |
| HSV | hsv(2, 70%, 32%) |
| CMYK | cmyk(0%, 67.9%, 70.4%, 68.2%) |
| CIE-LAB | lab(18.16, 25.61, 15.02) |
| CIE-LCH | lch(18.16, 29.69, 30.39°) |
| OKLab | oklab(30.43% 0.0751 0.0356) |
| OKLCH | oklch(30.43% 0.083 25.4) |
| XYZ | xyz(3.9280, 2.5546, 1.1502) |
| Luminance | 0.0255 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Dried Blood
#4B0101
ΔE00 4.91
Mahogany
#4A0100
ΔE00 4.97
Deep Brown
#410200
ΔE00 5.37
Rosewood
#65000B
ΔE00 6.69
Claret
#680018
ΔE00 6.87
Dark Maroon
#3C0008
ΔE00 7.19
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#511A18 #184F51
analogous
#511832 #511A18 #513618
triadic
#511A18 #18511A #1A1851
tetradic
#511A18 #325118 #184F51 #361851
square
#511A18 #325118 #184F51 #361851
split-complementary
#511A18 #185136 #183251
monochromatic
#180807 #220B0A #511A18 #802926 #AF3834
Accessibility & contrast
On white
13.90
#511A18 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.51
#511A18 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #511A18
13.90:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##511A18 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##511A18 | 1.00 | 13.90 | 1.51 | 13.90 |
| #FFFFFF | 13.90 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.51 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.90 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#282517
Deuteranopia (green-blind)
#363117
Tritanopia (blue-blind)
#590E1A
Achromatopsia (no color)
#2C2C2C
Design tokens & code
CSS
--color: #511a18; /* rgb */ color: rgb(81, 26, 24); /* oklch */ color: oklch(30.4% 0.083 25.4);
Tailwind
colors: {
custom: {
50: '#875954',
500: '#511a18',
950: '#000000',
},
}SCSS
$custom: #511a18; $custom-light: #875954; $custom-dark: #000000;
JSON
{
"hex": "#511a18",
"rgb": {
"r": 81,
"g": 26,
"b": 24
},
"hsl": {
"h": 2.105,
"s": 54.286,
"l": 20.588
},
"oklch": {
"l": 0.30434,
"c": 0.08312,
"h": 25.4
},
"luminance": 0.02554
}Semantic roles & 50–950 ramp
primary
#511A18
secondary
#3D8588
accent
#D8DE4A
background
#F8F5F4
surface
#F0E9E7
border
#CBC5C3
text
#0C0402
muted
#7D7978