Saltar para o conteúdo
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Converter cor HEX para HSL

Converte uma cor hexadecimal para HSL (matiz, saturação, luminosidade), o formato mais intuitivo para criar variantes mais claras ou mais escuras da mesma cor.

É processado no seu dispositivo. Nada é enviado para nenhum servidor.

HSL

hsl(173, 82%, 24%)

Calcula o matiz (ângulo de 0 a 360), a saturação e a luminosidade a partir dos canais RGB, seguindo o modelo de cor HSL padrão.

Casos de uso

  • Criar variantes de uma cor ajustando apenas a luminosidade.
  • Definir um sistema de cores em CSS com hsl().
  • Entender a composição de uma cor de marca.

Como funciona

  1. 1

    Escreve o HEX

    Insere o código hexadecimal, com ou sem cardinal.

  2. 2

    Copia o HSL

    O valor hsl(h, s%, l%) é calculado instantaneamente.

Detalhes técnicos

  • Aceita HEX de 6 dígitos (#3B82F6) ou abreviado de 3 (#38F), com ou sem #, em maiúsculas ou minúsculas. Não suporta transparência (#RRGGBBAA).
  • Devolve o matiz em graus (0–360) e a saturação e a luminosidade em percentagem, arredondados a inteiros: #3B82F6 dá hsl(217, 91%, 60%).
  • Esse arredondamento faz com que a ida e volta nem sempre seja exata: hsl(217, 91%, 60%) volta a HEX como #3C83F6. Se precisar da cor exata em CSS, mantenha o HEX ou use decimais em hsl().
  • A conversão é a fórmula padrão sobre sRGB, a mesma que os navegadores usam.

Perguntas frequentes

Porquê usar HSL em vez de HEX?

O HSL facilita a criação de tons mais claros ou mais escuros da mesma cor alterando apenas o valor de luminosidade, algo difícil de fazer a olho com HEX.

Como se usa o valor HSL em CSS?

Cola-o diretamente em qualquer propriedade de cor: background-color: hsl(210, 80%, 50%); Todos os navegadores modernos suportam-no nativamente, sem necessidade de o converter para HEX.

Ferramentas relacionadas

← Cores e design