Colores HEX, RGB y HSL: guía de conversión y uso en diseño
Cualquier persona que trabaje con diseño digital o desarrollo web se topa tarde o temprano con tres formas distintas de representar el mismo color: HEX, RGB y HSL. Esta guía explica qué representa cada formato, cuándo conviene usar cada uno, y cómo pensar en ellos sin necesidad de memorizar fórmulas de conversión.
HEX: el formato más compacto
HEX (hexadecimal) representa un color con un código de 6 caracteres (ej: #6750A4), donde cada par de caracteres codifica la intensidad de un canal — rojo, verde y azul — en base 16, de 00 (ausencia) a FF (máxima intensidad). Es el formato más compacto y el más usado en CSS, diseño gráfico y comunicación rápida de un color específico, precisamente porque es corto y fácil de copiar y pegar.
Su desventaja es que no es intuitivo de leer o modificar mentalmente: mirando "#6750A4" no es obvio qué tan claro, oscuro o saturado es el color sin convertirlo mentalmente o usar una herramienta.
RGB: los mismos valores en base 10
RGB representa exactamente la misma información que HEX, pero con los tres valores de canal escritos en base 10 en vez de hexadecimal: rgb(103, 80, 164) en vez de #6750A4. Es más legible para quien no está acostumbrado a leer hexadecimal, y es el formato que suelen usar las herramientas de selección de color con sliders individuales para cada canal.
Se usa mucho en desarrollo cuando se necesita manipular canales de color por separado programáticamente (ej. aumentar el canal rojo en 20 unidades), algo más directo de hacer en RGB que en HEX.
HSL: pensar en color como lo hacen los diseñadores
HSL (Hue, Saturation, Lightness — Matiz, Saturación, Luminosidad) es fundamentalmente distinto: en vez de mezclar tres canales de luz, describe el color de la forma en que un humano piensa en él naturalmente. El matiz (0-360°) es la posición en la rueda de color (qué tan "rojo", "verde" o "azul" es en términos de tono puro); la saturación (0-100%) es qué tan intenso o apagado es el color; y la luminosidad (0-100%) es qué tan claro u oscuro es.
Esto hace que HSL sea el formato más práctico para crear variaciones sistemáticas de un color — por ejemplo, generar una paleta de 5 tonos del mismo azul simplemente variando la luminosidad, manteniendo matiz y saturación fijos. Es mucho más difícil lograr ese mismo resultado ajustando manualmente valores de HEX o RGB.
Cuál usar en cada situación
Usa HEX para comunicar o copiar un color específico rápidamente (documentación de marca, código CSS estático). Usa RGB cuando necesites manipular canales individuales programáticamente o trabajar con transparencia vía rgba(). Usa HSL cuando estés diseñando una paleta de colores o necesites crear variaciones sistemáticas (más claro, más saturado, complementario) de un color base — es el formato que mejor mapea a cómo pensamos el color de forma intuitiva.
Preguntas frecuentes
- ¿HEX, RGB y HSL representan colores distintos?
- No — son tres formas distintas de escribir exactamente el mismo color. Puedes convertir libremente entre ellos sin perder información.
- ¿Cuál es mejor para accesibilidad y contraste?
- Ninguno es intrínsecamente mejor; lo importante es calcular el ratio de contraste WCAG entre el color de texto y fondo, independientemente del formato en que estén escritos.
- ¿Por qué CSS moderno soporta los tres formatos?
- Porque cada uno es más conveniente según el contexto: HEX para brevedad, RGB para manipulación de canales y transparencia, HSL para ajustes intuitivos de tono y luminosidad.