#CD2E96#CD2E96
#CD2E96 es un color medio y muy saturado de la familia rosa. Luminancia relativa 0.171; OKLCH L 58.4% C 0.216 H 345.9°. El mejor color de texto es #FFFFFF con contraste 4.74:1 (cumple WCAG AA).
Valores del color
| HEX | #CD2E96 |
|---|---|
| RGB | rgb(205, 46, 150) |
| HSL | hsl(321, 63%, 49%) |
| HSV | hsv(321, 78%, 80%) |
| CMYK | cmyk(0%, 77.6%, 26.8%, 19.6%) |
| CIE-LAB | lab(48.43, 68.87, -19.75) |
| CIE-LCH | lch(48.43, 71.64, 344.00°) |
| OKLab | oklab(58.41% 0.2093 -0.0524) |
| OKLCH | oklch(58.41% 0.216 345.9) |
| XYZ | xyz(31.6603, 17.1387, 30.4890) |
| Luminance | 0.1714 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Colores con nombre más cercanos
Mediumvioletred
#C71585
ΔE00 4.06
Magenta (survey)
#C20078
ΔE00 6.73
Purpley Pink
#C83CB9
ΔE00 6.85
Pinky Purple
#C94CBE
ΔE00 8.35
Ugly Purple
#A442A0
ΔE00 8.64
Purplish Pink
#CE5DAE
ΔE00 8.73
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#CD2E96 #2ECD65
analogous
#B52ECD #CD2E96 #CD2E46
triadic
#CD2E96 #96CD2E #2E96CD
tetradic
#CD2E96 #CDB52E #2ECD65 #2E46CD
square
#CD2E96 #CDB52E #2ECD65 #2E46CD
split-complementary
#CD2E96 #46CD2E #2ECDB5
monochromatic
#69184D #9B2371 #CD2E96 #DB5DAF #E68FC8
Accesibilidad y contraste
On white
4.74
#CD2E96 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.43
#CD2E96 on #000000
AA ✗AA large ✓AAA ✗
Mejor color de texto
#FFFFFF on #CD2E96
4.74:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##CD2E96 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##CD2E96 | 1.00 | 4.74 | 4.43 | 4.74 |
| #FFFFFF | 4.74 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.43 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.74 | 1.00 | 21.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#456299
Deuteranopia (green-blind)
#757D92
Tritanopia (blue-blind)
#DB295F
Achromatopsia (no color)
#737373
Tokens de diseño y código
CSS
--color: #cd2e96; /* rgb */ color: rgb(205, 46, 150); /* oklch */ color: oklch(58.4% 0.216 345.9);
Tailwind
colors: {
custom: {
50: '#e178b5',
500: '#cd2e96',
950: '#000000',
},
}SCSS
$custom: #cd2e96; $custom-light: #e178b5; $custom-dark: #000000;
JSON
{
"hex": "#cd2e96",
"rgb": {
"r": 205,
"g": 46,
"b": 150
},
"hsl": {
"h": 320.755,
"s": 63.347,
"l": 49.216
},
"oklch": {
"l": 0.58412,
"c": 0.21578,
"h": 345.9
},
"luminance": 0.17135
}Semantic roles & 50–950 ramp
primary
#CD2E96
secondary
#86D0A0
accent
#E67A41
background
#FEF7FB
surface
#FDEEF6
border
#D5C9D0
text
#160A11
muted
#847C80
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →