HSL

Significa "Hue, Saturation, Lightness".

HSL é um modelo de cores que define as cores como conjuntos de três atributos, de forma semelhante ao modelo de cores RGB. Ele começa especificando um ponto no círculo cromático e, em seguida, ajusta a saturação e a luminosidade para criar a cor final. Designers gráficos e designers de sites costumam usá-lo porque ele oferece uma maneira mais fácil de fazer pequenos ajustes de cor sem precisar usar um seletor de cores.

Em vez de representar uma cor como uma mistura de outras cores, como no modelo de cores RGB, o HSL usa os três atributos de matiz, saturação e luminosidade para definir uma cor:

• Matiz representa a posição angular no círculo cromático como um número entre 0 e 359º. O vermelho puro fica no topo do círculo, representado por um valor angular de 0º; o ciano fica na extremidade oposta, em 180º.
• Saturação representa a intensidade da cor como uma porcentagem entre 0 e 100%. Uma saturação de 0% resulta em cinza.
• Luminosidade representa a luminosidade da cor como uma porcentagem entre 0 e 100%. Uma luminosidade de 0% é preto, uma luminosidade de 50% é a própria cor e uma luminosidade de 100% é branco.

O modelo de cores HSL pode produzir a mesma variedade de cores que o RGB, apenas com uma formatação diferente. Por exemplo, uma cor ciano-clara com os valores RGB R:166, G:242, B:242 ou o valor (hexadecimal #A6F2F2) é igual a uma cor com matiz de 180º, saturação de 75% e luminosidade de 80%. Arquivos de imagem digitais ainda salvam as informações de cor como valores RGB, mesmo quando um editor de imagens usa HSL.

HSL é considerado um método mais intuitivo para definir cores como um conjunto de números. Designers de sites costumam especificar cores em CSS usando HSL em vez de RGB para simplificar pequenos ajustes. Por exemplo, se um designer de sites especificou uma cor usando o código CSS hsl(180, 75%, 80%), ele pode torná-la mais escura reduzindo o número de luminosidade. Se tentasse fazer o mesmo ajuste usando valores RGB, precisaria alterar os três valores em quantidades diferentes.

NOTE: O modelo de cores HSL é semelhante ao modelo HSB. Embora o HSB use o mesmo cálculo para a matiz, ele usa brilho em vez de luminosidade — em que um valor de 100 representa a cor total, e não o branco —, o que também afeta o cálculo da saturação.