#CF569A#CF569A
#CF569A is a light, vivid pink. Relative luminance 0.223; OKLCH L 62.8% C 0.170 H 348.3°. Best body text is #000000 at 5.45:1 contrast (WCAG AA passes).
Color values
| HEX | #CF569A |
|---|---|
| RGB | rgb(207, 86, 154) |
| HSL | hsl(326, 56%, 57%) |
| HSV | hsv(326, 58%, 81%) |
| CMYK | cmyk(0%, 58.5%, 25.6%, 18.8%) |
| CIE-LAB | lab(54.30, 55.01, -13.17) |
| CIE-LCH | lch(54.30, 56.56, 346.54°) |
| OKLab | oklab(62.83% 0.1661 -0.0345) |
| OKLCH | oklch(62.83% 0.17 348.3) |
| XYZ | xyz(34.8939, 22.2574, 33.0240) |
| Luminance | 0.2225 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Purplish Pink
#CE5DAE
ΔE00 4.28
Pale Magenta
#D767AD
ΔE00 4.88
Darkish Pink
#DA467D
ΔE00 7.27
Barbie Pink
#FE46A5
ΔE00 7.70
Shocking Pink
#FE02A2
ΔE00 7.80
Neon Pink
#FE019A
ΔE00 7.93
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CF569A #56CF8B
analogous
#C756CF #CF569A #CF565E
triadic
#CF569A #9ACF56 #569ACF
tetradic
#CF569A #CFC756 #56CF8B #565ECF
square
#CF569A #CFC756 #56CF8B #565ECF
split-complementary
#CF569A #5ECF56 #56CFC7
monochromatic
#85265B #B5337C #CF569A #DD86B6 #EAB5D3
Accessibility & contrast
On white
3.85
#CF569A on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.45
#CF569A on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #CF569A
5.45:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CF569A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CF569A | 1.00 | 3.85 | 5.45 | 5.45 |
| #FFFFFF | 3.85 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.45 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.45 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#64759C
Deuteranopia (green-blind)
#858A97
Tritanopia (blue-blind)
#DC5271
Achromatopsia (no color)
#828282
Design tokens & code
CSS
--color: #cf569a; /* rgb */ color: rgb(207, 86, 154); /* oklch */ color: oklch(62.8% 0.170 348.3);
Tailwind
colors: {
custom: {
50: '#e18bb7',
500: '#cf569a',
950: '#000000',
},
}SCSS
$custom: #cf569a; $custom-light: #e18bb7; $custom-dark: #000000;
JSON
{
"hex": "#cf569a",
"rgb": {
"r": 207,
"g": 86,
"b": 154
},
"hsl": {
"h": 326.281,
"s": 55.76,
"l": 57.451
},
"oklch": {
"l": 0.62826,
"c": 0.16967,
"h": 348.3
},
"luminance": 0.22254
}Semantic roles & 50–950 ramp
primary
#CF569A
secondary
#A8D9BD
accent
#DF8B49
background
#FEF8FB
surface
#FCF0F6
border
#D5CBD0
text
#160C11
muted
#847D80