Flat Blue #3C73A8
Flat Blue es un azul medio-oscuro y moderadamente saturado, con código hex #3C73A8 y RGB rgb(60, 115, 168).
Aa
El texto blanco es el que mejor se lee sobre este color (4.98:1).
Sobre este color
#3C73A8 es un azul medio-oscuro y moderadamente saturado. En OKLCH, su luminosidad es 54%, su croma 0.102 y su matiz 249°. Su matiz está del lado frío de la rueda cromática. Es el color con nombre Flat Blue. El texto blanco es el que mejor se lee sobre este color, con 4.98:1.
| Familia de matiz | Azules |
| Luminosidad | medio-oscuro (54%) |
| Croma | moderadamente saturado (0.102) |
| Temperatura | frío |
| Nombre más cercano | Flat Blue |
| Texto negro | 4.20:1 |
| Texto blanco | 4.98:1 |
Colores que combinan con Flat Blue
Combinaciones obtenidas al rotar Flat Blue por la rueda de matiz de OKLCH, cada una con el nombre más cercano de nuestra lista.
Complementario
El matiz opuesto (180°).
Análogo
Matices vecinos, 30° a cada lado.
Triádico
Tres matices separados por 120°.
Paletas de colores con Flat Blue
Paletas seleccionadas que contienen un color a menos de ΔE 0.06 (OKLab) de Flat Blue, de la más cercana a la más lejana.
Colores con nombre similares
Los ocho colores con nombre más cercanos a Flat Blue, con su distancia ΔE.
- Muted Blue #3B719F ΔE 0.014
- Dull Blue #49759C ΔE 0.024
- French Blue #436BAD ΔE 0.026
- Nice Blue #107AB0 ΔE 0.029
- Cerulean #457B9D ΔE 0.034
- Windows Blue #3778BF ΔE 0.036
- Ocean Blue #03719C ΔE 0.038
- Mid Blue #276AB3 ΔE 0.039
Más sobre Flat Blue
Cómo hacer Flat Blue
Una receta inicial con colores de pintura comunes, calculada con un modelo espectral de pintura (el modo pintura del mezclador). Los pigmentos reales varían: mezcla primero una pequeña prueba y ajusta.
- 4 partes de azul
- 3 partes de rosa
- 1 parte de verde
Resultado de la receta: #3A71AA, una diferencia de ΔE 0.007 respecto a Flat Blue. Es muy parecido: la mayoría de la gente no notará la diferencia.
Códigos de Flat Blue en todos los formatos
| HEX | #3C73A8 |
| RGB | rgb(60, 115, 168) |
| HSL | hsl(209, 47%, 45%) |
| OKLCH | oklch(54.2% 0.102 249.4) |
Contraste
Las relaciones de contraste de WCAG 2 son el objetivo de conformidad: AA exige 4.5:1 para texto de cuerpo y 3:1 para texto grande; AAA exige 7:1. Los valores Lc de APCA son una guía complementaria de los borradores de WCAG 3.
| Combinación | WCAG 2 | Resultado | APCA | Guía APCA |
|---|---|---|---|---|
| Texto blanco sobre #3C73A8 | 4.98:1 | AA | Lc -79.7 | Bueno para texto de cuerpo |
| Texto negro sobre #3C73A8 | 4.20:1 | AA texto grande | Lc 29.8 | Solo divisores y decoración |
| Texto #3C73A8 sobre blanco | 4.98:1 | AA | Lc 74.3 | Texto de contenido, no para lecturas largas |
| Texto #3C73A8 sobre negro | 4.20:1 | AA texto grande | Lc -27.4 | Solo divisores y decoración |
Tonos y tintes de Flat Blue
Una escala de 50 a 950 creada en OKLCH: el matiz se mantiene, la luminosidad sigue una curva parecida a la de Tailwind v4 y cada paso permanece dentro de la gama sRGB. Este color está en el paso 600.
-
Paso 50
50
#F2F6F9
oklch(97.1% 0.006 239.8)
-
Paso 100
100
#E3EBF3
oklch(93.6% 0.014 248)
-
Paso 200
200
#CDDBEA
oklch(88.5% 0.026 250)
-
Paso 300
300
#ABC4DE
oklch(81% 0.046 249.4)
-
Paso 400
400
#7DA5CD
oklch(70.8% 0.073 248.9)
-
Paso 500
500
#5B8EC0
oklch(63.2% 0.094 249)
-
Paso 600
600 (este color)
#3C73A8
oklch(54.2% 0.102 249.4)
-
Paso 700
700
#326494
oklch(49.1% 0.094 249.5)
-
Paso 800
800
#2A5278
oklch(42.8% 0.078 249)
-
Paso 900
900
#274461
oklch(37.8% 0.061 249.7)
-
Paso 950
950
#172839
oklch(27.1% 0.039 249.5)
Exporta esta escala para Tailwind con la herramienta de colores de Tailwind
Flat Blue con daltonismo
Simulado con el modelo de Machado et al. (2009). ΔE es cuánto se desplaza el color: por debajo de 0.02 aproximadamente no notarías el cambio.
| Visión | Se ve como | Cambio (ΔE) |
|---|---|---|
| Protanopía (sin conos rojos) | #5C75AA | 0.037 |
| Deuteranopía (sin conos verdes) | #4D6BA7 | 0.026 |
| Tritanopía (sin conos azules) | #007F86 | 0.079 |
| Acromatopsia (sin color) | #707070 | 0.102 |
Usa Flat Blue en tu producto
Conviértelo en roles de interfaz claros y oscuros con el contraste verificado y expórtalos a Tailwind v4, shadcn/ui, CSS o design tokens.