#98A6EE#98A6EE
#98A6EE es un color claro y moderadamente saturado de la familia azul. Luminancia relativa 0.401; OKLCH L 74.2% C 0.105 H 275.1°. El mejor color de texto es #000000 con contraste 9.02:1 (cumple WCAG AA).
Valores del color
| HEX | #98A6EE |
|---|---|
| RGB | rgb(152, 166, 238) |
| HSL | hsl(230, 72%, 76%) |
| HSV | hsv(230, 36%, 93%) |
| CMYK | cmyk(36.1%, 30.3%, 0%, 6.7%) |
| CIE-LAB | lab(69.55, 12.11, -37.65) |
| CIE-LCH | lch(69.55, 39.55, 287.83°) |
| OKLab | oklab(74.19% 0.0094 -0.105) |
| OKLCH | oklch(74.19% 0.105 275.1) |
| XYZ | xyz(42.0132, 40.1192, 86.4025) |
| Luminance | 0.4012 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Colores con nombre más cercanos
Periwinkle Blue
#8F99FB
ΔE00 4.44
Pastel Blue
#A2BFFE
ΔE00 6.88
Perrywinkle
#8F8CE7
ΔE00 7.57
Carolina Blue
#8AB8FE
ΔE00 8.24
Lavender Blue
#8B88F8
ΔE00 8.95
Cornflowerblue
#6495ED
ΔE00 9.71
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#98A6EE #EEE098
analogous
#98D1EE #98A6EE #B598EE
triadic
#98A6EE #EE98A6 #A6EE98
tetradic
#98A6EE #EE98D1 #EEE098 #98EEB5
square
#98A6EE #EE98D1 #EEE098 #98EEB5
split-complementary
#98A6EE #EEB598 #D1EE98
monochromatic
#2F4BDD #6379E5 #98A6EE #CDD3F7 #E5E8FB
Accesibilidad y contraste
On white
2.33
#98A6EE on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.02
#98A6EE on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #98A6EE
9.02:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##98A6EE | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##98A6EE | 1.00 | 2.33 | 9.02 | 9.02 |
| #FFFFFF | 2.33 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.02 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.02 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#8FAEF1
Deuteranopia (green-blind)
#89A7EC
Tritanopia (blue-blind)
#7FB4C0
Achromatopsia (no color)
#AAAAAA
Tokens de diseño y código
CSS
--color: #98a6ee; /* rgb */ color: rgb(152, 166, 238); /* oklch */ color: oklch(74.2% 0.105 275.1);
Tailwind
colors: {
custom: {
50: '#b9c0f4',
500: '#98a6ee',
950: '#000000',
},
}SCSS
$custom: #98a6ee; $custom-light: #b9c0f4; $custom-dark: #000000;
JSON
{
"hex": "#98a6ee",
"rgb": {
"r": 152,
"g": 166,
"b": 238
},
"hsl": {
"h": 230.233,
"s": 71.667,
"l": 76.471
},
"oklch": {
"l": 0.74194,
"c": 0.1054,
"h": 275.1
},
"luminance": 0.40121
}Semantic roles & 50–950 ramp
primary
#98A6EE
secondary
#F2EED9
accent
#B412D4
background
#FBFBFE
surface
#F6F7FD
border
#D0D0D5
text
#121217
muted
#818185
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →