#CC7CAE#CC7CAE
#CC7CAE es un color claro y moderadamente saturado de la familia rosa. Luminancia relativa 0.303; OKLCH L 68.7% C 0.117 H 342.5°. El mejor color de texto es #000000 con contraste 7.06:1 (cumple WCAG AA).
Valores del color
| HEX | #CC7CAE |
|---|---|
| RGB | rgb(204, 124, 174) |
| HSL | hsl(323, 44%, 64%) |
| HSV | hsv(323, 39%, 80%) |
| CMYK | cmyk(0%, 39.2%, 14.7%, 20%) |
| CIE-LAB | lab(61.92, 38.04, -13.28) |
| CIE-LCH | lch(61.92, 40.29, 340.75°) |
| OKLab | oklab(68.68% 0.1119 -0.0352) |
| OKLCH | oklch(68.68% 0.117 342.5) |
| XYZ | xyz(39.7498, 30.3110, 43.7931) |
| Luminance | 0.3031 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Colores con nombre más cercanos
Pale Magenta
#D767AD
ΔE00 5.26
Orchid (survey)
#C875C4
ΔE00 6.57
Purplish Pink
#CE5DAE
ΔE00 7.80
Palevioletred
#DB7093
ΔE00 7.93
Dull Pink
#D5869D
ΔE00 7.97
Lavender Pink
#DD85D7
ΔE00 7.98
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#CC7CAE #7CCC9A
analogous
#C27CCC #CC7CAE #CC7C86
triadic
#CC7CAE #AECC7C #7CAECC
tetradic
#CC7CAE #CCC27C #7CCC9A #7C86CC
square
#CC7CAE #CCC27C #7CCC9A #7C86CC
split-complementary
#CC7CAE #86CC7C #7CCCC2
monochromatic
#943A72 #BB5093 #CC7CAE #DDA8C9 #EED4E4
Accesibilidad y contraste
On white
2.97
#CC7CAE on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.06
#CC7CAE on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #CC7CAE
7.06:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##CC7CAE | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CC7CAE | 1.00 | 2.97 | 7.06 | 7.06 |
| #FFFFFF | 2.97 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.06 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.06 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#808EB0
Deuteranopia (green-blind)
#959AAC
Tritanopia (blue-blind)
#D57C8E
Achromatopsia (no color)
#969696
Tokens de diseño y código
CSS
--color: #cc7cae; /* rgb */ color: rgb(204, 124, 174); /* oklch */ color: oklch(68.7% 0.117 342.5);
Tailwind
colors: {
custom: {
50: '#dda3c6',
500: '#cc7cae',
950: '#000000',
},
}SCSS
$custom: #cc7cae; $custom-light: #dda3c6; $custom-dark: #000000;
JSON
{
"hex": "#cc7cae",
"rgb": {
"r": 204,
"g": 124,
"b": 174
},
"hsl": {
"h": 322.5,
"s": 43.956,
"l": 64.314
},
"oklch": {
"l": 0.6868,
"c": 0.11729,
"h": 342.5
},
"luminance": 0.30309
}Semantic roles & 50–950 ramp
primary
#CC7CAE
secondary
#C4E0CE
accent
#B7622E
background
#FDFAFC
surface
#FBF4F8
border
#D4CED1
text
#150F13
muted
#837F82
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →