Nice Blue #107AB0
Nice Blue es un azul medio-oscuro y moderadamente saturado, con código hex #107AB0 y RGB rgb(16, 122, 176).
Aa
El texto blanco es el que mejor se lee sobre este color (4.73:1).
Sobre este color
#107AB0 es un azul medio-oscuro y moderadamente saturado. En OKLCH, su luminosidad es 55%, su croma 0.120 y su matiz 239°. Su matiz está del lado frío de la rueda cromática. Es el color con nombre Nice Blue. El texto blanco es el que mejor se lee sobre este color, con 4.73:1.
| Familia de matiz | Azules |
| Luminosidad | medio-oscuro (55%) |
| Croma | moderadamente saturado (0.120) |
| Temperatura | frío |
| Nombre más cercano | Nice Blue |
| Texto negro | 4.43:1 |
| Texto blanco | 4.73:1 |
Colores que combinan con Nice Blue
Combinaciones obtenidas al rotar Nice 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 Nice Blue
Paletas seleccionadas que contienen un color a menos de ΔE 0.06 (OKLab) de Nice Blue, de la más cercana a la más lejana.
Colores con nombre similares
Los ocho colores con nombre más cercanos a Nice Blue, con su distancia ΔE.
- Flat Blue #3C73A8 ΔE 0.029
- Windows Blue #3778BF ΔE 0.034
- Muted Blue #3B719F ΔE 0.036
- Ocean Blue #03719C ΔE 0.038
- Cerulean #457B9D ΔE 0.043
- Steel Blue #4682B4 ΔE 0.044
- Dull Blue #49759C ΔE 0.044
- Sea Blue #047495 ΔE 0.044
Más sobre Nice Blue
Cómo hacer Nice 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
- 2 partes de blanco
- 1 parte de verde
Resultado de la receta: #3179B3, una diferencia de ΔE 0.017 respecto a Nice Blue. Es muy parecido: la mayoría de la gente no notará la diferencia.
Códigos de Nice Blue en todos los formatos
| HEX | #107AB0 |
| RGB | rgb(16, 122, 176) |
| HSL | hsl(200, 83%, 38%) |
| OKLCH | oklch(55.2% 0.12 239.1) |
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 #107AB0 | 4.73:1 | AA | Lc -77.8 | Bueno para texto de cuerpo |
| Texto negro sobre #107AB0 | 4.43:1 | AA texto grande | Lc 31.7 | Elementos que no son texto, texto de marcador de posición |
| Texto #107AB0 sobre blanco | 4.73:1 | AA | Lc 72.4 | Texto de contenido, no para lecturas largas |
| Texto #107AB0 sobre negro | 4.43:1 | AA texto grande | Lc -29.3 | Solo divisores y decoración |
Tonos y tintes de Nice 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
#F1F6FA
oklch(97.1% 0.008 241.7)
-
Paso 100
100
#E1ECF3
oklch(93.7% 0.015 235.4)
-
Paso 200
200
#C8DCEB
oklch(88.4% 0.03 240.2)
-
Paso 300
300
#A1C6E0
oklch(80.8% 0.054 239)
-
Paso 400
400
#6CA8D1
oklch(70.6% 0.087 239.5)
-
Paso 500
500
#3F92C5
oklch(63.1% 0.111 239)
-
Paso 600
600 (este color)
#107AB0
oklch(55.2% 0.12 239.1)
-
Paso 700
700
#006898
oklch(49.2% 0.11 238.7)
-
Paso 800
800
#09557C
oklch(42.8% 0.093 239)
-
Paso 900
900
#154663
oklch(37.6% 0.071 239.1)
-
Paso 950
950
#0E293A
oklch(26.9% 0.046 239.3)
Exporta esta escala para Tailwind con la herramienta de colores de Tailwind
Nice 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) | #607BB2 | 0.063 |
| Deuteranopía (sin conos verdes) | #4B6DAF | 0.049 |
| Tritanopía (sin conos azules) | #00888D | 0.079 |
| Acromatopsia (sin color) | #737373 | 0.120 |
Usa Nice 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.