#D691C8#D691C8
#D691C8 es un color claro y moderadamente saturado de la familia rosa. Luminancia relativa 0.387; OKLCH L 74.2% C 0.110 H 334.2°. El mejor color de texto es #000000 con contraste 8.74:1 (cumple WCAG AA).
Valores del color
| HEX | #D691C8 |
|---|---|
| RGB | rgb(214, 145, 200) |
| HSL | hsl(312, 46%, 70%) |
| HSV | hsv(312, 32%, 84%) |
| CMYK | cmyk(0%, 32.2%, 6.5%, 16.1%) |
| CIE-LAB | lab(68.55, 34.52, -17.80) |
| CIE-LCH | lch(68.55, 38.84, 332.73°) |
| OKLab | oklab(74.25% 0.0986 -0.0477) |
| OKLCH | oklch(74.25% 0.11 334.2) |
| XYZ | xyz(48.2818, 38.7192, 59.5627) |
| Luminance | 0.3872 (WCAG relative) |
| Temperature | neutral |
| Family | pink |
Colores con nombre más cercanos
Plum
#DDA0DD
ΔE00 4.55
Lavender Pink
#DD85D7
ΔE00 5.21
Lilac
#C8A2C8
ΔE00 6.61
Bubblegum Pink
#FE83CC
ΔE00 7.54
Orchid (survey)
#C875C4
ΔE00 8.02
Pale Purple
#B790D4
ΔE00 8.56
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#D691C8 #91D69F
analogous
#C191D6 #D691C8 #D691A5
triadic
#D691C8 #C8D691 #91C8D6
tetradic
#D691C8 #D6C191 #91D69F #91A5D6
square
#D691C8 #D6C191 #91D69F #91A5D6
split-complementary
#D691C8 #A5D691 #91D6C1
monochromatic
#AC4096 #C564B2 #D691C8 #E7BEDE #F7E9F4
Accesibilidad y contraste
On white
2.40
#D691C8 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.74
#D691C8 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #D691C8
8.74:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##D691C8 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##D691C8 | 1.00 | 2.40 | 8.74 | 8.74 |
| #FFFFFF | 2.40 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.74 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.74 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#91A1CA
Deuteranopia (green-blind)
#A2ABC6
Tritanopia (blue-blind)
#DC94A5
Achromatopsia (no color)
#A7A7A7
Tokens de diseño y código
CSS
--color: #d691c8; /* rgb */ color: rgb(214, 145, 200); /* oklch */ color: oklch(74.2% 0.110 334.2);
Tailwind
colors: {
custom: {
50: '#e3b2d8',
500: '#d691c8',
950: '#000000',
},
}SCSS
$custom: #d691c8; $custom-light: #e3b2d8; $custom-dark: #000000;
JSON
{
"hex": "#d691c8",
"rgb": {
"r": 214,
"g": 145,
"b": 200
},
"hsl": {
"h": 312.174,
"s": 45.695,
"l": 70.392
},
"oklch": {
"l": 0.74248,
"c": 0.10953,
"h": 334.2
},
"luminance": 0.38717
}Semantic roles & 50–950 ramp
primary
#D691C8
secondary
#D8EBDC
accent
#B9492D
background
#FEFBFD
surface
#FCF6FA
border
#D5D0D3
text
#151114
muted
#848083
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →