#DD433A#DD433A
#DD433A is a mid, vivid red. Relative luminance 0.197; OKLCH L 60.5% C 0.192 H 27.7°. Best body text is #000000 at 4.94:1 contrast (WCAG AA passes).
Color values
| HEX | #DD433A |
|---|---|
| RGB | rgb(221, 67, 58) |
| HSL | hsl(3, 71%, 55%) |
| HSV | hsv(3, 74%, 87%) |
| CMYK | cmyk(0%, 69.7%, 73.8%, 13.3%) |
| CIE-LAB | lab(51.49, 59.06, 39.89) |
| CIE-LCH | lch(51.49, 71.27, 34.04°) |
| OKLab | oklab(60.45% 0.1702 0.0895) |
| OKLCH | oklch(60.45% 0.192 27.7) |
| XYZ | xyz(32.5933, 19.6968, 6.0878) |
| Luminance | 0.1969 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Pale Red
#D9544D
ΔE00 3.84
Dark Coral
#CF524E
ΔE00 4.64
Cherry Red
#F7022A
ΔE00 4.81
Faded Red
#D3494E
ΔE00 5.47
Tomato (survey)
#EF4026
ΔE00 5.67
Pastel Red
#DB5856
ΔE00 5.79
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#DD433A #3AD4DD
analogous
#DD3A82 #DD433A #DD953A
triadic
#DD433A #3ADD43 #433ADD
tetradic
#DD433A #82DD3A #3AD4DD #953ADD
square
#DD433A #82DD3A #3AD4DD #953ADD
split-complementary
#DD433A #3ADD95 #3A82DD
monochromatic
#861D17 #BA2920 #DD433A #E6756E #EFA7A2
Accessibility & contrast
On white
4.25
#DD433A on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.94
#DD433A on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #DD433A
4.94:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##DD433A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##DD433A | 1.00 | 4.25 | 4.94 | 4.94 |
| #FFFFFF | 4.25 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.94 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.94 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#706538
Deuteranopia (green-blind)
#968734
Tritanopia (blue-blind)
#F30642
Achromatopsia (no color)
#7B7B7B
Design tokens & code
CSS
--color: #dd433a; /* rgb */ color: rgb(221, 67, 58); /* oklch */ color: oklch(60.5% 0.192 27.7);
Tailwind
colors: {
custom: {
50: '#f08171',
500: '#dd433a',
950: '#000000',
},
}SCSS
$custom: #dd433a; $custom-light: #f08171; $custom-dark: #000000;
JSON
{
"hex": "#dd433a",
"rgb": {
"r": 221,
"g": 67,
"b": 58
},
"hsl": {
"h": 3.313,
"s": 70.563,
"l": 54.706
},
"oklch": {
"l": 0.60452,
"c": 0.19226,
"h": 27.7
},
"luminance": 0.19692
}Semantic roles & 50–950 ramp
primary
#DD433A
secondary
#97D8DC
accent
#E3ED3A
background
#FFF8F6
surface
#FFEFEC
border
#D7CAC7
text
#180B07
muted
#867C7A