Conversor de Cores

Continuar na ferramenta

Mais páginas desta ferramenta

hex para hsl

Converter HEX para HSL

HSL descreve a mesma cor do HEX de outro jeito: em vez de três canais de luz, usa um ângulo de matiz e duas porcentagens. Esta página parte de #a855f7 e mostra o ângulo, a saturação e a luminosidade que resultam dele, úteis para quem ajusta tema por clareza em vez de canal por canal.

O que cada parte do HSL significa

O matiz (H) é um ângulo de 0 a 360 graus na roda de cores: 0° é vermelho puro, 120° é verde puro e 240° é azul puro, os três primários espaçados a 120 graus um do outro. Saturação (S) e luminosidade (L) são porcentagens de 0 a 100%: saturação mede o quanto a cor se afasta do cinza, luminosidade mede o quanto ela se afasta do preto ou do branco.
Um fato pouco intuitivo do modelo: 50% de luminosidade com 100% de saturação é a cor mais pura daquele matiz, a mesma que o RGB de canal cheio produziria. Acima de 50% a luminosidade caminha para o branco, abaixo caminha para o preto. É por isso que vermelho puro, rgb(255, 0, 0), aparece como hsl(0, 100%, 50%), exatamente na metade da escala de luminosidade.
O cálculo do matiz usa o canal RGB dominante e a diferença entre o maior e o menor canal, e o resultado é arredondado ao grau mais próximo. Isso significa que um HEX pode gerar um matiz com uma unidade de diferença entre calculadoras que arredondam em pontos distintos do cálculo: #a855f7, por exemplo, cai em 271°, não 270°, porque o resto da divisão não é exato.

Exemplos HEX → HSL

Roxo de destaque

Entrada: #a855f7
Saída esperada: hsl(271, 91%, 65%)

Luminosidade em 65%, acima da metade, é por isso que o roxo parece claro e não em sua versão mais saturada.

Laranja vivo

Entrada: #f97316
Saída esperada: hsl(25, 95%, 53%)

Com 53% de luminosidade, quase na metade da escala, essa cor está perto do laranja mais puro daquele matiz.

Vermelho no ponto exato de 50%

Entrada: #ff0000
Saída esperada: hsl(0, 100%, 50%)

Matiz 0°, saturação 100% e luminosidade exatamente 50%: é o caso didático que mostra a cor mais pura de um matiz.

FAQ da ferramenta completa

A ferramenta converte a mesma cor entre HEX, RGB, HSL e outros formatos?

Sim. A proposta é mostrar representações equivalentes da mesma cor em formatos diferentes, facilitando uso em CSS, design systems, documentação visual e integração entre ferramentas de design e desenvolvimento. Você digita em um formato e recebe todos os outros sincronizados ao mesmo tempo, incluindo HSV, CMYK, LAB e XYZ.

HEX e RGB representam a mesma cor?

Qual é a diferença entre HEX, RGB e HSL?

O que significa o canal alpha de uma cor?

Por que a mesma cor pode parecer diferente em telas diferentes?

Quando faz mais sentido usar HSL em vez de HEX?

CMYK e RGB servem para a mesma coisa?

Toda conversão de cor é perfeita?

Perguntas frequentes

Por que a luminosidade do HSL é diferente do valor (V) do HSV?

Porque são fórmulas diferentes sobre os mesmos canais RGB. A luminosidade do HSL é a média entre o maior e o menor canal, então o branco puro fica em 100% e o preto em 0%, enquanto o valor do HSV usa só o maior canal, então preto e uma cor saturada podem ter o mesmo valor alto.

O matiz pode passar de 360 graus?

Não no resultado final. A roda de cores tem exatamente 360 graus e o cálculo sempre normaliza o ângulo para essa faixa, então 370° e 10° descrevem o mesmo matiz e o conversor sempre devolve o valor entre 0 e 359.

Por que o mesmo HEX às vezes aparece com um grau de HSL diferente em outro site?

Porque o matiz é arredondado ao inteiro mais próximo, e a divisão que gera esse número raramente é exata. Diferenças de um grau, como 270° contra 271°, costumam vir do ponto exato em que cada implementação arredonda, não de um erro de conversão.

Próximos passos

Continuar na ferramenta

Abrir ferramenta completa

hex para hsl

Converter HEX para HSL

O que cada parte do HSL significa

O matiz (H) é um ângulo de 0 a 360 graus na roda de cores: 0° é vermelho puro, 120° é verde puro e 240° é azul puro, os três primários espaçados a 120 graus um do outro. Saturação (S) e luminosidade (L) são porcentagens de 0 a 100%: saturação mede o quanto a cor se afasta do cinza, luminosidade mede o quanto ela se afasta do preto ou do branco.

Um fato pouco intuitivo do modelo: 50% de luminosidade com 100% de saturação é a cor mais pura daquele matiz, a mesma que o RGB de canal cheio produziria. Acima de 50% a luminosidade caminha para o branco, abaixo caminha para o preto. É por isso que vermelho puro, rgb(255, 0, 0), aparece como hsl(0, 100%, 50%), exatamente na metade da escala de luminosidade.

O cálculo do matiz usa o canal RGB dominante e a diferença entre o maior e o menor canal, e o resultado é arredondado ao grau mais próximo. Isso significa que um HEX pode gerar um matiz com uma unidade de diferença entre calculadoras que arredondam em pontos distintos do cálculo: #a855f7, por exemplo, cai em 271°, não 270°, porque o resto da divisão não é exato.

Exemplos HEX → HSL

Roxo de destaque

Entrada: #a855f7
Saída esperada: hsl(271, 91%, 65%)

Luminosidade em 65%, acima da metade, é por isso que o roxo parece claro e não em sua versão mais saturada.

Laranja vivo

Entrada: #f97316
Saída esperada: hsl(25, 95%, 53%)

Com 53% de luminosidade, quase na metade da escala, essa cor está perto do laranja mais puro daquele matiz.

Vermelho no ponto exato de 50%

Entrada: #ff0000
Saída esperada: hsl(0, 100%, 50%)

Matiz 0°, saturação 100% e luminosidade exatamente 50%: é o caso didático que mostra a cor mais pura de um matiz.

FAQ da ferramenta completa

A ferramenta converte a mesma cor entre HEX, RGB, HSL e outros formatos?

HEX e RGB representam a mesma cor?

Qual é a diferença entre HEX, RGB e HSL?

O que significa o canal alpha de uma cor?

Por que a mesma cor pode parecer diferente em telas diferentes?

Quando faz mais sentido usar HSL em vez de HEX?

CMYK e RGB servem para a mesma coisa?

Toda conversão de cor é perfeita?

Perguntas frequentes