#CDC3F7#CDC3F7
#CDC3F7 es un color muy claro y moderadamente saturado de la familia violeta. Luminancia relativa 0.587; OKLCH L 84.3% C 0.073 H 293.6°. El mejor color de texto es #000000 con contraste 12.75:1 (cumple WCAG AA).
Valores del color
| HEX | #CDC3F7 |
|---|---|
| RGB | rgb(205, 195, 247) |
| HSL | hsl(252, 76%, 87%) |
| HSV | hsv(252, 21%, 97%) |
| CMYK | cmyk(17%, 21.1%, 0%, 3.1%) |
| CIE-LAB | lab(81.14, 13.70, -24.35) |
| CIE-LCH | lch(81.14, 27.94, 299.37°) |
| OKLab | oklab(84.26% 0.029 -0.0665) |
| OKLCH | oklch(84.26% 0.073 293.6) |
| XYZ | xyz(61.4768, 58.7243, 96.0737) |
| Luminance | 0.5873 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Colores con nombre más cercanos
Periwinkle
#CCCCFF
ΔE00 3.31
Light Lavender
#DFC5FE
ΔE00 4.23
Light Periwinkle
#C1C6FC
ΔE00 4.55
Pale Lilac
#E4CBFF
ΔE00 4.90
Light Violet
#D6B4FC
ΔE00 6.27
Pale Violet
#CEAEFA
ΔE00 6.97
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#CDC3F7 #EDF7C3
analogous
#C3D3F7 #CDC3F7 #E7C3F7
triadic
#CDC3F7 #F7CDC3 #C3F7CD
tetradic
#CDC3F7 #F7C3D3 #EDF7C3 #C3F7E7
square
#CDC3F7 #F7C3D3 #EDF7C3 #C3F7E7
split-complementary
#CDC3F7 #F7E7C3 #D3F7C3
monochromatic
#7357E9 #A08DF0 #CDC3F7 #E8E4FB #E8E4FB
Accesibilidad y contraste
On white
1.65
#CDC3F7 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
12.75
#CDC3F7 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #CDC3F7
12.75:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##CDC3F7 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CDC3F7 | 1.00 | 1.65 | 12.75 | 12.75 |
| #FFFFFF | 1.65 | 1.00 | 21.00 | 21.00 |
| #000000 | 12.75 | 21.00 | 1.00 | 1.00 |
| ##000000 | 12.75 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#B8CAF9
Deuteranopia (green-blind)
#B8C9F6
Tritanopia (blue-blind)
#C5CBD5
Achromatopsia (no color)
#C9C9C9
Tokens de diseño y código
CSS
--color: #cdc3f7; /* rgb */ color: rgb(205, 195, 247); /* oklch */ color: oklch(84.3% 0.073 293.6);
Tailwind
colors: {
custom: {
50: '#dcd5fa',
500: '#cdc3f7',
950: '#000000',
},
}SCSS
$custom: #cdc3f7; $custom-light: #dcd5fa; $custom-dark: #000000;
JSON
{
"hex": "#cdc3f7",
"rgb": {
"r": 205,
"g": 195,
"b": 247
},
"hsl": {
"h": 251.538,
"s": 76.471,
"l": 86.667
},
"oklch": {
"l": 0.8426,
"c": 0.07253,
"h": 293.6
},
"luminance": 0.58725
}Semantic roles & 50–950 ramp
primary
#CDC3F7
secondary
#C9DA84
accent
#D90DB1
background
#FEFEFF
surface
#FCFBFF
border
#D5D4D7
text
#151417
muted
#848385
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →