HEX, RGB y HSL: qué son y cuándo usar cada formato de color

1. Qué es un formato de color y por qué existen varios

Un formato de color es simplemente una manera de expresar un color concreto mediante números o letras que un navegador, programa de diseño o lenguaje de programación pueda interpretar. El color naranja, por ejemplo, puede escribirse como #FF6600, como rgb(255, 102, 0) o como hsl(24, 100%, 50%). Los tres producen exactamente el mismo resultado visual.

Existen varios formatos porque cada uno surgió para cubrir una necesidad distinta: algunos son más compactos, otros son más fáciles de leer para una persona, y otros resultan más prácticos cuando necesitas ajustar un color desde código sin cambiar la herramienta de diseño.

Conocer las diferencias te permite elegir el formato que mejor encaje con lo que estás haciendo en cada momento, y también entender mejor el código de otros cuando lo necesitas leer o modificar.

2. El formato HEX: compacto y universal

HEX viene de hexadecimal, el sistema numérico en base 16 que usa los dígitos del 0 al 9 y las letras de la A a la F. Un código HEX de color tiene siempre el mismo aspecto: una almohadilla seguida de seis caracteres, como #3A86FF.

Esos seis caracteres se dividen en tres pares: los dos primeros representan la cantidad de rojo, los dos del medio la de verde y los dos últimos la de azul. Cada par puede tener valores de 00 (mínimo, ninguna intensidad) a FF (máximo, intensidad completa). Así, #FF0000 es rojo puro, #00FF00 es verde puro y #0000FF es azul puro.

HEX es el formato más usado en CSS y en herramientas de diseño porque es muy compacto y fácil de copiar y pegar. Su desventaja es que no resulta intuitivo leerlo directamente: a simple vista, #3A86FF no te dice si el color es cálido o frío, oscuro o claro, sin pararte a descifrarlo.

También existe la versión abreviada de tres caracteres. Cuando los dos dígitos de cada par son iguales, se puede escribir solo uno: #FF6600 se convierte en #F60. No todos los colores admiten esta abreviación, solo los que cumplen esa condición de dígitos repetidos.

Cuándo usarlo: HEX es la opción más habitual para definir colores fijos en una hoja de estilos CSS, en variables de diseño o en sistemas de marca donde necesitas copiar el código exacto con rapidez.

3. El formato RGB: rojo, verde y azul en valores decimales

RGB son las iniciales de Red, Green y Blue. Este formato expresa el mismo concepto que HEX —la mezcla de rojo, verde y azul— pero en lugar de usar números hexadecimales usa tres valores decimales del 0 al 255, separados por comas dentro de una función: rgb(58, 134, 255).

Para muchas personas RGB resulta algo más legible que HEX porque los números decimales son más familiares. Ver rgb(255, 0, 0) hace evidente que el rojo está al máximo y los demás canales a cero, lo que se traduce directamente en rojo puro. En HEX esa misma lectura requiere conocer el sistema hexadecimal.

RGB también permite añadir un cuarto valor para controlar la transparencia, lo que da lugar al formato rgba(58, 134, 255, 0.5). El valor alfa va de 0 (completamente transparente) a 1 (totalmente opaco). Esto es muy útil para capas, superposiciones y efectos de fondo en CSS.

Cuándo usarlo: RGB es especialmente práctico cuando necesitas transparencias con rgba, cuando trabajas con JavaScript y necesitas manipular canales de color de forma programática, o cuando compartes valores de color con alguien que prefiere el sistema decimal.

4. El formato HSL: matiz, saturación y luminosidad

HSL es el formato más próximo a cómo los seres humanos percibimos y describimos el color de forma natural. Sus tres valores son matiz (Hue), saturación (Saturation) y luminosidad (Lightness), y se escribe así: hsl(214, 100%, 62%).

El matiz es el color en sí: un ángulo en el círculo cromático que va de 0 a 360 grados. El 0 y el 360 son el rojo, el 120 es el verde y el 240 es el azul. Los valores intermedios cubren todos los colores del espectro visible.

La saturación indica la intensidad o viveza del color, expresada en porcentaje. Con 100% obtienes el color más vivo posible; con 0% el color se convierte en un tono de gris, independientemente del matiz.

La luminosidad controla el brillo del color, también en porcentaje. Con 50% obtienes el color base, con 100% blanco puro y con 0% negro puro.

La gran ventaja de HSL es que resulta muy fácil hacer variaciones coherentes de un mismo color. Si tienes hsl(214, 80%, 55%) y quieres una versión más clara, solo tienes que subir el tercer valor: hsl(214, 80%, 75%). Con HEX o RGB ese ajuste requiere calcular o probar valores en varios canales a la vez.

Al igual que RGB, HSL también admite un canal alfa: hsla(214, 100%, 62%, 0.7) para controlar la transparencia.

Cuándo usarlo: HSL es ideal cuando necesitas construir paletas coherentes, crear variantes de un color (versiones más claras, más oscuras, más saturadas), o cuando defines los colores como variables CSS y quieres que sean fáciles de ajustar y mantener a lo largo del tiempo.

5. Comparativa rápida: HEX vs RGB vs HSL

Los tres formatos representan el mismo color. La diferencia está en para qué encaja mejor cada uno:

• HEX es el más compacto y el más extendido. Lo encontrarás en casi todas las herramientas de diseño y es el estándar de facto para compartir o anotar un color concreto. Su punto débil es que no es intuitivo para ajustar valores manualmente.
• RGB es más legible en decimal y resulta muy práctico cuando necesitas transparencias con rgba o cuando trabajas con JavaScript para manipular colores dinámicamente.
• HSL es el más fácil de entender para una persona y el más cómodo para crear variaciones. Es especialmente útil al trabajar con variables CSS o al construir sistemas de diseño escalables.

En la práctica, muchos proyectos mezclan los tres según el contexto: HEX para definir los colores base en la guía de marca, HSL para construir la paleta y sus variantes en CSS, y RGB cuando se necesita transparencia o lógica programática.

6. El mismo color en los tres formatos: un ejemplo

Para ver la equivalencia en la práctica, este es el mismo azul corporativo expresado en cada formato:

• HEX: #3A86FF
• RGB: rgb(58, 134, 255)
• HSL: hsl(214, 100%, 61%)

Los tres valores son equivalentes y producen exactamente el mismo color en cualquier navegador moderno. La diferencia es solo la forma en que ese color está escrito.

Puedes comprobarlo tú mismo con el Convertidor de códigos de Color;Code: introduce cualquier valor en HEX y obtienes al instante su equivalente en RGB y HSL, o al revés. No hace falta hacer ningún cálculo a mano.

7. Otros formatos que pueden aparecerte: HSV y OKLCH

Además de HEX, RGB y HSL, puede que en algunas herramientas o recursos encuentres otros formatos. Dos de los más habituales son HSV y OKLCH.

HSV (matiz, saturación y valor) es similar a HSL pero en lugar de luminosidad usa un concepto de "valor" o brillo que se comporta de forma distinta. Photoshop y otros programas de edición lo usan internamente, aunque en CSS no está disponible de forma nativa.

OKLCH es un formato más reciente que los navegadores modernos ya soportan. Está diseñado para que los cambios de luminosidad sean perceptualmente uniformes, es decir, que subir un valor numérico de luminosidad siempre se traduzca en un cambio visual similar, independientemente del matiz. Esto lo hace muy preciso para sistemas de diseño avanzados, aunque todavía no está tan extendido como los tres formatos clásicos.

Para el trabajo habitual de diseño web, HEX, RGB y HSL cubren la gran mayoría de situaciones. OKLCH es una opción a explorar cuando quieras mayor precisión en la percepción del color.

Qué hacer ahora

Si quieres poner en práctica lo que has visto en esta guía, puedes empezar por estos pasos:

• Elige un color que uses habitualmente en tus proyectos y conviértelo a los tres formatos con el Convertidor de Color;Code para ver cómo se expresa en cada uno.
• Si estás construyendo una paleta para una web, prueba a definirla en HSL usando el Generador de paletas y experimenta con los valores de saturación y luminosidad para crear variantes coherentes.
• Si tienes colores definidos en HEX en tu proyecto actual, considera si algunas de las variables más utilizadas ganarían legibilidad expresadas en HSL, especialmente si los ajustas con frecuencia.

Cuando dominas los tres formatos y sabes cuándo usar cada uno, trabajar con el color en CSS se vuelve mucho más rápido y predecible. Puedes seguir aprendiendo en otras guías de Color;Code o explorar las herramientas para seguir practicando.