Matiz, saturação e luminosidade

No HSL, o amarelo e o azul têm luminosidade de 50%, mas o amarelo reflete quase 13 vezes mais luz que o azul pela fórmula de luminância da WCAG.

Transformando o cubo em cilindro

Os números RGB são fáceis para a tela e difíceis para uma pessoa. Se você quer "o mesmo azul, um pouco mais claro", precisa mudar os três canais ao mesmo tempo, em quantidades diferentes. O HSL reorganiza as mesmas cores sRGB para que os controles combinem com o jeito como as pessoas falam de cor. O CSS Color 4 o descreve como um modelo cilíndrico: um ângulo de matiz em volta, um eixo central de luminosidade do preto ao branco e um raio de saturação, que mede o quanto a cor está longe de um cinza neutro.

Imagine o cubo RGB apoiado no canto preto, com o branco bem em cima. O eixo cinza agora é vertical. Olhando de cima, os seis cantos vivos, vermelho, amarelo, verde, ciano, azul e magenta, formam um anel em volta do eixo. O HSL pega esse anel, torna-o redondo e estica o sólido inteiro até virar um cilindro. O modelo acima mostra o resultado: um disco horizontal na luminosidade escolhida e uma fatia vertical no matiz escolhido e no seu oposto. Clique em qualquer ponto de uma das superfícies para escolher essa cor.

Matiz

O matiz é um ângulo em graus. O CSS Color 4 fixa o ponto de partida: 0deg é o vermelho sRGB, 120deg é o verde, 240deg é o azul, e 360deg volta ao vermelho. No meio das primárias ficam as secundárias: 60deg amarelo, 180deg ciano e 300deg magenta. Como o matiz é um ângulo, ele dá a volta. Um matiz de 390deg é igual a 30deg, e somar 180deg a qualquer matiz leva à cor exatamente do outro lado do círculo.

Saturação e luminosidade

A saturação é uma porcentagem. Em 100%, a cor fica na parte externa do cilindro e é tão viva quanto o sRGB permite naquela luminosidade. Em 0%, fica no eixo central e é um cinza; o CSS Color 4 diz que então o matiz não tem nenhum efeito, e hsl(0deg 0% 50%) e hsl(180deg 0% 50%) são o mesmo cinza. A luminosidade também é uma porcentagem. 0% é preto para todos os matizes, 100% é branco para todos os matizes, e 50% dá a versão mais viva de um matiz. Assim, hsl(0deg 100% 50%) é o mesmo vermelho que #ff0000, e hsl(120deg 100% 25%) é um verde escuro, rgb(0 128 0).

Onde o HSL engana

O HSL é prático, e a especificação CSS é franca sobre seus limites. A luminosidade dele não é a luminosidade que seu olho vê. O amarelo, hsl(60deg 100% 50%), e o azul, hsl(240deg 100% 50%), têm o mesmo L de 50%, mas o amarelo parece bem mais claro. A fórmula de luminância da WCAG dá 0.9278 para esse amarelo e 0.0722 para esse azul, uma razão de quase 13. O ângulo do matiz também não é uniforme: a especificação observa que um passo de 30 graus entre azuis parece pequeno, enquanto o mesmo passo entre amarelo e verde parece grande. Espaços de cor mais novos do CSS, como oklch(), foram criados para corrigir isso. Para conferir se um texto pode ser lido, nunca confie na luminosidade HSL. Use a razão de contraste, que você vai calcular na unidade 6.