#D85738#D85738
#D85738 is a mid, vivid red. Relative luminance 0.217; OKLCH L 62.0% C 0.169 H 34.8°. Best body text is #000000 at 5.34:1 contrast (WCAG AA passes).
Color values
| HEX | #D85738 |
|---|---|
| RGB | rgb(216, 87, 56) |
| HSL | hsl(12, 67%, 53%) |
| HSV | hsv(12, 74%, 85%) |
| CMYK | cmyk(0%, 59.7%, 74.1%, 15.3%) |
| CIE-LAB | lab(53.71, 48.95, 43.16) |
| CIE-LCH | lch(53.71, 65.26, 41.40°) |
| OKLab | oklab(61.95% 0.1388 0.0964) |
| OKLCH | oklch(61.95% 0.169 34.8) |
| XYZ | xyz(32.4443, 21.7053, 6.2217) |
| Luminance | 0.2170 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Tomato (survey)
#EF4026
ΔE00 4.60
Terracotta (survey)
#CA6641
ΔE00 4.61
Terracota
#CB6843
ΔE00 4.91
Terra Cotta
#C9643B
ΔE00 4.99
Orangey Red
#FA4224
ΔE00 5.92
Reddish Orange
#F8481C
ΔE00 6.15
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#D85738 #38B9D8
analogous
#D83869 #D85738 #D8A738
triadic
#D85738 #38D857 #5738D8
tetradic
#D85738 #69D838 #38B9D8 #A738D8
square
#D85738 #69D838 #38B9D8 #A738D8
split-complementary
#D85738 #38D8A7 #3869D8
monochromatic
#7D2C19 #B03E23 #D85738 #E2826B #ECAD9E
Accessibility & contrast
On white
3.93
#D85738 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.34
#D85738 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #D85738
5.34:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##D85738 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##D85738 | 1.00 | 3.93 | 5.34 | 5.34 |
| #FFFFFF | 3.93 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.34 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.34 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7B6F34
Deuteranopia (green-blind)
#9A8B34
Tritanopia (blue-blind)
#ED3950
Achromatopsia (no color)
#808080
Design tokens & code
CSS
--color: #d85738; /* rgb */ color: rgb(216, 87, 56); /* oklch */ color: oklch(62.0% 0.169 34.8);
Tailwind
colors: {
custom: {
50: '#ec8b70',
500: '#d85738',
950: '#000000',
},
}SCSS
$custom: #d85738; $custom-light: #ec8b70; $custom-dark: #000000;
JSON
{
"hex": "#d85738",
"rgb": {
"r": 216,
"g": 87,
"b": 56
},
"hsl": {
"h": 11.625,
"s": 67.227,
"l": 53.333
},
"oklch": {
"l": 0.61954,
"c": 0.169,
"h": 34.8
},
"luminance": 0.21701
}Semantic roles & 50–950 ramp
primary
#D85738
secondary
#93CBD8
accent
#C9EA3E
background
#FFF8F6
surface
#FFF0EC
border
#D7CBC7
text
#180C07
muted
#867D7A