#576CB5#576CB5
#576CB5 es un color medio y moderadamente saturado de la familia azul. Luminancia relativa 0.161; OKLCH L 54.9% C 0.117 H 270.1°. El mejor color de texto es #FFFFFF con contraste 4.98:1 (cumple WCAG AA).
Valores del color
| HEX | #576CB5 |
|---|---|
| RGB | rgb(87, 108, 181) |
| HSL | hsl(227, 39%, 53%) |
| HSV | hsv(227, 52%, 71%) |
| CMYK | cmyk(51.9%, 40.3%, 0%, 29%) |
| CIE-LAB | lab(47.09, 13.23, -41.17) |
| CIE-LCH | lch(47.09, 43.24, 287.81°) |
| OKLab | oklab(54.86% 0.0002 -0.1166) |
| OKLCH | oklch(54.86% 0.117 270.1) |
| XYZ | xyz(17.6308, 16.0864, 45.8830) |
| Luminance | 0.1609 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Colores con nombre más cercanos
French Blue
#436BAD
ΔE00 4.23
Cornflower Blue
#5170D7
ΔE00 4.89
Royal Blue
#4169E1
ΔE00 6.08
Dusky Blue
#475F94
ΔE00 6.51
Cadet Blue
#4E7496
ΔE00 6.98
Dull Blue
#49759C
ΔE00 7.30
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#576CB5 #B5A057
analogous
#579BB5 #576CB5 #7157B5
triadic
#576CB5 #B5576C #6CB557
tetradic
#576CB5 #B5579B #B5A057 #57B571
square
#576CB5 #B5579B #B5A057 #57B571
split-complementary
#576CB5 #B57157 #9BB557
monochromatic
#2D3965 #3F5190 #576CB5 #8191C8 #ACB6DA
Accesibilidad y contraste
On white
4.98
#576CB5 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.22
#576CB5 on #000000
AA ✗AA large ✓AAA ✗
Mejor color de texto
#FFFFFF on #576CB5
4.98:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##576CB5 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##576CB5 | 1.00 | 4.98 | 4.22 | 4.98 |
| #FFFFFF | 4.98 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.22 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.98 | 1.00 | 21.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#4F74B8
Deuteranopia (green-blind)
#456CB3
Tritanopia (blue-blind)
#2C7C88
Achromatopsia (no color)
#707070
Tokens de diseño y código
CSS
--color: #576cb5; /* rgb */ color: rgb(87, 108, 181); /* oklch */ color: oklch(54.9% 0.117 270.1);
Tailwind
colors: {
custom: {
50: '#8c95cb',
500: '#576cb5',
950: '#000000',
},
}SCSS
$custom: #576cb5; $custom-light: #8c95cb; $custom-dark: #000000;
JSON
{
"hex": "#576cb5",
"rgb": {
"r": 87,
"g": 108,
"b": 181
},
"hsl": {
"h": 226.596,
"s": 38.843,
"l": 52.549
},
"oklch": {
"l": 0.5486,
"c": 0.11659,
"h": 270.1
},
"luminance": 0.16088
}Semantic roles & 50–950 ramp
primary
#576CB5
secondary
#C8BF9F
accent
#B459CF
background
#F8F9FC
surface
#F0F1F8
border
#CBCBD1
text
#0D0D13
muted
#7D7E82
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →