#CA548F#CA548F
#CA548F is a mid, vivid pink. Relative luminance 0.209; OKLCH L 61.5% C 0.162 H 351.8°. Best body text is #000000 at 5.18:1 contrast (WCAG AA passes).
Color values
| HEX | #CA548F |
|---|---|
| RGB | rgb(202, 84, 143) |
| HSL | hsl(330, 53%, 56%) |
| HSV | hsv(330, 58%, 79%) |
| CMYK | cmyk(0%, 58.4%, 29.2%, 20.8%) |
| CIE-LAB | lab(52.82, 52.94, -8.98) |
| CIE-LCH | lch(52.82, 53.70, 350.37°) |
| OKLab | oklab(61.46% 0.1607 -0.0232) |
| OKLCH | oklch(61.46% 0.162 351.8) |
| XYZ | xyz(32.4868, 20.8836, 28.3013) |
| Luminance | 0.2088 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Darkish Pink
#DA467D
ΔE00 5.64
Purplish Pink
#CE5DAE
ΔE00 6.50
Pale Magenta
#D767AD
ΔE00 6.89
Blush
#DE5D83
ΔE00 7.68
Neon Pink
#FE019A
ΔE00 8.49
Dark Pink
#CB416B
ΔE00 8.57
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CA548F #54CA8F
analogous
#CA54CA #CA548F #CA5454
triadic
#CA548F #8FCA54 #548FCA
tetradic
#CA548F #CACA54 #54CA8F #5454CA
square
#CA548F #CACA54 #54CA8F #5454CA
split-complementary
#CA548F #54CA54 #54CACA
monochromatic
#7D2752 #AC3570 #CA548F #D883AE #E7B1CC
Accessibility & contrast
On white
4.06
#CA548F on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.18
#CA548F on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #CA548F
5.18:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CA548F | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CA548F | 1.00 | 4.06 | 5.18 | 5.18 |
| #FFFFFF | 4.06 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.18 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.18 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#647191
Deuteranopia (green-blind)
#84868C
Tritanopia (blue-blind)
#D84E6B
Achromatopsia (no color)
#7E7E7E
Design tokens & code
CSS
--color: #ca548f; /* rgb */ color: rgb(202, 84, 143); /* oklch */ color: oklch(61.5% 0.162 351.8);
Tailwind
colors: {
custom: {
50: '#dd8aaf',
500: '#ca548f',
950: '#000000',
},
}SCSS
$custom: #ca548f; $custom-light: #dd8aaf; $custom-dark: #000000;
JSON
{
"hex": "#ca548f",
"rgb": {
"r": 202,
"g": 84,
"b": 143
},
"hsl": {
"h": 330,
"s": 52.679,
"l": 56.078
},
"oklch": {
"l": 0.61456,
"c": 0.16234,
"h": 351.8
},
"luminance": 0.2088
}Semantic roles & 50–950 ramp
primary
#CA548F
secondary
#A5D5BD
accent
#DC944C
background
#FEF8FA
surface
#FCF0F4
border
#D5CBCE
text
#160C10
muted
#847D7F