#DC5488#DC5488
#DC5488 is a light, vivid pink. Relative luminance 0.233; OKLCH L 63.9% C 0.176 H 359.6°. Best body text is #000000 at 5.67:1 contrast (WCAG AA passes).
Color values
| HEX | #DC5488 |
|---|---|
| RGB | rgb(220, 84, 136) |
| HSL | hsl(337, 66%, 60%) |
| HSV | hsv(337, 62%, 86%) |
| CMYK | cmyk(0%, 61.8%, 38.2%, 13.7%) |
| CIE-LAB | lab(55.42, 57.68, -0.68) |
| CIE-LCH | lch(55.42, 57.68, 359.32°) |
| OKLab | oklab(63.86% 0.1762 -0.0011) |
| OKLCH | oklch(63.86% 0.176 359.6) |
| XYZ | xyz(37.1317, 23.3380, 25.8370) |
| Luminance | 0.2333 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Darkish Pink
#DA467D
ΔE00 3.05
Blush
#DE5D83
ΔE00 3.25
Medium Pink
#F36196
ΔE00 5.54
Palevioletred
#DB7093
ΔE00 5.95
Strong Pink
#FF0789
ΔE00 6.44
Strawberry
#FC5A8D
ΔE00 6.61
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#DC5488 #54DCA8
analogous
#DC54CC #DC5488 #DC6454
triadic
#DC5488 #88DC54 #5488DC
tetradic
#DC5488 #CCDC54 #54DCA8 #6454DC
square
#DC5488 #CCDC54 #54DCA8 #6454DC
split-complementary
#DC5488 #54DC64 #54CCDC
monochromatic
#971F4D #CA2967 #DC5488 #E687AB #F1BACF
Accessibility & contrast
On white
3.71
#DC5488 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.67
#DC5488 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #DC5488
5.67:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##DC5488 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##DC5488 | 1.00 | 3.71 | 5.67 | 5.67 |
| #FFFFFF | 3.71 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.67 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.67 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6D7489
Deuteranopia (green-blind)
#918E85
Tritanopia (blue-blind)
#ED4768
Achromatopsia (no color)
#858585
Design tokens & code
CSS
--color: #dc5488; /* rgb */ color: rgb(220, 84, 136); /* oklch */ color: oklch(63.9% 0.176 359.6);
Tailwind
colors: {
custom: {
50: '#eb8baa',
500: '#dc5488',
950: '#000000',
},
}SCSS
$custom: #dc5488; $custom-light: #eb8baa; $custom-dark: #000000;
JSON
{
"hex": "#dc5488",
"rgb": {
"r": 220,
"g": 84,
"b": 136
},
"hsl": {
"h": 337.059,
"s": 66.019,
"l": 59.608
},
"oklch": {
"l": 0.63863,
"c": 0.17619,
"h": 359.6
},
"luminance": 0.23334
}Semantic roles & 50–950 ramp
primary
#DC5488
secondary
#ACE0CC
accent
#E9A83F
background
#FFF8FA
surface
#FEF0F4
border
#D6CBCE
text
#170C10
muted
#857D7F