Acerca del color HSL

El color HSL es un modelo de color que representa los colores mediante tono, saturación y luminosidad. A diferencia de RGB, que especifica directamente la intensidad de la luz roja, verde y azul, HSL separa el tono, la viveza y el brillo, por lo que resulta útil para ajustar colores y trabajar con CSS.

Por ejemplo, los colores principales como el rojo se pueden representar así.

Para incluir transparencia, añada un valor alfa. Por ejemplo, el rojo semitransparente se puede representar como hsl(0deg 100% 50% / 0.5).

Como entrada, se puede usar la notación separada por espacios hsl(0deg 100% 50%), así como la notación tradicional separada por comas hsl(0deg, 100%, 50%).

Tratamiento del tono, la saturación y la luminosidad

El tono se trata como un ángulo; los valores mayores que 360deg o negativos se normalizan al rango de 0deg a 360deg. Por ejemplo, hsl(360deg 100% 50%) se trata como el mismo color que hsl(0deg 100% 50%), y hsl(-120deg 100% 50%) como el mismo color que hsl(240deg 100% 50%).

La saturación y la luminosidad se tratan en el rango de 0% a 100%. Si la saturación es 0%, el color se vuelve un gris acromático sin importar el tono. Si la luminosidad es 0%, el color es negro; si es 100%, es blanco.

Diferencia entre HSL y RGB

RGB especifica directamente los componentes rojo, verde y azul, por lo que está cerca de la visualización en pantalla y los datos de imagen. HSL separa tono, saturación y luminosidad, lo que facilita operaciones como “hacerlo más claro manteniendo el mismo tono” o “reducir solo la saturación”.

Sin embargo, HSL no es un espacio de color perceptualmente uniforme. Cuando se desea manejar mejor el brillo visual o las diferencias de color, se pueden usar espacios de color como Lab, LCH, Oklab u Oklch.