Tonos de Azul: Códigos Hex, RGB y HSL

¿Qué cuenta como un tono de azul?

El azul es el color más usado en diseño de interfaces y de marca, y los 21 tonos siguientes cubren todo su rango de trabajo. La parte alta es atmosférica — Azul Bebé #89CFF0, LightBlue #ADD8E6, SkyBlue #87CEEB —, el centro es donde viven las interfaces, con DodgerBlue #1E90FF, CornflowerBlue #6495ED y RoyalBlue #4169E1, y el fondo llega casi al negro por Marino #000080, Azul Prusia #003153 y MidnightBlue #191970.

Conviene conocer dos grupos. Los azules de pigmento — Azul Cobalto #0047AB, Zafiro #0F52BA, Azul Prusia — son profundos y algo violáceos, y son lo que la gente suele entender por un azul rico. Los azules utilitarios — SteelBlue #4682B4, Denim #1560BD, Cerúleo #007BA7 — llevan gris mezclado, lo que los hace mucho más fáciles de acompañar con texto que el azul puro #0000FF, un color casi demasiado saturado para usarlo en grande.

Cómo usar estos códigos de color

1. Busca tu tono. La lista va de claro a oscuro, con una muestra real junto a cada nombre — recórrela como si fuera una carta de pinturas.
2. Haz clic en un código para copiarlo. Cada fila trae el valor hex, RGB y HSL de ese color. Un clic copia ese texto exacto a tu portapapeles.
3. Pégalo en tu proyecto. Lleva el hex a CSS, Figma, Photoshop o un documento. Al hacer clic en la muestra también se copia el hex, así no tienes que apuntar al texto pequeño.

Qué comunica el azul

El azul es la confianza por defecto. Bancos, aseguradoras, hospitales y redes sociales convergen en él porque se lee como estable, competente y poco emocional: la opción más segura cuando una marca no puede permitirse parecer arriesgada. Esa omnipresencia es también su debilidad: un logo azul rara vez destaca dentro de su categoría.

Es el único matiz que gusta de forma casi universal entre culturas, y el que retrocede visualmente: las montañas lejanas se ven azules, así que los fondos azules se perciben como profundidad y no como superficie. Los azules oscuros añaden autoridad y formalidad, razón por la que el marino lleva dos siglos siendo el color de los uniformes institucionales, mientras que los azules pálidos se leen como serenos, limpios y algo fríos.

Limitaciones honestas

Un código hex es exacto, pero el color que ves no lo es. El mismo #FF0000 se ve distinto en un móvil OLED, en un monitor de oficina barato y en papel impreso, porque cada dispositivo tiene su propia gama y calibración. Usa estos valores como un punto de partida preciso para pantalla, y revisa siempre una prueba física antes de mandar un color a imprenta: CMYK no puede reproducir todos los tonos de esta lista.

Los nombres de color mezclan dos cosas. Los marcados con CSS son colores con nombre oficiales: el nombre funciona tal cual en una hoja de estilos y todos los navegadores lo resuelven exactamente a ese hex. El resto son nombres convencionales — Burdeos, Salvia, Espresso — que no pertenecen a ningún estándar. Sus valores siguen la convención más citada, pero otra carta puede colocarlos un poco más claros u oscuros, así que cita el hex y no el nombre cuando el valor exacto importe.

¿Por qué es gratis?

FreeToGenerate.com mantiene todas sus herramientas realmente gratis. Esta página es una lista estática de valores de color que se muestra en tu navegador: nada que instalar, sin cuenta y sin versión premium que esconda la mitad de la paleta. Copia todos los códigos que necesites, las veces que quieras.

Otras familias de color

rojonaranjaamarilloverdecianmoradorosamarróngrisnegroblancoTodas las familias