#A286E4#A286E4
#A286E4 es un color claro y vivo de la familia violeta. Luminancia relativa 0.303; OKLCH L 68.4% C 0.137 H 296.3°. El mejor color de texto es #000000 con contraste 7.07:1 (cumple WCAG AA).
Valores del color
| HEX | #A286E4 |
|---|---|
| RGB | rgb(162, 134, 228) |
| HSL | hsl(258, 64%, 71%) |
| HSV | hsv(258, 41%, 89%) |
| CMYK | cmyk(28.9%, 41.2%, 0%, 10.6%) |
| CIE-LAB | lab(61.94, 30.53, -44.01) |
| CIE-LCH | lch(61.94, 53.56, 304.75°) |
| OKLab | oklab(68.41% 0.0609 -0.1231) |
| OKLCH | oklch(68.41% 0.137 296.3) |
| XYZ | xyz(37.4256, 30.3326, 77.2668) |
| Luminance | 0.3033 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Colores con nombre más cercanos
Perrywinkle
#8F8CE7
ΔE00 5.34
Periwinkle (survey)
#8E82FE
ΔE00 6.49
Lavender Blue
#8B88F8
ΔE00 6.67
Mediumpurple
#9370DB
ΔE00 6.70
Liliac
#C48EFD
ΔE00 6.72
Light Purple
#BF77F6
ΔE00 7.27
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#A286E4 #C8E486
analogous
#8699E4 #A286E4 #D186E4
triadic
#A286E4 #E4A286 #86E4A2
tetradic
#A286E4 #E48699 #C8E486 #86E4D1
square
#A286E4 #E48699 #C8E486 #86E4D1
split-complementary
#A286E4 #E4D186 #99E486
monochromatic
#592CC4 #7C54D9 #A286E4 #C8B8EF #ECE6F9
Accesibilidad y contraste
On white
2.97
#A286E4 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.07
#A286E4 on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #A286E4
7.07:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##A286E4 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##A286E4 | 1.00 | 2.97 | 7.07 | 7.07 |
| #FFFFFF | 2.97 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.07 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.07 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#6B96E8
Deuteranopia (green-blind)
#7094E2
Tritanopia (blue-blind)
#9497AA
Achromatopsia (no color)
#969696
Tokens de diseño y código
CSS
--color: #a286e4; /* rgb */ color: rgb(162, 134, 228); /* oklch */ color: oklch(68.4% 0.137 296.3);
Tailwind
colors: {
custom: {
50: '#c0a9ed',
500: '#a286e4',
950: '#000000',
},
}SCSS
$custom: #a286e4; $custom-light: #c0a9ed; $custom-dark: #000000;
JSON
{
"hex": "#a286e4",
"rgb": {
"r": 162,
"g": 134,
"b": 228
},
"hsl": {
"h": 257.872,
"s": 63.514,
"l": 70.98
},
"oklch": {
"l": 0.68409,
"c": 0.13737,
"h": 296.3
},
"luminance": 0.30333
}Semantic roles & 50–950 ramp
primary
#A286E4
secondary
#E8EFD6
accent
#CB1A97
background
#FCFAFE
surface
#F8F4FD
border
#D1CED5
text
#121016
muted
#817F84
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →