HEX vs RGB vs HSL: ¿qué formato de color usar?
#FF5733, rgb(255, 87, 51), hsl(11, 100 %, 60 %): tres formas de decir el mismo naranja. Los tres formatos describen colores para pantallas y los tres son válidos en CSS, pero cada uno piensa el color de una manera distinta y brilla en situaciones distintas.
HEX es el compacto favorito de diseñadores y desarrolladores; RGB es el descriptivo que refleja cómo emite luz la pantalla; HSL es el intuitivo que piensa como un humano: tono, saturación y luminosidad.
Esta guía explica qué representa cada formato, cuándo usarlo y cómo convertir entre ellos sin volverte loco.
HEX: el compacto universal
El formato hexadecimal escribe cada canal (rojo, verde, azul) con dos dígitos en base 16: #FF5733 significa rojo al máximo (FF = 255), verde a 87 (57 en hex) y azul a 51 (33 en hex). Seis caracteres que describen 16,7 millones de colores posibles.
Su ventaja es la compacidad y la convención: es el formato que verás en el 90 % del CSS, en las guías de marca y en los selectores de color. Copiar y pegar un HEX es el gesto más rápido del flujo diseñador-desarrollador.
Su debilidad es la legibilidad humana: nadie «lee» #FF5733 y visualiza el naranja, ni calcula mentalmente un tono más oscuro. Para ajustes (aclarar, saturar, crear variantes) es el formato más torpe de los tres.
RGB: el lenguaje de la pantalla
RGB describe el color como la pantalla lo produce: cantidades de luz roja, verde y azul de 0 a 255. rgb(255, 87, 51) es explícito y directo, y su variante rgba() añade el canal alfa para la transparencia: rgba(255, 87, 51, 0.5) es el mismo naranja al 50 % de opacidad.
Es el formato natural cuando trabajas con opacidades o manipulas color por código (canvas, WebGL, procesamiento de imagen), porque los valores numéricos se operan con facilidad. También es el que «piensan» las APIs gráficas.
Comparte con HEX la poca intuición para ajustes creativos: subir el azul de 51 a 120 no te dice a simple vista si el resultado será más frío o más apagado. Para eso existe HSL.
HSL: el que piensa como tú
HSL separa el color en tres dimensiones intuitivas: H (hue, tono: el ángulo en la rueda de color, 0–360°), S (saturación: 0 % gris, 100 % color puro) y L (lightness, luminosidad: 0 % negro, 100 % blanco). hsl(11, 100 %, 60 %) se lee como «un naranja-rojizo muy saturado y medio claro».
Su superpoder es la manipulación: ¿una versión más oscura para el hover? Baja la L. ¿Más apagada para un fondo? Baja la S. ¿El complementario? Suma 180 al H. Crear paletas y variantes sistemáticas en HSL es trivial; en HEX es un suplicio.
Su rareza es cultural: menos herramientas lo muestran por defecto y algunos desarrolladores lo evitan por costumbre, aunque todos los navegadores modernos lo soportan en CSS sin problemas.
Comparativa y ¿cuál usar?
En compacidad y convención, HEX gana: es el estándar de facto en guías de estilo y CSS. En transparencia y trabajo por código, RGB(A) gana. En ajustes creativos y sistemas de diseño, HSL gana por goleada.
La buena noticia: son interconvertibles sin pérdida (describen el mismo espacio de color sRGB), así que no hay que casarse con uno. El flujo profesional típico: define la marca en HEX, construye variantes y paletas en HSL, y usa RGBA cuando necesites opacidad.
Para convertir entre ellos al instante, las herramientas gratuitas de HEX a RGB (/herramientas-diseno/hex-a-rgb/) y de RGB a HEX (/herramientas-diseno/rgb-a-hex/) resuelven la traducción en un clic, sin cálculos mentales en base 16. Úsalas cada vez que un diseño te llegue en un formato y tu código pida otro.
Errores comunes con el color en web
Elegir variantes «a ojo» en HEX produce paletas inconsistentes: los aclarados se ven apagados o los oscurecidos, sucios. Genera las variantes en HSL moviendo solo la luminosidad y la armonía será automática.
Otro clásico: usar opacidad (RGBA) sobre fondos distintos y sorprenderse de que el «mismo» color se vea diferente. Un semitransparente no es un color fijo: depende de lo que haya debajo. Para colores de marca sólidos, evita la transparencia.
Y el eterno: fiarse del color en una sola pantalla. Los paneles varían; comprueba los colores de marca en móvil y escritorio, y recuerda que el modo oscuro del sistema puede alterar la percepción de tus tonos.
Herramientas gratuitas mencionadas
Preguntas frecuentes
¿HEX y RGB representan los mismos colores?
Sí, ambos describen el mismo espacio de color (sRGB) con la misma precisión: #FF5733 y rgb(255, 87, 51) son exactamente el mismo naranja. La diferencia es solo notación. La conversión entre ellos es exacta y sin pérdida.
¿Qué es el canal alfa en RGBA?
Es el cuarto valor (de 0 a 1) que controla la opacidad: 1 es totalmente opaco y 0 totalmente transparente. rgba(255, 87, 51, 0.5) muestra el naranja al 50 %, dejando ver lo que hay debajo. HEX también tiene versión con alfa de 8 dígitos (#FF573380).
¿Por qué HSL es mejor para crear paletas?
Porque separa las decisiones: el tono (H) elige la familia del color, la saturación (S) su intensidad y la luminosidad (L) su claridad. Ajustar una sola dimensión genera variantes coherentes (más oscuro, más apagado, complementario) de forma predecible, algo imposible de hacer a ojo en HEX.
En resumen
HEX para la convención y la marca, RGB cuando necesites operar con valores o transparencias, HSL cuando diseñes paletas y variantes. No son rivales: son tres notaciones del mismo color, y el profesional los alterna según la tarea. Aprende a convertir entre ellos, genera tus variantes en HSL y tu sistema de color dejará de ser una colección de códigos para convertirse en un diseño.