Guía de color

Color Azul

#3B82F6

Códigos del color azul

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
OKLCH
oklch(81% 0.10 280)

Qué significa el azul

El azul transmite confianza, seguridad y profesionalidad. Es el color más usado en identidades corporativas y apps financieras: calma y genera credibilidad.

Cómo usarlo en diseño

Ideal para acciones primarias, enlaces y navegación. Es el color base más seguro para productos SaaS y de productividad.

Combinaciones de color con el azul

Armonías calculadas con teoría del color para el matiz base 217°.

Complementario

Contraste máximo: #3B82F6 + #F6AF3C

Abrir en el editor

Análogo

Armonía a ±30°: #3CE0F6 · #3B82F6 · #523CF6

Triádico

Separación de 120°: #3B82F6 · #F63C83 · #83F63C

Tonos del color azul (escala 50–900)

Escala estilo Tailwind generada a partir de #3B82F6.

50 #0D2141
100 #0E2448
200 #112F60
300 #14428B
400 #145ACB
500 #3C83F6
600 #91B7F4
700 #CDDDF8
800 #F5F8FD
900 #FFFFFF

Colores que combinan con el azul

Preguntas frecuentes sobre el color azul

¿Cuál es el código HEX del color azul?

Un valor HEX muy usado para el color azul es #3B82F6, equivalente a rgb(59, 130, 246). Según el tono que busques, puedes ajustar saturación y luminosidad manteniendo el mismo matiz (217°).

¿Qué colores combinan con el azul?

El azul combina muy bien con white, gray, yellow, coral. Su color complementario es #F6AF3C, y una combinación triádica clásica añade #F63C83 y #83F63C.

¿Es el azul accesible para textos y fondos?

Depende del ratio de contraste frente al otro color. Usa el verificador de contraste de NanoPalettes para comprobar el cumplimiento WCAG AA (4.5:1) y AAA (7:1) antes de usar el azul en textos o elementos de interfaz.

Crea tu propia paleta en azul

Genera combinaciones armónicas a partir de #3B82F6 en segundos.

Abrir el generador de paletas