#D4463A#D4463A
#D4463A is a mid, vivid red. Relative luminance 0.187; OKLCH L 59.3% C 0.180 H 28.6°. Best body text is #000000 at 4.74:1 contrast (WCAG AA passes).
Color values
| HEX | #D4463A |
|---|---|
| RGB | rgb(212, 70, 58) |
| HSL | hsl(5, 64%, 53%) |
| HSV | hsv(5, 73%, 83%) |
| CMYK | cmyk(0%, 67%, 72.6%, 16.9%) |
| CIE-LAB | lab(50.32, 54.98, 38.14) |
| CIE-LCH | lch(50.32, 66.91, 34.74°) |
| OKLab | oklab(59.28% 0.1584 0.0862) |
| OKLCH | oklch(59.28% 0.18 28.6) |
| XYZ | xyz(30.1086, 18.6873, 6.0238) |
| Luminance | 0.1868 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Pale Red
#D9544D
ΔE00 4.26
Dark Coral
#CF524E
ΔE00 4.34
Reddish
#C44240
ΔE00 4.76
Faded Red
#D3494E
ΔE00 5.40
Dark Salmon
#C85A53
ΔE00 5.53
Cherry Red
#F7022A
ΔE00 6.11
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#D4463A #3AC8D4
analogous
#D43A7B #D4463A #D4933A
triadic
#D4463A #3AD446 #463AD4
tetradic
#D4463A #7BD43A #3AC8D4 #933AD4
square
#D4463A #7BD43A #3AC8D4 #933AD4
split-complementary
#D4463A #3AD493 #3A7BD4
monochromatic
#79221A #AB3025 #D4463A #DF756C #EAA49E
Accessibility & contrast
On white
4.43
#D4463A on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.74
#D4463A on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #D4463A
4.74:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##D4463A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##D4463A | 1.00 | 4.43 | 4.74 | 4.74 |
| #FFFFFF | 4.43 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.74 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.74 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6E6438
Deuteranopia (green-blind)
#918335
Tritanopia (blue-blind)
#E91C44
Achromatopsia (no color)
#787878
Design tokens & code
CSS
--color: #d4463a; /* rgb */ color: rgb(212, 70, 58); /* oklch */ color: oklch(59.3% 0.180 28.6);
Tailwind
colors: {
custom: {
50: '#ea8171',
500: '#d4463a',
950: '#000000',
},
}SCSS
$custom: #d4463a; $custom-light: #ea8171; $custom-dark: #000000;
JSON
{
"hex": "#d4463a",
"rgb": {
"r": 212,
"g": 70,
"b": 58
},
"hsl": {
"h": 4.675,
"s": 64.167,
"l": 52.941
},
"oklch": {
"l": 0.59279,
"c": 0.18034,
"h": 28.6
},
"luminance": 0.18683
}Semantic roles & 50–950 ramp
primary
#D4463A
secondary
#94D1D6
accent
#DAE741
background
#FFF8F6
surface
#FFEFEC
border
#D7CAC7
text
#180B07
muted
#867C7A