#DF6586#DF6586
#DF6586 is a light, vivid pink. Relative luminance 0.267; OKLCH L 66.4% C 0.155 H 5.3°. Best body text is #000000 at 6.34:1 contrast (WCAG AA passes).
Color values
| HEX | #DF6586 |
|---|---|
| RGB | rgb(223, 101, 134) |
| HSL | hsl(344, 66%, 64%) |
| HSV | hsv(344, 55%, 87%) |
| CMYK | cmyk(0%, 54.7%, 39.9%, 12.5%) |
| CIE-LAB | lab(58.71, 50.73, 5.33) |
| CIE-LCH | lch(58.71, 51.01, 5.99°) |
| OKLab | oklab(66.4% 0.1544 0.0144) |
| OKLCH | oklch(66.4% 0.155 5.3) |
| XYZ | xyz(39.3905, 26.7207, 25.6328) |
| Luminance | 0.2672 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Blush
#DE5D83
ΔE00 1.79
Pinkish
#D46A7E
ΔE00 3.20
Palevioletred
#DB7093
ΔE00 3.39
Rosy Pink
#F6688E
ΔE00 4.20
Medium Pink
#F36196
ΔE00 4.51
Muted Pink
#D1768F
ΔE00 4.54
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#DF6586 #65DFBE
analogous
#DF65C3 #DF6586 #DF8165
triadic
#DF6586 #86DF65 #6586DF
tetradic
#DF6586 #C3DF65 #65DFBE #8165DF
square
#DF6586 #C3DF65 #65DFBE #8165DF
split-complementary
#DF6586 #65DF81 #65C3DF
monochromatic
#A72346 #D4325E #DF6586 #EA98AE #F4CAD6
Accessibility & contrast
On white
3.31
#DF6586 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.34
#DF6586 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #DF6586
6.34:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##DF6586 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##DF6586 | 1.00 | 3.31 | 6.34 | 6.34 |
| #FFFFFF | 3.31 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.34 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.34 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7C7F87
Deuteranopia (green-blind)
#9B9683
Tritanopia (blue-blind)
#F05871
Achromatopsia (no color)
#8D8D8D
Design tokens & code
CSS
--color: #df6586; /* rgb */ color: rgb(223, 101, 134); /* oklch */ color: oklch(66.4% 0.155 5.3);
Tailwind
colors: {
custom: {
50: '#ed95a9',
500: '#df6586',
950: '#000000',
},
}SCSS
$custom: #df6586; $custom-light: #ed95a9; $custom-dark: #000000;
JSON
{
"hex": "#df6586",
"rgb": {
"r": 223,
"g": 101,
"b": 134
},
"hsl": {
"h": 343.77,
"s": 65.591,
"l": 63.529
},
"oklch": {
"l": 0.66398,
"c": 0.15504,
"h": 5.3
},
"luminance": 0.26717
}Semantic roles & 50–950 ramp
primary
#DF6586
secondary
#BAE6DA
accent
#CD9C18
background
#FFF9FA
surface
#FEF2F4
border
#D6CCCE
text
#170E0F
muted
#857E7F