Conversor de HEX para HSL
O conversor de HEX para HSL transforma códigos hexadecimais como #3B82F6 em valores HSL como hsl(217, 91%, 60%). O HSL descreve uma cor pelo seu Matiz (a cor em si, 0–360°), pela Saturação (quão viva, 0–100%) e pela Luminosidade (quão clara, 0–100%) — um modelo muito mais próximo de como as pessoas pensam a cor do que os dígitos HEX crus.
Por que converter para HSL
Tons claros e escuros
Ajustar a intensidade
Criar paletas
Como converter de HEX para HSL
Insira o código HEX
Digite ou cole um valor HEX — com ou sem #. São aceitos tanto o formato abreviado de 3 dígitos (#F00) quanto o de 6 dígitos (#FF0000).
Leia o resultado HSL
O valor HSL aparece na hora enquanto você digita, e a amostra ao vivo se atualiza para você confirmar a cor visualmente.
Ou escolha uma cor
Clique na amostra para abrir o seletor nativo e escolher uma cor visualmente — os campos HEX e HSL se atualizam para você.
Copie e reutilize
Copie a string hsl() para o seu CSS. O painel abaixo também mostra a cor como HEX, RGB, HSV e CMYK.
Recursos
Entendendo os canais HSL
| Canal | Faixa | O que controla |
|---|---|---|
| Matiz | 0–360° | A posição da cor na roda: 0° vermelho, 120° verde, 240° azul. |
| Saturação | 0–100% | Intensidade: 0% é cinza, 100% é a versão mais viva. |
| Luminosidade | 0–100% | Brilho: 0% é preto, 50% é o matiz puro, 100% é branco. |
Conversão instantânea
Resultados ao vivo, no navegador, que se atualizam enquanto você digita — sem recarregar nem enviar a um servidor.
Abreviação e maiúsculas
O HEX de 3 dígitos é expandido automaticamente e as maiúsculas são ignoradas.
Pré-visualização e seletor
Uma amostra ao vivo mais um seletor de cores integrado para escolher visualmente.
Todos os formatos de uma vez
HEX, RGB, HSL, HSV e CMYK mostrados juntos para cada cor.
Perguntas frequentes
O que é HSL?
HSL significa Matiz, Saturação e Luminosidade. O matiz é o tipo de cor (0–360°), a saturação é quão viva ela é (0–100%) e a luminosidade é quão clara ela é (0–100%).
Por que usar HSL em vez de HEX ou RGB?
O HSL é mais intuitivo para as pessoas. Você cria tons mais claros ou escuros mudando só a luminosidade, e versões mais marcantes ou suaves mudando só a saturação, sem adivinhar dígitos HEX.
O HSL é compatível com CSS?
Sim. Todos os navegadores modernos têm suporte total às funções de cor hsl() e hsla(), então você pode colar a saída direto em uma folha de estilo.
Converter de HEX para HSL perde precisão?
Os valores HSL são arredondados para números inteiros por legibilidade, então a conversão de volta pode diferir em uma unidade por canal. A cor visível é praticamente idêntica.
Como crio uma versão mais clara da minha cor?
Mantenha o mesmo matiz e saturação e aumente o percentual de luminosidade. Para um tom mais escuro, diminua — é exatamente por isso que o HSL é tão prático para paletas.
Ainda não há comentários. Seja o primeiro a comentar!