#CC4A5E#CC4A5E
#CC4A5E is a mid, vivid red. Relative luminance 0.185; OKLCH L 59.1% C 0.165 H 14.6°. Best body text is #000000 at 4.71:1 contrast (WCAG AA passes).
Color values
| HEX | #CC4A5E |
|---|---|
| RGB | rgb(204, 74, 94) |
| HSL | hsl(351, 56%, 55%) |
| HSV | hsv(351, 64%, 80%) |
| CMYK | cmyk(0%, 63.7%, 53.9%, 20%) |
| CIE-LAB | lab(50.15, 52.90, 16.54) |
| CIE-LCH | lch(50.15, 55.43, 17.36°) |
| OKLab | oklab(59.09% 0.1593 0.0415) |
| OKLCH | oklch(59.09% 0.165 14.6) |
| XYZ | xyz(29.3735, 18.5469, 12.6206) |
| Luminance | 0.1854 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Deep Rose
#C74767
ΔE00 3.90
Cherry
#DE3163
ΔE00 4.67
Dark Rose
#B5485D
ΔE00 5.23
Dusty Red
#B9484E
ΔE00 5.35
Faded Red
#D3494E
ΔE00 5.44
Dark Pink
#CB416B
ΔE00 5.51
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CC4A5E #4ACCB8
analogous
#CC4A9F #CC4A5E #CC774A
triadic
#CC4A5E #5ECC4A #4A5ECC
tetradic
#CC4A5E #9FCC4A #4ACCB8 #774ACC
square
#CC4A5E #9FCC4A #4ACCB8 #774ACC
split-complementary
#CC4A5E #4ACC77 #4A9FCC
monochromatic
#792230 #A93042 #CC4A5E #D97A88 #E7A9B3
Accessibility & contrast
On white
4.46
#CC4A5E on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.71
#CC4A5E on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #CC4A5E
4.71:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CC4A5E | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CC4A5E | 1.00 | 4.46 | 4.71 | 4.71 |
| #FFFFFF | 4.46 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.71 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.71 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#69665E
Deuteranopia (green-blind)
#8A815B
Tritanopia (blue-blind)
#DE3352
Achromatopsia (no color)
#777777
Design tokens & code
CSS
--color: #cc4a5e; /* rgb */ color: rgb(204, 74, 94); /* oklch */ color: oklch(59.1% 0.165 14.6);
Tailwind
colors: {
custom: {
50: '#e1838b',
500: '#cc4a5e',
950: '#000000',
},
}SCSS
$custom: #cc4a5e; $custom-light: #e1838b; $custom-dark: #000000;
JSON
{
"hex": "#cc4a5e",
"rgb": {
"r": 204,
"g": 74,
"b": 94
},
"hsl": {
"h": 350.769,
"s": 56.034,
"l": 54.51
},
"oklch": {
"l": 0.59089,
"c": 0.1646,
"h": 14.6
},
"luminance": 0.18543
}Semantic roles & 50–950 ramp
primary
#CC4A5E
secondary
#9DD4CC
accent
#DFC848
background
#FEF8F8
surface
#FDEFF0
border
#D5CACB
text
#160B0C
muted
#847C7D