#AFA9E1#AFA9E1
#AFA9E1 es un color claro y moderadamente saturado de la familia azul. Luminancia relativa 0.429; OKLCH L 76.0% C 0.080 H 289.3°. El mejor color de texto es #000000 con contraste 9.59:1 (cumple WCAG AA).
Valores del color
| HEX | #AFA9E1 |
|---|---|
| RGB | rgb(175, 169, 225) |
| HSL | hsl(246, 48%, 77%) |
| HSV | hsv(246, 25%, 88%) |
| CMYK | cmyk(22.2%, 24.9%, 0%, 11.8%) |
| CIE-LAB | lab(71.50, 13.83, -27.40) |
| CIE-LCH | lch(71.50, 30.69, 296.78°) |
| OKLab | oklab(75.96% 0.0263 -0.0753) |
| OKLCH | oklch(75.96% 0.08 289.3) |
| XYZ | xyz(45.4545, 42.9255, 77.1102) |
| Luminance | 0.4293 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Colores con nombre más cercanos
Lavender
#B39DDB
ΔE00 4.57
Pale Violet
#CEAEFA
ΔE00 6.98
Light Periwinkle
#C1C6FC
ΔE00 7.60
Lavender (survey)
#C79FEF
ΔE00 7.72
Light Violet
#D6B4FC
ΔE00 8.10
Pastel Purple
#CAA0FF
ΔE00 8.74
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#AFA9E1 #DBE1A9
analogous
#A9BFE1 #AFA9E1 #CBA9E1
triadic
#AFA9E1 #E1AFA9 #A9E1AF
tetradic
#AFA9E1 #E1A9BF #DBE1A9 #A9E1CB
square
#AFA9E1 #E1A9BF #DBE1A9 #A9E1CB
split-complementary
#AFA9E1 #E1CBA9 #BFE1A9
monochromatic
#5B4EC1 #857CD1 #AFA9E1 #D9D6F1 #EAE8F7
Accesibilidad y contraste
On white
2.19
#AFA9E1 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.59
#AFA9E1 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #AFA9E1
9.59:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##AFA9E1 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##AFA9E1 | 1.00 | 2.19 | 9.59 | 9.59 |
| #FFFFFF | 2.19 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.59 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.59 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#9BB0E3
Deuteranopia (green-blind)
#9BAEDF
Tritanopia (blue-blind)
#A4B2BC
Achromatopsia (no color)
#AFAFAF
Tokens de diseño y código
CSS
--color: #afa9e1; /* rgb */ color: rgb(175, 169, 225); /* oklch */ color: oklch(76.0% 0.080 289.3);
Tailwind
colors: {
custom: {
50: '#c7c2ea',
500: '#afa9e1',
950: '#000000',
},
}SCSS
$custom: #afa9e1; $custom-light: #c7c2ea; $custom-dark: #000000;
JSON
{
"hex": "#afa9e1",
"rgb": {
"r": 175,
"g": 169,
"b": 225
},
"hsl": {
"h": 246.429,
"s": 48.276,
"l": 77.255
},
"oklch": {
"l": 0.75958,
"c": 0.0798,
"h": 289.3
},
"luminance": 0.42926
}Semantic roles & 50–950 ramp
primary
#AFA9E1
secondary
#ECEEDD
accent
#BC2AAC
background
#FCFBFE
surface
#F8F7FD
border
#D1D0D5
text
#131216
muted
#828184
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →