#CC4E8D#CC4E8D
#CC4E8D is a mid, vivid pink. Relative luminance 0.202; OKLCH L 60.9% C 0.172 H 352.4°. Best body text is #000000 at 5.04:1 contrast (WCAG AA passes).
Color values
| HEX | #CC4E8D |
|---|---|
| RGB | rgb(204, 78, 141) |
| HSL | hsl(330, 55%, 55%) |
| HSV | hsv(330, 62%, 80%) |
| CMYK | cmyk(0%, 61.8%, 30.9%, 20%) |
| CIE-LAB | lab(52.08, 55.97, -8.88) |
| CIE-LCH | lch(52.08, 56.67, 350.99°) |
| OKLab | oklab(60.94% 0.1704 -0.0228) |
| OKLCH | oklch(60.94% 0.172 352.4) |
| XYZ | xyz(32.4355, 20.2126, 27.3874) |
| Luminance | 0.2021 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Darkish Pink
#DA467D
ΔE00 5.20
Purplish Pink
#CE5DAE
ΔE00 7.04
Pale Magenta
#D767AD
ΔE00 7.69
Neon Pink
#FE019A
ΔE00 7.96
Blush
#DE5D83
ΔE00 7.98
Dark Pink
#CB416B
ΔE00 8.03
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CC4E8D #4ECC8D
analogous
#CC4ECC #CC4E8D #CC4E4E
triadic
#CC4E8D #8DCC4E #4E8DCC
tetradic
#CC4E8D #CCCC4E #4ECC8D #4E4ECC
square
#CC4E8D #CCCC4E #4ECC8D #4E4ECC
split-complementary
#CC4E8D #4ECC4E #4ECCCC
monochromatic
#7C2450 #AB316E #CC4E8D #DA7EAC #E7ADCA
Accessibility & contrast
On white
4.17
#CC4E8D on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.04
#CC4E8D on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #CC4E8D
5.04:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CC4E8D | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CC4E8D | 1.00 | 4.17 | 5.04 | 5.04 |
| #FFFFFF | 4.17 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.04 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.04 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#606E8F
Deuteranopia (green-blind)
#83858A
Tritanopia (blue-blind)
#DA4767
Achromatopsia (no color)
#7C7C7C
Design tokens & code
CSS
--color: #cc4e8d; /* rgb */ color: rgb(204, 78, 141); /* oklch */ color: oklch(60.9% 0.172 352.4);
Tailwind
colors: {
custom: {
50: '#df86ae',
500: '#cc4e8d',
950: '#000000',
},
}SCSS
$custom: #cc4e8d; $custom-light: #df86ae; $custom-dark: #000000;
JSON
{
"hex": "#cc4e8d",
"rgb": {
"r": 204,
"g": 78,
"b": 141
},
"hsl": {
"h": 330,
"s": 55.263,
"l": 55.294
},
"oklch": {
"l": 0.60942,
"c": 0.17187,
"h": 352.4
},
"luminance": 0.20209
}Semantic roles & 50–950 ramp
primary
#CC4E8D
secondary
#A1D5BB
accent
#DF9449
background
#FEF8FA
surface
#FCF0F4
border
#D5CBCE
text
#160C10
muted
#847D7F