Blog · Web y diseño
HEX, RGB, HSL: ¿qué diferencia hay y qué formato de color usar?
Has visto un color bonito en un diseño de Canva, una maqueta o una web, y quieres reutilizarlo en otro sitio. Pero el campo de color te pide un código que empieza por #, o tres números entre 0 y 255, o un porcentaje de «luminosidad»... En realidad son tres formas distintas de escribir exactamente el mismo color. Esto es lo que representa cada una, y cuál usar según lo que quieras hacer.
HEX, RGB, HSL: tres formas de escribir el mismo color
En una pantalla, cualquier color se crea mezclando luz roja, verde y azul (el famoso RGB, de Red, Green, Blue). Esa es la base técnica común. HEX, RGB y HSL no son más que tres maneras distintas de expresar esa misma mezcla, cada una pensada para un uso concreto.
- HEX (hexadecimal), como
#2563EB: el formato más usado en CSS y en las herramientas web (Canva, Figma, WordPress...). Compacto, fácil de copiar y pegar, pero poco legible para un humano: nadie «ve» a simple vista qué color da#2563EB. - RGB, como
rgb(37, 99, 235): la misma información que el HEX, pero escrita en base 10, como tres cantidades de rojo, verde y azul que van cada una de 0 a 255. Está más cerca de cómo la pantalla muestra realmente el color, pero sigue siendo poco intuitivo para ajustarlo a mano: aumentar el rojo Y disminuir el azul para «aclarar» un color sin desvirtuarlo no es nada evidente. - HSL, como
hsl(221.2, 83.2%, 53.3%): el mismo color, pero descompuesto en tres conceptos mucho más claros: el tono (Hue, un ángulo en el círculo cromático, del rojo al violeta), la saturación (Saturation, cuán vivo o grisáceo es el color) y la luminosidad (Lightness, cuán claro u oscuro es). Es el formato más práctico cuando se quiere razonar sobre un color en lugar de adivinarlo por ensayo y error.
Un ejemplo concreto: convertir #2563EB a RGB y luego a HSL
Tomemos un azul muy habitual en la web (de hecho, es un azul de la paleta de Tailwind CSS): #2563EB. El código hexadecimal se lee por pares de dos caracteres, un par por canal (rojo, verde, azul), cada uno representando un valor en base 16:
25en hexadecimal = 37 en base 10 (rojo)63en hexadecimal = 99 en base 10 (verde)EBen hexadecimal = 235 en base 10 (azul)
Lo que da rgb(37, 99, 235): muy poco rojo, algo más de verde y mucho azul, coherente con un azul intenso. Convirtiendo después ese mismo trío RGB a HSL, se obtiene hsl(221.2, 83.2%, 53.3%): un tono de 221° (en la zona de los azules del círculo cromático), una saturación alta del 83 % (un color vivo, no lavado) y una luminosidad del 53 % (ni demasiado claro ni demasiado oscuro, un azul bien equilibrado).
Por qué HSL suele ser más práctico para ajustar un color
La utilidad de HSL aparece en cuanto se quiere derivar un color en varios matices, por ejemplo para un botón y sus estados (normal, hover, activo), o para una guía de estilo con un color principal y sus variantes más claras o más oscuras.
Partiendo del mismo azul hsl(221.2, 83.2%, 53.3%) y modificando solo la luminosidad, con el tono y la saturación intactos, se obtiene una familia de colores perfectamente coherente:
- Luminosidad 70 %:
hsl(221.2, 83.2%, 70%)→#739BF2(versión clara, para un fondo o un estado deshabilitado) - Luminosidad 53,3 %:
hsl(221.2, 83.2%, 53.3%)→#2563EB(el color base) - Luminosidad 35 %:
hsl(221.2, 83.2%, 35%)→#0F3EA4(versión oscura, para un estado hover o activo)
Intenta hacer lo mismo directamente en RGB: habría que recalcular a mano los tres valores de rojo, verde y azul cada vez, sin garantía de conservar exactamente el mismo tono. Con HSL, un solo control (la luminosidad) basta para obtener matices armoniosos, sin «desviar» accidentalmente el color hacia el violeta o el turquesa.
Encontrar el código exacto de un color en una imagen o maqueta
Una situación frecuente: tienes una imagen, una captura de pantalla o una maqueta, y quieres recuperar el código exacto de un color presente en ella para usarlo en otro sitio (una web, un documento, una presentación). El método más fiable sigue siendo usar un cuentagotas de color (disponible en la mayoría de programas de retoque, o mediante el selector nativo del sistema), que da directamente el código HEX o RGB del píxel elegido. Después solo queda convertirlo al formato que necesites según la herramienta de destino: HEX para CSS, RGB para un programa de edición, HSL para ajustar el tono sin tocarlo.
¿Qué formato elegir según tu uso?
En resumen: usa HEX cuando una herramienta te lo pida explícitamente (hojas de estilo CSS, la mayoría de interfaces web) o para compartir un código corto y sin ambigüedad. Usa RGB cuando trabajes con cantidades de luz en bruto, por ejemplo en ciertos programas de edición de vídeo o de retoque fotográfico. Usa HSL en cuanto necesites ajustar un color (aclararlo, oscurecerlo, desaturarlo) sin perder su tono original, típicamente para construir una paleta coherente en torno a un color de marca.
Lo esencial
- HEX, RGB y HSL describen exactamente el mismo color, en tres formas distintas.
- HEX (
#2563EB) es el formato estándar de la web y el CSS; RGB (rgb(37, 99, 235)) expresa los mismos valores en cantidades de rojo/verde/azul de 0 a 255. - HSL (
hsl(221.2, 83.2%, 53.3%)) separa tono, saturación y luminosidad: es el formato más práctico para aclarar, oscurecer o derivar un color sin cambiar su tono. - Para encontrar el código exacto de un color en una imagen, basta un cuentagotas; un conversor online permite después pasar al instante entre HEX, RGB y HSL.