O conversor aceita todas as formas hex do CSS: o formato de 6 dígitos #3366cc, a forma abreviada de 3 dígitos #36c, e os formatos de 4 e 8 dígitos com canal alfa, com ou sem o #. Mostra a cadeia hsl() ou hsla(), os valores simples e uma decomposição por componente, além de uma linha inversa de HSL para HEX quando precisar de fazer o percurso contrário. Tudo é executado no navegador, sem envio de ficheiros, sem conta e sem limites.
Conversor de HEX para HSL
Funciona inteiramente no navegador - sem carregar nada, sem registo.
CSS
hsl(220, 60%, 50%)Como se converte
Matiz220
Saturação60%
Luminosidade50%
Percurso contrário? 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 em matiz, saturação e luminosidade. O matiz é o ângulo na roda de cores (0-360), a saturação é o quão viva a cor é (0-100%) e a luminosidade o quão clara é (0-100%). #3366cc torna-se hsl(220, 60%, 50%). Este conversor faz isto de imediato à medida que escreve.
Como utilizar
- 1Introduza um código hex. Escreva ou cole uma cor hex como #3366cc (ou #36c), ou escolha uma com o seletor de cor. O # é opcional.
- 2Leia o valor HSL. A cadeia hsl(), os valores simples e uma pré-visualização da cor em direto atualizam-se à medida que escreve, com uma decomposição por componente para matiz, saturação e luminosidade.
- 3Copie o formato de que precisa. Clique em Copiar junto à cadeia hsl() ou aos valores em bruto. Precisa do percurso contrário? Introduza abaixo o matiz, a saturação e a luminosidade para obter novamente o código hex.
Para quem é
- Programadores front-end que transformam um código hex em hsl() para ajustar a luminosidade em estados de hover e focus sem escolher uma cor totalmente nova.
- Designers a construir paletas que mantêm o matiz fixo e vão ajustando a saturação e a luminosidade para gerar tons e sombras a partir de uma única cor de marca.
- Autores de temas e design tokens que guardam cores em HSL porque é muito mais fácil de ler e ajustar à mão do que uma cadeia hex.
- Quem precisa de fazer corresponder cores entre ferramentas onde uma pede hex (Figma, a maioria do CSS) e outra pede HSL (auxiliares de SCSS, alguns sistemas de cor).
Perguntas frequentes
Este conversor de HEX para HSL é gratuito?
Sim, é 100% gratuito, sem registo e sem limites. Funciona inteiramente no navegador.
As minhas cores são enviadas para algum lado?
Não. A conversão é JavaScript puro executado no seu dispositivo, nada é enviado para um servidor, e continua a funcionar offline depois de a página carregar.
O que é o HSL?
HSL significa matiz (hue), saturação (saturation) e luminosidade (lightness). O matiz é um ângulo de 0 a 360 graus na roda de cores, a saturação é o quão viva a cor é, de 0 a 100 por cento, e a luminosidade vai de 0 por cento (preto), passando pela cor pura aos 50 por cento, até 100 por cento (branco).
Como converto hex para HSL à mão?
Converta o hex em vermelho, verde e azul e divida cada um por 255. Tome 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 o matiz resulta de qual canal é o máximo, ajustado a uma escala de 0 a 360 graus.
Suporta a forma abreviada de 3 dígitos como #36c?
Sim. Na forma abreviada do CSS cada dígito é duplicado, pelo que #36c se expande para #3366cc e se converte em hsl(220, 60%, 50%). O formato de 4 dígitos funciona da mesma forma, com o último dígito como alfa.
Como lida com a 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 obter o alfa de 0 a 1 que o hsla() espera, arredondado a três casas decimais - assim #3366cc80 passa a hsla(220, 60%, 50%, 0.502).
Consegue converter HSL de novo em HEX?
Sim. Utilize a linha de HSL para HEX por baixo do resultado: introduza o matiz (0-360) mais a saturação e a luminosidade (0-100%) e o código hex é devolvido de imediato. Os valores fora do intervalo são limitados.
Porque é o HSL útil em vez do hex?
O HSL é legível por humanos: pode clarear uma cor aumentando a luminosidade, atenuá-la baixando a saturação, ou mudar a sua família alterando o matiz, tudo sem ter de adivinhar dígitos hex. Isso torna-o ideal para construir paletas consistentes, estados de hover e design tokens.