#2F426B#2F426B
#2F426B es un color oscuro y moderadamente saturado de la familia azul. Luminancia relativa 0.056; OKLCH L 38.4% C 0.074 H 264.3°. El mejor color de texto es #FFFFFF con contraste 9.94:1 (cumple WCAG AA).
Valores del color
| HEX | #2F426B |
|---|---|
| RGB | rgb(47, 66, 107) |
| HSL | hsl(221, 39%, 30%) |
| HSV | hsv(221, 56%, 42%) |
| CMYK | cmyk(56.1%, 38.3%, 0%, 58%) |
| CIE-LAB | lab(28.28, 5.69, -26.20) |
| CIE-LCH | lch(28.28, 26.81, 282.25°) |
| OKLab | oklab(38.36% -0.0073 -0.074) |
| OKLCH | oklch(38.36% 0.074 264.3) |
| XYZ | xyz(5.7735, 5.5619, 14.6764) |
| Luminance | 0.0556 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Colores con nombre más cercanos
Twilight Blue
#0A437A
ΔE00 5.63
Marine Blue
#01386A
ΔE00 5.77
Darkish Blue
#014182
ΔE00 5.98
Cobalt (survey)
#1E488F
ΔE00 6.29
Prussian Blue
#004577
ΔE00 6.72
Marine
#042E60
ΔE00 7.03
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#2F426B #6B582F
analogous
#2F606B #2F426B #3A2F6B
triadic
#2F426B #6B2F42 #426B2F
tetradic
#2F426B #6B2F60 #6B582F #2F6B3A
square
#2F426B #6B2F60 #6B582F #2F6B3A
split-complementary
#2F426B #6B3A2F #606B2F
monochromatic
#0A0E16 #1C2840 #2F426B #425C96 #5D7AB8
Accesibilidad y contraste
On white
9.94
#2F426B on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.11
#2F426B on #000000
AA ✗AA large ✗AAA ✗
Mejor color de texto
#FFFFFF on #2F426B
9.94:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##2F426B | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##2F426B | 1.00 | 9.94 | 2.11 | 9.94 |
| #FFFFFF | 9.94 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.11 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.94 | 1.00 | 21.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#32466D
Deuteranopia (green-blind)
#2B406A
Tritanopia (blue-blind)
#104B51
Achromatopsia (no color)
#434343
Tokens de diseño y código
CSS
--color: #2f426b; /* rgb */ color: rgb(47, 66, 107); /* oklch */ color: oklch(38.4% 0.074 264.3);
Tailwind
colors: {
custom: {
50: '#6c7695',
500: '#2f426b',
950: '#000000',
},
}SCSS
$custom: #2f426b; $custom-light: #6c7695; $custom-dark: #000000;
JSON
{
"hex": "#2f426b",
"rgb": {
"r": 47,
"g": 66,
"b": 107
},
"hsl": {
"h": 221,
"s": 38.961,
"l": 30.196
},
"oklch": {
"l": 0.38357,
"c": 0.07439,
"h": 264.3
},
"luminance": 0.05562
}Semantic roles & 50–950 ramp
primary
#2F426B
secondary
#9C8759
accent
#AA59CF
background
#F6F7F9
surface
#ECEDF1
border
#C7C8CB
text
#07080D
muted
#7A7B7E
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →