Conversor de HEX para HSL
Transforme códigos HEX em HSL, o formato que torna as variantes mais claras e escuras fáceis.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como converter HEX para HSL
- Cole uma cor em qualquer formato — ou pegá-lo na cor quadrada ou na tela.
- Leia o resultado e todos os outros formatos; ajuste os controles deslizantes do canal.
- Copie o valor ou código ou converta uma lista inteira.
Sobre: Conversor de HEX para HSL
Converter cores HEX em HSL (hue, saturação, leveza).
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Web e design de aplicativos
- Combinando cores de marca entre ferramentas
- Tokens de desenvolvimento e design front-end
Dica: Pressione as teclas de seta no quadrado de cores ou controles deslizantes para passos finos; segure Shift para os maiores.
Perguntas frequentes
O que HSL significa?
Hue (o ângulo de cor em uma roda, 0–360°), saturação (0 % cinza a 100 % de cor completa) e luminosidade (0 % preto, 50 % de cor pura, 100 % branco). É mais fácil de ajustar à mão do que RGB.
Que formatos de cores posso colar?
Qualquer formato CSS: HEX (#rgb, #rrggbb, com alfa), rgb() / rgba(), hsl() / hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), HSV/HSB, CMYK, os 148 nomes de cores CSS e números simples como “79, 110, 247”.
Posso escolher uma cor da minha tela?
Sim. — No Chrome e Edge, clique no conta-gotas ao lado do quadrado de cores e clique em qualquer lugar na tela, mesmo fora do navegador.
Posso converter muitas cores ao mesmo tempo?
Sim. — abra “Converter uma lista de cores”, cole uma cor por linha em qualquer formato e copie ou baixe os resultados como CSV.
O que são OKLCH e OKLab?
Espaços de cores perceptuais modernos: passos iguais parecem igualmente diferentes do olho, o que os torna ideais para paletas e tokens de design. Todos os navegadores atuais suportam oklch() em CSS.