Conversor de HEX para HSL

Converta códigos de cor HEX para valores HSL instantaneamente no navegador.

Converta qualquer código de cor HEX para HSL instantaneamente com este conversor de HEX para HSL online e gratuito. Digite um valor hexadecimal como #4f46e5 (ou escolha uma cor com a paleta) e receba na hora a string hsl() correspondente e os valores brutos de matiz, saturação e luminosidade. Ele aceita atalho de 3 dígitos, hexadecimal completo de 6 dígitos e hexadecimal de 8 dígitos com transparência — e tudo roda no seu navegador, sem nada para instalar.

O que é um conversor de HEX para HSL?

Um conversor de HEX para HSL transforma um código de cor hexadecimal no modelo de cores HSL: matiz (hue), saturação e luminosidade. Códigos hexadecimais como #4f46e5 são compactos e comuns em CSS, mas o HSL é muito mais intuitivo de usar — você pode girar a matiz pela roda de cores, aumentar ou diminuir a saturação, ou clarear e escurecer uma cor mudando apenas um número. Esta ferramenta lê qualquer código hexadecimal válido e mostra o valor hsl() exato por trás dele.

Como converter HEX para HSL

Um código hexadecimal é primeiro dividido nos canais de vermelho, verde e azul (cada um um número de 0 a 255), e então esses valores RGB são convertidos em HSL. A matiz é um ângulo de 0 a 360 graus na roda de cores, enquanto a saturação e a luminosidade são porcentagens de 0% a 100%. Por exemplo, #4f46e5 se torna hsl(243, 75%, 59%). Atalhos como #f0c são expandidos para #ff00cc antes.

  1. Digite ou cole um código de cor HEX no campo HEX (o # é opcional).
  2. Veja a string hsl() e os valores brutos de H, S, L atualizados enquanto você digita.
  3. Use a paleta de cores se preferir escolher uma cor visualmente.
  4. Clique em Copiar para copiar o formato que você precisa.

Por que usar este conversor de HEX para HSL?

  • 100% gratuito, sem anúncios, cadastro ou limites.
  • Conversão instantânea enquanto você digita.
  • Aceita atalho de 3 dígitos, 6 dígitos e hexadecimal de 8 dígitos com transparência.
  • Copie a string hsl(), a string hsla() ou os números brutos de H, S, L.
  • Roda inteiramente no seu navegador — suas cores nunca saem do seu dispositivo.

Perguntas frequentes

Como converto uma cor HEX para HSL?

Primeiro converta o código hexadecimal para RGB dividindo-o em três pares de dígitos, depois converta RGB para HSL: a matiz como um ângulo (0 a 360°), e a saturação e a luminosidade como porcentagens. Por exemplo, #4f46e5 se torna hsl(243, 75%, 59%). Esta ferramenta faz toda a conta automaticamente.

Por que usar HSL em vez de HEX?

O HSL é mais fácil de entender do que o hexadecimal. Como matiz, saturação e luminosidade são separados, você pode criar tons mais claros ou mais escuros, variantes mais suaves ou mais vivas e paletas harmoniosas ajustando apenas um valor — algo bem mais difícil de fazer diretamente com códigos hexadecimais.

Ela aceita atalho hexadecimal como #f0c?

Sim. O atalho de três dígitos é expandido dobrando cada dígito, então #f0c é tratado como #ff00cc antes de ser convertido para HSL.

Ela converte hexadecimal com transparência (alfa)?

Sim. Se você digitar um código hexadecimal de 8 dígitos como #4f46e5cc, o último par é lido como o canal alfa e o resultado é exibido como um valor hsla() com o alfa entre 0 e 1.

Preciso do símbolo #?

Não. Você pode colar um código hexadecimal com ou sem o # inicial; tanto 4f46e5 quanto #4f46e5 funcionam.