Converter HEX em HSL
HEX para HSL converte uma cor hex em matiz, saturação e luminosidade. Os três canais são escalados para 0–1, e então o maior e o menor deles produzem a resposta: a luminosidade é o ponto médio entre os dois, a saturação é a distância entre eles, e a matiz é qual canal é o maior e por quanto. O resultado é exato e reversível — mas a luminosidade do HSL não é a luminosidade que seu olho percebe, o que vale saber antes de construir qualquer coisa em cima disso.
Digite uma cor à esquerda. São aceitos valores hexadecimais com ou sem cerquilha, rgb(), hsl(), oklch() e nomes de cores CSS.
Como funciona o Converter HEX em HSL?
HSL é outro conjunto de coordenadas para os mesmos três bytes. Escalone cada canal para 0–1, encontre o maior e o menor, e o resto se segue: a luminosidade é o ponto médio entre eles, o chroma é a distância entre os dois, e a matiz é determinada por qual canal é o maior e como os outros dois se posicionam em relação a ele.
De onde vem o número da matiz
O círculo cromático é dividido em seis setores de 60°, um para cada cor primária e secundária. Se o vermelho é o maior canal, você está no setor do vermelho, e a posição dentro dele é definida pela distância com que o verde adianta ou atrasa em relação ao azul. Para #ff8800: o vermelho é o máximo, o verde é 0.533, o azul é 0, então a matiz é (0.533 − 0) / 1 × 60 = 32°. Todo cálculo de matiz que você já viu é isto, escrito de forma mais compacta.
A saturação é relativa, o que surpreende as pessoas
O mesmo chroma produz um número de saturação diferente dependendo da luminosidade, porque o denominador muda: é chroma / (1 − |2L − 1|). Uma cor muito escura ou muito clara tem pouco espaço para chroma, então uma pequena diferença absoluta entre os canais aparece como saturação alta. É por isso que #010200 volta como 100% saturada — ela é quase preta, e dentro do que é possível naquela luminosidade é tão colorida quanto se pode chegar.
A luminosidade HSL não é a luminosidade percebida
Este é o ponto que vale a pena levar daqui. hsl(60 100% 50%) é amarelo e hsl(240 100% 50%) é azul, e o HSL diz que ambos têm 50% de luminosidade. Um é quase branco para o olho e o outro quase preto. A fórmula pondera os três canais igualmente, e o olho não — o verde contribui cerca de dez vezes mais para o brilho percebido do que o azul.
A consequência prática: uma rampa de tons construída em degraus de luminosidade HSL tem degraus que parecem irregulares por mais iguais que sejam os números, e uma paleta girada pelas matizes do HSL sai com algumas cores gritando e outras invisíveis. Se o valor vai alimentar uma rampa, uma mistura ou qualquer julgamento sobre brilho, use OKLCH — ele está na saída abaixo, e todos os navegadores atuais o aceitam em CSS.
Uma cor hex
#ff8800
Matiz, saturação, luminosidade
hsl(32 100% 50%) max 255 / 255 = 1.000 (red) min 0 / 255 = 0.000 (blue) lightness = (1 + 0) / 2 = 50% chroma = 1 − 0 = 1.000 → saturation 100%
Quais opções e casos-limite o Converter HEX em HSL suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| Matiz | 0–360deg | 0 = vermelho | Posição na roda. 120 é verde, 240 é azul. É um ciclo, então 370 e 10 são o mesmo. |
| Saturação | 0–100% | — | Cromaticidade relativa ao que essa luminosidade permite. 0% é cinza em qualquer matiz. |
| Luminosidade | 0–100% | — | 0% é preto e 100% é branco em qualquer matiz. 50% é onde uma matiz tem mais saturação. |
| Alfa | 0–1 | 1 | Escrito após uma barra na sintaxe moderna: hsl(32 100% 50% / 50%). |
| hsl() vs hsla() | — | idênticos | hsl() aceita alpha agora. hsla() é um alias legado e não foi depreciado. |
| Cinza | S = 0 | — | Sem saturação, a matiz é arbitrária e não carrega informação. É reportado como 0 aqui, em vez de ser ruído. |
| Ida e volta | exato | — | De Hex para HSL e de volta retorna a mesma cor. A fórmula é uma mudança de coordenadas, não uma aproximação. |
| OKLCH | alternativa | — | Mesma ideia — um ângulo de matiz, uma cromaticidade e uma luminosidade — mas com um eixo de luminosidade que corresponde ao que o olho percebe. |
Perguntas frequentes
Como converto hex para HSL manualmente?
Converta o hex em três canais de 0–255, divida cada um por 255 e pegue o maior e o menor. A luminosidade é (max + min) / 2. O chroma é max − min; se for zero, a cor é cinza e você terminou. Caso contrário, a saturação é chroma / (1 − |2L − 1|), e a matiz vem de qual canal era o maior: vermelho dá ((G − B) / chroma) × 60, verde dá ((B − R) / chroma + 2) × 60, azul dá ((R − G) / chroma + 4) × 60.
Por que uma cor quase preta mostra 100% de saturação?
Porque a saturação do HSL é relativa ao chroma máximo disponível naquela luminosidade, não absoluta. Em 1% de luminosidade quase não há espaço para chroma, então uma diferença mínima entre os canais é tão colorida quanto aquela luminosidade permite — e aparece como 100%. Ela está se comportando corretamente; apenas mede algo diferente do que a maioria das pessoas espera.
A luminosidade do HSL é o mesmo que brilho?
Não, e essa é a armadilha. O HSL pondera os três canais igualmente, enquanto o olho pondera o verde muito mais que o azul. hsl(60 100% 50%) e hsl(240 100% 50%) declaram a mesma luminosidade; um é um amarelo ofuscante e o outro é quase preto. Para qualquer coisa que dependa do brilho percebido — uma escala de tons, uma decisão de contraste, uma mistura — o OKLCH dá a resposta certa onde o HSL dá uma resposta errada plausível.
Devo usar HSL em CSS?
Ele é bom no que tem de bom: ajustar uma matiz, dessaturar algo ou escrever uma cor que você queira conseguir ler num relance. É a ferramenta errada para gerar uma escala ou interpolar entre duas cores, porque o eixo de luminosidade dele não é perceptual. Esses trabalhos pedem oklch(), que todos os navegadores atuais suportam.
Converter hex para HSL perde precisão?
A conversão em si é exata — é uma mudança de coordenadas sobre os mesmos três bytes. O que perde precisão é a exibição: uma matiz arredondada ao grau e uma saturação ao décimo de porcento nem sempre voltam para o hex idêntico. Os valores aqui são exibidos com precisão suficiente para ir e voltar, e se você precisa de uma ida e volta garantidamente exata, guarde o hex.
Como deixar uma cor mais clara ou mais escura sem alterar a matiz?
Converta para HSL e mexa só na luminosidade. Manter matiz e saturação fixos enquanto se varia a luminosidade — 50%, 60%, 70% — é o que produz uma escala de tons que ainda parece uma cor só. Ajustar um hex à mão não permite isso: somar a mesma quantidade aos três canais muda a matiz, além do brilho.