#906FAE#906FAE
#906FAE es un color medio y moderadamente saturado de la familia violeta. Luminancia relativa 0.204; OKLCH L 59.8% C 0.100 H 307.6°. El mejor color de texto es #000000 con contraste 5.07:1 (cumple WCAG AA).
Valores del color
| HEX | #906FAE |
|---|---|
| RGB | rgb(144, 111, 174) |
| HSL | hsl(271, 28%, 56%) |
| HSV | hsv(271, 36%, 68%) |
| CMYK | cmyk(17.2%, 36.2%, 0%, 31.8%) |
| CIE-LAB | lab(52.24, 25.49, -28.70) |
| CIE-LCH | lch(52.24, 38.38, 311.61°) |
| OKLab | oklab(59.84% 0.0611 -0.0792) |
| OKLCH | oklch(59.84% 0.1 307.6) |
| XYZ | xyz(24.8246, 20.3544, 42.6572) |
| Luminance | 0.2035 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Colores con nombre más cercanos
Deep Lilac
#966EBD
ΔE00 3.30
Dark Lilac
#9C6DA5
ΔE00 4.40
Soft Purple
#A66FB5
ΔE00 5.03
Dark Lavender
#856798
ΔE00 5.16
Faded Purple
#916E99
ΔE00 5.60
Deep Lavender
#8D5EB7
ΔE00 6.39
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#906FAE #8DAE6F
analogous
#706FAE #906FAE #AE6FAC
triadic
#906FAE #AE906F #6FAE90
tetradic
#906FAE #AE706F #8DAE6F #6FACAE
square
#906FAE #AE706F #8DAE6F #6FACAE
split-complementary
#906FAE #ACAE6F #6FAE70
monochromatic
#523B68 #71518F #906FAE #AE96C4 #CCBDDA
Accesibilidad y contraste
On white
4.14
#906FAE on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.07
#906FAE on #000000
AA ✓AA large ✓AAA ✗
Mejor color de texto
#000000 on #906FAE
5.07:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##906FAE | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##906FAE | 1.00 | 4.14 | 5.07 | 5.07 |
| #FFFFFF | 4.14 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.07 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.07 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#627BB0
Deuteranopia (green-blind)
#6A7DAC
Tritanopia (blue-blind)
#8C7886
Achromatopsia (no color)
#7D7D7D
Tokens de diseño y código
CSS
--color: #906fae; /* rgb */ color: rgb(144, 111, 174); /* oklch */ color: oklch(59.8% 0.100 307.6);
Tailwind
colors: {
custom: {
50: '#b198c6',
500: '#906fae',
950: '#000000',
},
}SCSS
$custom: #906fae; $custom-light: #b198c6; $custom-dark: #000000;
JSON
{
"hex": "#906fae",
"rgb": {
"r": 144,
"g": 111,
"b": 174
},
"hsl": {
"h": 271.429,
"s": 28,
"l": 55.882
},
"oklch": {
"l": 0.59838,
"c": 0.10007,
"h": 307.6
},
"luminance": 0.20354
}Semantic roles & 50–950 ramp
primary
#906FAE
secondary
#BCC9AF
accent
#C46392
background
#FBF9FC
surface
#F6F2F8
border
#D0CCD1
text
#110E13
muted
#807E82
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →