#CC6785#CC6785
#CC6785 is a light, vivid pink. Relative luminance 0.242; OKLCH L 64.0% C 0.131 H 2.6°. Best body text is #000000 at 5.85:1 contrast (WCAG AA passes).
Color values
| HEX | #CC6785 |
|---|---|
| RGB | rgb(204, 103, 133) |
| HSL | hsl(342, 50%, 60%) |
| HSV | hsv(342, 50%, 80%) |
| CMYK | cmyk(0%, 49.5%, 34.8%, 20%) |
| CIE-LAB | lab(56.32, 43.16, 2.10) |
| CIE-LCH | lch(56.32, 43.21, 2.79°) |
| OKLab | oklab(64.04% 0.1311 0.006) |
| OKLCH | oklch(64.04% 0.131 2.6) |
| XYZ | xyz(33.9873, 24.2345, 25.0735) |
| Luminance | 0.2423 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Blush
#DE5D83
ΔE00 3.59
Pinkish
#D46A7E
ΔE00 3.83
Muted Pink
#D1768F
ΔE00 3.99
Palevioletred
#DB7093
ΔE00 4.01
Rose (survey)
#CF6275
ΔE00 4.52
Ugly Pink
#CD7584
ΔE00 4.85
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CC6785 #67CCAE
analogous
#CC67B8 #CC6785 #CC7B67
triadic
#CC6785 #85CC67 #6785CC
tetradic
#CC6785 #B8CC67 #67CCAE #7B67CC
square
#CC6785 #B8CC67 #67CCAE #7B67CC
split-complementary
#CC6785 #67CC7B #67B8CC
monochromatic
#8A2E4A #B83E62 #CC6785 #DB95AA #EBC3CF
Accessibility & contrast
On white
3.59
#CC6785 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.85
#CC6785 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #CC6785
5.85:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CC6785 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CC6785 | 1.00 | 3.59 | 5.85 | 5.85 |
| #FFFFFF | 3.59 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.85 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.85 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#787B86
Deuteranopia (green-blind)
#918E83
Tritanopia (blue-blind)
#DB5F72
Achromatopsia (no color)
#878787
Design tokens & code
CSS
--color: #cc6785; /* rgb */ color: rgb(204, 103, 133); /* oklch */ color: oklch(64.0% 0.131 2.6);
Tailwind
colors: {
custom: {
50: '#de95a8',
500: '#cc6785',
950: '#000000',
},
}SCSS
$custom: #cc6785; $custom-light: #de95a8; $custom-dark: #000000;
JSON
{
"hex": "#cc6785",
"rgb": {
"r": 204,
"g": 103,
"b": 133
},
"hsl": {
"h": 342.178,
"s": 49.754,
"l": 60.196
},
"oklch": {
"l": 0.64036,
"c": 0.13127,
"h": 2.6
},
"luminance": 0.24231
}Semantic roles & 50–950 ramp
primary
#CC6785
secondary
#B4DBCF
accent
#BD9128
background
#FEF9FA
surface
#FCF2F4
border
#D5CCCE
text
#160D0F
muted
#847E7F