#310B04#310B04
#310B04 is a very dark, moderate red. Relative luminance 0.009; OKLCH L 21.5% C 0.064 H 34.2°. Best body text is #FFFFFF at 17.79:1 contrast (WCAG AA passes).
Color values
| HEX | #310B04 |
|---|---|
| RGB | rgb(49, 11, 4) |
| HSL | hsl(9, 85%, 10%) |
| HSV | hsv(9, 92%, 19%) |
| CMYK | cmyk(0%, 77.6%, 91.8%, 80.8%) |
| CIE-LAB | lab(8.14, 18.76, 10.97) |
| CIE-LCH | lch(8.14, 21.73, 30.31°) |
| OKLab | oklab(21.52% 0.0529 0.0359) |
| OKLCH | oklch(21.52% 0.064 34.2) |
| XYZ | xyz(1.4084, 0.9013, 0.2146) |
| Luminance | 0.0090 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Deep Brown
#410200
ΔE00 5.54
Dark Maroon
#3C0008
ΔE00 5.63
Mahogany
#4A0100
ΔE00 7.51
Dried Blood
#4B0101
ΔE00 7.67
Very Dark Brown
#1D0200
ΔE00 7.99
Chocolate Brown
#411900
ΔE00 8.67
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#310B04 #042A31
analogous
#310413 #310B04 #312104
triadic
#310B04 #04310B #0B0431
tetradic
#310B04 #133104 #042A31 #210431
square
#310B04 #133104 #042A31 #210431
split-complementary
#310B04 #043121 #041331
monochromatic
#1C0602 #1C0602 #310B04 #6A1809 #A2240D
Accessibility & contrast
On white
17.79
#310B04 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.18
#310B04 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #310B04
17.79:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##310B04 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##310B04 | 1.00 | 17.79 | 1.18 | 17.79 |
| #FFFFFF | 17.79 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.18 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 17.79 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#161203
Deuteranopia (green-blind)
#1F1B03
Tritanopia (blue-blind)
#370309
Achromatopsia (no color)
#181818
Design tokens & code
CSS
--color: #310b04; /* rgb */ color: rgb(49, 11, 4); /* oklch */ color: oklch(21.5% 0.064 34.2);
Tailwind
colors: {
custom: {
50: '#6c4c48',
500: '#310b04',
950: '#000000',
},
}SCSS
$custom: #310b04; $custom-light: #6c4c48; $custom-dark: #000000;
JSON
{
"hex": "#310b04",
"rgb": {
"r": 49,
"g": 11,
"b": 4
},
"hsl": {
"h": 9.333,
"s": 84.906,
"l": 10.392
},
"oklch": {
"l": 0.21524,
"c": 0.06393,
"h": 34.2
},
"luminance": 0.00901
}Semantic roles & 50–950 ramp
primary
#310B04
secondary
#1D6673
accent
#DBFB2D
background
#F6F4F4
surface
#ECE7E6
border
#C7C3C2
text
#070100
muted
#7A7777