Sobre a cor HSL

A cor HSL é um modelo de cor que representa cores com matiz, saturação e luminosidade. Diferente de RGB, que especifica diretamente a intensidade da luz vermelha, verde e azul, HSL separa tom, vivacidade e brilho, sendo útil para ajuste de cores e trabalho com CSS.

Por exemplo, cores principais como o vermelho podem ser representadas assim.

Para incluir transparência, adicione um valor alfa. Por exemplo, o vermelho semitransparente pode ser representado como hsl(0deg 100% 50% / 0.5).

Como entrada, é possível usar a notação separada por espaços hsl(0deg 100% 50%), bem como a notação tradicional separada por vírgulas hsl(0deg, 100%, 50%).

Tratamento do matiz, da saturação e da luminosidade

O matiz é tratado como um ângulo; valores maiores que 360deg ou negativos são normalizados para o intervalo de 0deg a 360deg. Por exemplo, hsl(360deg 100% 50%) é tratado como a mesma cor que hsl(0deg 100% 50%), e hsl(-120deg 100% 50%) como a mesma cor que hsl(240deg 100% 50%).

Saturação e luminosidade são tratadas no intervalo de 0% a 100%. Quando a saturação é 0%, a cor se torna um cinza acromático independentemente do matiz. Quando a luminosidade é 0%, a cor é preta; quando é 100%, é branca.

Diferença entre HSL e RGB

RGB especifica diretamente os componentes vermelho, verde e azul, ficando próximo da exibição em tela e dos dados de imagem. HSL separa matiz, saturação e luminosidade, facilitando operações como “clarear mantendo o mesmo matiz” ou “reduzir apenas a saturação”.

No entanto, HSL não é um espaço de cor perceptualmente uniforme. Quando se deseja tratar melhor o brilho visual ou diferenças de cor, podem ser usados espaços de cor como Lab, LCH, Oklab e Oklch.