Blog
Conversores de unidades

Conversor de HEX para HSL

Digite um código de cor HEX, e o conversor calcula sua representação no modelo HSL (Matiz, Saturação, Luminosidade): matiz em graus ao redor do círculo cromático, saturação e luminosidade em porcentagem. HSL é mais prático que HEX para ajustar o matiz de forma intuitiva, independentemente do brilho.

Resultado

String hsl() —
Matiz (H) —
Saturação (S) —
Luminosidade (L) —

Todos os cálculos são feitos localmente no seu navegador: análise, gráfico, exportação. Se você desconectar a rede, a página continua funcionando.

Fatos e limites do método

Matiz (H) De 0 a 360 graus — posição no círculo cromático
Saturação (S) De 0% (cinza) a 100% (cor pura)
Luminosidade (L) De 0% (preto) a 100% (branco), 50% é a cor "pura" sem preto ou branco misturado
Arredondamento Os três valores são arredondados para números inteiros

Quando induz ao erro

Como é calculado

O código HEX é convertido primeiro para RGB comum (três números de 0 a 255), como no conversor de HEX para RGB.

Os valores RGB são normalizados para a faixa de 0 a 1 (divididos por 255). A luminosidade é a média entre o canal máximo e o mínimo.

Se os canais máximo e mínimo forem iguais (a cor é cinza), a saturação e o matiz são zero. Caso contrário, a saturação é calculada a partir da diferença entre o máximo e o mínimo em relação à luminosidade, e o matiz é calculado com base em qual dos três canais (R, G ou B) é o máximo.

As frações resultantes de matiz, saturação e luminosidade são convertidas em graus (0–360) e porcentagem (0–100) e arredondadas para números inteiros.

Perguntas e respostas

Por que uma cor cinza mostra matiz 0°?

Para uma cor completamente cinza (onde R=G=B), o matiz não é matematicamente definido porque a saturação é zero — qualquer valor de matiz parece igual com saturação zero. 0° é apenas uma convenção, não um valor com significado.

O que significa uma luminosidade de 50%?

É a cor "pura" daquele matiz e saturação, sem preto (mais próximo de 0%) ou branco (mais próximo de 100%) misturado.

HSL é mais preciso que HEX?

Não, é apenas outra forma de escrever a mesma cor — ambos os formatos descrevem o mesmo ponto no espaço de cor, apenas com coordenadas diferentes.

Meus dados são enviados para algum lugar?

Não, todo o cálculo roda no seu navegador.

Ferramentas relacionadas

Todas as ferramentas