Como funciona o conversor de HEX para HSL
A conversão de HEX para HSL é útil para quem deseja ajustar cores digitalmente de forma intuitiva. O código HEX é uma representação hexadecimal da cor RGB, comum em CSS e HTML. O modelo HSL organiza a cor em matiz (H), saturação (S) e luminosidade (L), facilitando alterações visuais como brilho ou intensidade. A transformação de HEX para HSL ajuda a modificar paletas com mais controle visual, especialmente em temas responsivos ou animações dinâmicas.
Como usar o conversor online de HEX para HSL
Nossa ferramenta permite transformar qualquer código HEX em HSL com precisão. Veja como funciona:
- Digite o código hexadecimal, como #FF5733 ou #00FF00.
- A ferramenta converte para RGB e aplica a fórmula de transformação para HSL.
- O resultado mostra os valores de matiz (0 a 360), saturação (%) e luminosidade (%).
Esses valores podem ser usados diretamente em CSS ou para gerar variações de cor baseadas em brilho ou saturação.
Fórmula de conversão de HEX para HSL
A conversão começa com a leitura dos componentes RGB a partir do código HEX. Depois, os valores são normalizados para a faixa 0 a 1. A partir disso, calcula-se:
L = (max + min) / 2
S = (max - min) / (1 - |2L - 1|)
H depende do maior valor entre R, G ou B
- Se max = R → H = 60 × ((G - B) / (max - min))
- Se max = G → H = 60 × ((B - R) / (max - min)) + 120
- Se max = B → H = 60 × ((R - G) / (max - min)) + 240
O resultado final é arredondado para números inteiros e convertido para porcentagens no caso de S e L.
Exemplos práticos de conversão
- #FF0000 → HSL (0, 100%, 50%)
- #00FF00 → HSL (120, 100%, 50%)
- #0000FF → HSL (240, 100%, 50%)
- #808080 → HSL (0, 0%, 50%)
- #FFFF00 → HSL (60, 100%, 50%)
Esses exemplos mostram como o HSL permite compreender melhor a estrutura da cor, ideal para manipulações programáticas.
Tabela de conversão HEX para HSL
| HEX | HSL |
|---|---|
| #FF0000 | (0, 100%, 50%) |
| #00FF00 | (120, 100%, 50%) |
| #0000FF | (240, 100%, 50%) |
| #FFFFFF | (0, 0%, 100%) |
| #000000 | (0, 0%, 0%) |
Perguntas frequentes
O que torna o HSL melhor para ajustes visuais?
Ele permite alterar brilho ou saturação sem afetar a cor base, ideal para criar variações consistentes de um mesmo tom.
O código HEX contém informações de matiz?
Indiretamente sim. O HEX representa RGB, e ao converter para HSL você extrai a matiz (H) da combinação de R, G e B.
É possível usar HSL em CSS?
Sim. CSS permite declarar cores com hsl(h, s%, l%), ideal para temas dinâmicos e responsivos.
O HEX tem limite de cores?
Um código HEX de 6 dígitos pode representar 16.777.216 cores distintas, o mesmo que RGB 8 bits.
Curiosidade: o que significa HSL?
HSL vem de Hue (matiz), Saturation (saturação) e Lightness (luminosidade). O modelo foi criado para refletir como os humanos percebem cores e é muito utilizado em design gráfico, edição de fotos e desenvolvimento de interfaces.