HSL

Significa «Hue, Saturation, Lightness».

HSL es un modelo de color que define los colores como conjuntos de tres atributos, de forma similar al modelo de color RGB. Primero especifica un punto en la rueda de colores y luego ajusta la saturación y la luminosidad para crear el color final. Los diseñadores gráficos y de sitios web suelen usarlo porque ofrece una forma más sencilla de hacer pequeños ajustes de color sin tener que usar un selector de color.

En lugar de representar un color como una mezcla de otros colores, como en el modelo de color RGB, HSL utiliza los tres atributos de tono, saturación y luminosidad para definir un color:

• Tono representa la posición angular en la rueda de colores como un número entre 0 y 359º. El rojo puro se encuentra en la parte superior de la rueda, representado por un valor angular de 0º; el cian está en el extremo opuesto, a 180º.
• Saturación representa la intensidad del color como un porcentaje entre 0 y 100%. Una saturación del 0% produce un color gris.
• Luminosidad representa la luminosidad del color como un porcentaje entre 0 y 100%. Una luminosidad del 0% es negro, una luminosidad del 50% es el color mismo y una luminosidad del 100% es blanco.

El modelo de color HSL puede producir la misma gama de colores que RGB, solo que con un formato diferente. Por ejemplo, un color cian claro con los valores RGB R:166, G:242, B:242 o el valor (hexadecimal #A6F2F2) es igual que uno con un tono de 180º, una saturación del 75% y una luminosidad del 80%. Los archivos de imágenes digitales siguen guardando la información de color como valores RGB, incluso cuando un editor de imágenes utiliza HSL.

HSL se considera un método más intuitivo para definir colores como un conjunto de números. Los diseñadores web suelen especificar colores en CSS mediante HSL en lugar de RGB para simplificar los pequeños ajustes. Por ejemplo, si un diseñador web ha especificado un color mediante el código CSS hsl(180, 75%, 80%), puede oscurecerlo reduciendo el número de luminosidad. Si intentara hacer el mismo ajuste usando valores RGB, tendría que cambiar los tres valores en cantidades diferentes.

NOTE: El modelo de color HSL es similar al modelo HSB. Aunque HSB utiliza el mismo cálculo para el tono, usa el brillo en lugar de la luminosidad —donde un valor de 100 representa el color completo en lugar del blanco—, lo que también afecta al cálculo de la saturación.