#DD3F78#DD3F78
#DD3F78 is a mid, vivid pink. Relative luminance 0.203; OKLCH L 61.3% C 0.198 H 3.3°. Best body text is #000000 at 5.06:1 contrast (WCAG AA passes).
Color values
| HEX | #DD3F78 |
|---|---|
| RGB | rgb(221, 63, 120) |
| HSL | hsl(338, 70%, 56%) |
| HSV | hsv(338, 71%, 87%) |
| CMYK | cmyk(0%, 71.5%, 45.7%, 13.3%) |
| CIE-LAB | lab(52.16, 64.55, 4.14) |
| CIE-LCH | lch(52.16, 64.68, 3.67°) |
| OKLab | oklab(61.33% 0.1976 0.0113) |
| OKLCH | oklch(61.33% 0.198 3.3) |
| XYZ | xyz(34.9893, 20.2878, 19.8391) |
| Luminance | 0.2028 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Darkish Pink
#DA467D
ΔE00 1.36
Dark Pink
#CB416B
ΔE00 4.05
Cherry
#DE3163
ΔE00 4.88
Rose
#FF007F
ΔE00 5.27
Deep Rose
#C74767
ΔE00 5.29
Blush
#DE5D83
ΔE00 5.55
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#DD3F78 #3FDDA4
analogous
#DD3FC7 #DD3F78 #DD553F
triadic
#DD3F78 #78DD3F #3F78DD
tetradic
#DD3F78 #C7DD3F #3FDDA4 #553FDD
square
#DD3F78 #C7DD3F #3FDDA4 #553FDD
split-complementary
#DD3F78 #3FDD55 #3FC7DD
monochromatic
#891841 #BD225A #DD3F78 #E6739D #EFA7C1
Accessibility & contrast
On white
4.15
#DD3F78 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.06
#DD3F78 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #DD3F78
5.06:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##DD3F78 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##DD3F78 | 1.00 | 4.15 | 5.06 | 5.06 |
| #FFFFFF | 4.15 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.06 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.06 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#636979
Deuteranopia (green-blind)
#8D8874
Tritanopia (blue-blind)
#F02457
Achromatopsia (no color)
#7C7C7C
Design tokens & code
CSS
--color: #dd3f78; /* rgb */ color: rgb(221, 63, 120); /* oklch */ color: oklch(61.3% 0.198 3.3);
Tailwind
colors: {
custom: {
50: '#ed809e',
500: '#dd3f78',
950: '#000000',
},
}SCSS
$custom: #dd3f78; $custom-light: #ed809e; $custom-dark: #000000;
JSON
{
"hex": "#dd3f78",
"rgb": {
"r": 221,
"g": 63,
"b": 120
},
"hsl": {
"h": 338.354,
"s": 69.912,
"l": 55.686
},
"oklch": {
"l": 0.61334,
"c": 0.19789,
"h": 3.3
},
"luminance": 0.20283
}Semantic roles & 50–950 ramp
primary
#DD3F78
secondary
#9BDDC5
accent
#EDAD3B
background
#FFF8F9
surface
#FFEFF2
border
#D7CACC
text
#170B0E
muted
#857C7E