HSL para HEX

Por que designers usam HSL

O HSL descreve a cor do jeito que pensamos nela: um matiz no círculo cromático (0° vermelho, 120° verde, 240° azul), uma saturação do cinza (0%) ao vivo (100%) e uma luminosidade do preto (0%), passando pela cor pura (50%), até o branco (100%). Isso facilita montar paletas: mantenha o matiz e varie a luminosidade para tons mais claros e mais escuros. Design systems e variáveis CSS muitas vezes guardam cores em HSL por isso, enquanto o handoff e muitas ferramentas ainda querem hexadecimal.

Exemplo resolvido

hsl(32 100% 50%) é um laranja totalmente saturado com metade da luminosidade. O algoritmo do CSS dá vermelho 255, verde 136 e azul 0, então o código é #FF8800. Baixe a luminosidade para 40% e você tem um laranja mais escuro, #cc6d00, sem o matiz mudar.

Ida e volta

O hexadecimal tem 16,7 milhões de cores; o HSL com casas decimais tem muito mais. Converter HSL para hexadecimal arredonda cada canal para um número inteiro, então voltar pode mostrar números HSL um pouco diferentes para a mesma cor.

A página lê o matiz em graus e a saturação e a luminosidade em porcentagem, e aplica a conversão de referência do CSS Color Module Level 4: para cada canal calcula k = (n + matiz/30) mod 12 com n = 0, 8 e 4, e define o canal como luminosidade − a × max(−1, min(k − 3, 9 − k, 1)), onde a = saturação × min(luminosidade, 1 − luminosidade). Os canais são escalados para 0–255, arredondados e escritos em hexadecimal. A tabela também traz RGB, HSV, CMYK e contraste. Tudo roda nesta aba.