HEX vs RGB vs HSL

Un espacio de color, tres notaciones

sRGB es el espacio de color por defecto de la web: el espectro que muestra una pantalla típica, definido de modo que cada navegador, desde un teléfono hasta un monitor de estudio calibrado, entienda lo mismo por los mismos números. Cada canal va de 0 a 255, razón por la que 16,777,216 colores (256 al cubo) solían citarse como el tamaño de la paleta web. Una notación es solo una interfaz de usuario para esos tres números — y para el alfa, un cuarto número que controla la opacidad.

Como las tres notaciones se resuelven en los mismos canales, la conversión entre ellas es aritmética exacta, nunca aproximación. Una herramienta que informa de #FF6600 como hsl(24, 100%, 50%) no está dando una opinión; está haciendo la misma álgebra que define la especificación de CSS. Por eso mismo, el formato en que escribas no tiene ningún efecto sobre el renderizado — va puramente de la persona que edita la línea.

HEX: compacto, portable, opaco

Un código HEX de seis dígitos son tres bytes en hexadecimal: FF es 255, 66 es 102, 00 es cero. La forma se remonta al HTML más temprano y sobrevive porque es imbatible como identificador — corto, inequívoco, sin comillas. Si los dos dígitos de cada canal coinciden (FF, 66, 00), CSS también acepta tres dígitos: #F60. Desde CSS Color 4, añadir dos dígitos más suma el alfa: #FF6600AA es el mismo naranja con una opacidad de aproximadamente el 67%.

La debilidad de HEX es la composición. Mira #FF6600 y pregúntate cómo se verá un 15% más oscuro, o cuál es su complementario, y la respuesta exige descodificar hexadecimal en tu cabeza. Oscurecer #FF6600 a ojo produjo toda una generación de #E65C00 adivinados. HEX es el formato para almacenar un color, no el formato para razonar sobre uno — exactamente el hueco que HSL se inventó para llenar.

RGB: el modelo aditivo, dicho sin rodeos

Las pantallas no reflejan pintura; emiten luz, y RGB es aditivo: el negro es todos los canales apagados, el blanco es todos encendidos, y cada color es una mezcla. rgb(255, 102, 0) lo dice sin rodeos — rojo a tope, algo de verde, nada de azul. Esta es la notación que coincide con la física, lo que la convierte en la elección natural cuando depuras un valor renderizado, lees datos de imagen o mezclas luz de verdad (suma dos colores RGB y obtienes un resultado más brillante, lo contrario de mezclar pintura).

Su forma con alfa, rgba(), es anterior a la variante HEX de 8 dígitos. CSS Color 4 también modernizó la sintaxis: rgb(255 102 0 / 0.67) — espacios y una barra en lugar de comas — es equivalente, y la a ahora es opcional porque rgb() acepta cuatro valores. Los navegadores soportan ambas escrituras desde aproximadamente 2023.

HSL: la rueda legible para las personas

HSL reescribe los mismos canales como tono (un ángulo en la rueda de color, de 0 a 360: rojo en 0, verde en 120, azul en 240), saturación (0% es gris, 100% es plenamente vivo) y luminosidad (0% negro, 100% blanco). Su superpoder son las relaciones legibles. ¿Necesitas un estado hover un 10% más claro? hsl(24, 100%, 50%) pasa a hsl(24, 100%, 60%) — un número movido, la intención visible en el diff. ¿Necesitas una escala de marca de cinco pasos? Fija tono y saturación, mueve la luminosidad. En HEX, cada una de esas ediciones es un recálculo.

La advertencia honesta: la luminosidad de HSL no es perceptual. hsl(60, 100%, 50%) (amarillo) y hsl(240, 100%, 50%) (azul) reclaman ambas un 50% de luminosidad y, sin embargo, el amarillo arde mientras el azul se lee casi negro. Las escalas construidas sobre la luminosidad de HSL se ven, por tanto, desiguales al ojo. CSS Color 4 añadió oklch() para arreglar exactamente esto — una notación cilíndrica cuya luminosidad coincide con la percepción humana, de modo que los pasos iguales se ven iguales. Para escalas uniformes, oklch es la respuesta moderna; las herramientas de color de este sitio calculan las rampas en OKLab, el espacio perceptual que hay detrás.

El alfa y la función color() moderna

Cada notación anterior lleva el alfa de la misma manera: como una fracción de opacidad de 0 a 1. Las escrituras se diferencian — #RRGGBBAA lo mete en hexadecimal (AA es 170, unas dos terceras partes de opacidad), rgba() y hsla() toman una fracción separada por comas, y la sintaxis moderna separada por espacios lo escribe tras una barra. Todas producen resultados idénticos; la forma HEX de 8 dígitos es simplemente la más compacta y la que más exportan las herramientas de diseño.

color() es el cambio mayor. Nombra el espacio de color explícitamente — color(srgb r g b) es el espacio de siempre escrito tal cual, mientras que color(display-p3 ...) se dirige al espacio más amplio de las pantallas modernas, y color(oklch ...) expone el modelo perceptual. sRGB sigue siendo el valor seguro por defecto — el contenido creado en él se renderiza de forma previsible en todas partes —, mientras que los colores display-p3 solo aterrizan donde la sintaxis está soportada, prácticamente todos los navegadores evergreen desde 2023.

• #RRGGBBAA — alfa en hexadecimal, AA = 170 ≈ 67% de opacidad.
• rgba(255, 102, 0, 0.67) — sintaxis heredada con comas, todavía universal.
• rgb(255 102 0 / 0.67) — sintaxis de CSS Color 4; la a ahora es opcional.
• color(display-p3 1 0.4 0 / 0.67) — color de espacio más amplio, con el espacio nombrado de entrada.

Contraste: la comprobación que prima sobre el gusto

Ninguna elección de notación importa si las personas no pueden leer el texto. El contraste WCAG exige una proporción de al menos 4.5:1 entre el texto y su fondo para texto normal en el nivel AA, 3:1 para texto grande (aproximadamente 24 px regular o 19 px negrita en adelante) y 7:1 para el nivel AAA, más estricto. La proporción se calcula a partir de la luminancia relativa, que es una propiedad del color en sí — la notación en que lo escribas es irrelevante, que es una manera más de que todos estos formatos son el mismo color.

El flujo práctico es mecánico: elige colores como quieras y verifica los pares antes de publicar. El texto del cuerpo sobre su fondo, el texto placeholder sobre los inputs, el texto blanco sobre el color de marca — cada par necesita su número. Un comprobador de contraste lo informa al instante — más barato que retocar una paleta inaccesible con la fecha de entrega encima.