O conversor aceita todos os formatos hex do CSS: o formato de 6 dígitos #3366cc, o abreviado de 3 dígitos #36c, e os formatos de 4 e 8 dígitos com canal alfa, com ou sem o #. Ele mostra a string hsl() ou hsla(), os valores simples e um detalhamento por componente, além de uma linha reversa de HSL para HEX quando você precisa fazer o caminho inverso. Tudo roda no seu navegador, sem upload, sem cadastro e sem limites.
Conversor de HEX para HSL
Funciona inteiramente no seu navegador - sem upload, sem cadastro.
CSS
hsl(220, 60%, 50%)Como é convertido
Matiz220
Saturação60%
Luminosidade50%
No caminho inverso? HSL para HEX
#3366ccComo converter HEX para HSL
Primeiro leia o código hex como vermelho, verde e azul (0-255), depois reescreva essa cor como matiz, saturação e luminosidade. A matiz é o ângulo na roda de cores (0-360), a saturação é o quanto a cor é vibrante (0-100%) e a luminosidade é o quanto ela é clara (0-100%). #3366cc vira hsl(220, 60%, 50%). Este conversor faz isso instantaneamente enquanto você digita.
Como usar
- 1Digite um código hex. Digite ou cole uma cor hex como #3366cc (ou #36c), ou escolha uma no seletor de cores. O # é opcional.
- 2Veja o valor HSL. A string hsl(), os valores simples e uma prévia da cor ao vivo são atualizados enquanto você digita, com um detalhamento por componente de matiz, saturação e luminosidade.
- 3Copie o formato que precisar. Clique em Copiar ao lado da string hsl() ou dos valores brutos. Precisa do caminho inverso? Digite matiz, saturação e luminosidade abaixo para obter o código hex de volta.
Para quem é
- Desenvolvedores front-end que passam um código hex para hsl() para ajustar a luminosidade em estados de hover e focus sem precisar escolher uma cor totalmente nova.
- Designers montando paletas que mantêm a matiz fixa e variam saturação e luminosidade para gerar tons mais claros e escuros a partir de uma cor de marca.
- Quem cuida de temas e design tokens e guarda as cores em HSL porque é bem mais fácil de ler e ajustar à mão do que uma string hex.
- Qualquer pessoa igualando cores entre ferramentas em que uma pede hex (Figma, a maioria do CSS) e outra pede HSL (helpers de SCSS, alguns sistemas de cor).
Perguntas frequentes
Esse conversor de HEX para HSL é gratuito?
Sim, é 100% gratuito, sem cadastro e sem limites. Roda inteiramente no seu navegador.
Minhas cores são enviadas para algum lugar?
Não. A conversão é JavaScript puro rodando no seu dispositivo, nada é enviado a um servidor, e continua funcionando offline depois que a página carrega.
O que é HSL?
HSL significa matiz (hue), saturação e luminosidade. A matiz é um ângulo de 0 a 360 graus na roda de cores, a saturação vai de 0 a 100 por cento conforme a cor é mais vibrante, e a luminosidade vai de 0 por cento (preto), passando pela cor pura em 50 por cento, até 100 por cento (branco).
Como converter hex para HSL na mão?
Converta o hex em vermelho, verde e azul e divida cada valor por 255. Pegue o máximo e o mínimo dos três: a luminosidade é a média deles, a saturação é (máximo - mínimo) dividido por (1 - |2L - 1|), e a matiz vem de qual canal é o máximo, escalado de 0 a 360 graus.
Ele aceita o formato abreviado de 3 dígitos, tipo #36c?
Sim. No formato abreviado do CSS cada dígito é duplicado, então #36c vira #3366cc e converte para hsl(220, 60%, 50%). O formato de 4 dígitos funciona do mesmo jeito, com o último dígito como alfa.
Como ele lida com transparência (HSLA)?
Um código hex de 8 dígitos traz o alfa no último par. Esse byte (0-255) é dividido por 255 para chegar ao alfa de 0 a 1 que o hsla() espera, arredondado para três casas decimais - assim #3366cc80 vira hsla(220, 60%, 50%, 0.502).
Ele converte HSL de volta para HEX?
Sim. Use a linha de HSL para HEX abaixo do resultado: digite a matiz (0-360) mais a saturação e a luminosidade (0-100%) e ele devolve o código hex na hora. Valores fora da faixa são ajustados ao intervalo permitido.
Por que usar HSL em vez de hex?
HSL é legível para humanos: você pode clarear uma cor aumentando o L, deixá-la mais neutra baixando o S, ou mudar sua família mexendo no H, tudo sem precisar adivinhar dígitos hex. Por isso é ideal para montar paletas consistentes, estados de hover e design tokens.