Os três formatos de cor mais usados na web
As cores em telas são formadas pela mistura de luz vermelha, verde e azul, e o mesmo tom pode ser escrito de formas diferentes. O HEX (como #1E90FF) é compacto e dominante em CSS e design. O RGB informa a intensidade de cada canal de 0 a 255. O HSL descreve a cor por matiz (0 a 360 graus), saturação e luminosidade, o que facilita criar variações mais claras ou mais escuras.
Como a conversão funciona
- HEX para RGB: cada par de dígitos hexadecimais é um canal. #1E90FF = 1E (30), 90 (144) e FF (255).
- RGB para HSL: o matiz vem do canal dominante, a luminosidade é a média entre o maior e o menor canal e a saturação mede a distância entre eles.
- HSL para RGB: o caminho inverso, calculado a partir do croma e do setor do matiz.
Exemplo
O azul #1E90FF é igual a rgb(30, 144, 255) e a hsl(210, 100%, 56%): matiz 210°, totalmente saturado e com luminosidade um pouco acima da metade. Para obter um tom mais escuro, basta reduzir a luminosidade em HSL, por exemplo para 40%.
Dicas
O HEX de 3 dígitos é uma abreviação: #0AF equivale a #00AAFF. Como os valores são arredondados para inteiros, converter de ida e volta pode alterar um ponto em HSL, o que é normal. Ao escolher cores de texto e fundo, lembre-se de checar o contraste para garantir boa leitura.