Desenvolvedor 🔒 Roda no seu navegador — nenhum dado é enviado

Conversor de HEX para HSL

Transforme um código de cor HEX em matiz, saturação e luminosidade, a notação que facilita criar variações de uma cor.

Cor de entrada

Seletor:

Digite uma cor para converter...

Como Usar

Digite ou cole um código HEX como #0A84FF ou #F80.
Leia o valor hsl() na lista “Formatos” e copie-o.
Abra a aba “Paleta” para ver uma escala de 50 a 950 que mantém o matiz e muda a luminosidade.
Confira qualquer variação contra o fundo dela na aba “Contraste”.

Perguntas Frequentes

O que significa HSL?

Hue, saturation e lightness: matiz, saturação e luminosidade. O matiz é um ângulo na roda de cores, de 0 a 360, a saturação indica o quanto a cor é viva e a luminosidade, o quanto ela está perto do preto ou do branco.

Por que meu valor HSL difere em uma unidade do de outra ferramenta?

Os valores HSL são calculados com casas decimais e depois arredondados. #0A84FF tem matiz 210,1, então ferramentas que arredondam de outro jeito podem mostrar 210 ou 211. Os dois descrevem praticamente a mesma cor.

A conversão de HEX para HSL é sem perdas?

Matematicamente, sim, mas arredondar para números inteiros pode deslocar a cor em uma fração de passo. Converter o HSL arredondado de volta pode dar um código HEX a uma ou duas unidades de distância.

Posso usar hsl() no CSS?

Sim. Todos os navegadores atuais suportam hsl() e hsla(), incluindo a sintaxe moderna separada por espaços.

Converter cores HEX para HSL

Atualizado em 24 de setembro de 2026 · Por Saman

Códigos HEX são compactos, mas difíceis de interpretar: ninguém olha para #0A84FF e sabe como deixá-lo 10 por cento mais escuro. O HSL descreve a mesma cor do jeito que as pessoas pensam nela, então um estado hover, um estado desabilitado ou uma variante de modo escuro vira a mudança de um único número.

Esta página abre o Conversor de Cores com a entrada HEX selecionada e um exemplo carregado.

Uma cor HEX são três pares de dígitos hexadecimais para vermelho, verde e azul. #0A84FF é rgb(10, 132, 255), e essa mesma cor escrita em HSL é hsl(210, 100%, 52%).

Lendo um valor HSL

Parte	Intervalo	Em hsl(210, 100%, 52%)
Matiz	0–360°	210°: um azul entre o ciano (180°) e o azul puro (240°)
Saturação	0–100%	100%: o mais vivo possível, sem cinza misturado
Luminosidade	0–100%	52%: logo acima do ponto médio entre o preto e o branco

Como o HEX vira HSL

O conversor primeiro transforma o código HEX em RGB e depois escala cada canal para 0–1. A luminosidade é a média entre o maior e o menor canal. A saturação depende da distância entre esses dois, em relação à luminosidade. O matiz vem de qual canal é o maior e de como os outros dois se comparam. Para #0A84FF o resultado é 210,1°, 100% e 51,96%, arredondado para hsl(210, 100%, 52%).

Criando variações com HSL

Estado hover ou pressionado: reduza a luminosidade de 5 a 10 pontos.
Estado desabilitado: reduza a saturação e aumente a luminosidade.
Tons claros para fundos: mantenha matiz e saturação e defina a luminosidade entre 90 e 97%.
Modo escuro: aumente a luminosidade para a cor continuar legível sobre superfícies escuras.

A aba Paleta automatiza isso com uma escala de onze passos, de 50 a 950, e as harmonias logo abaixo giram o matiz para encontrar cores complementares e análogas.

Uma ressalva sobre percepção

A luminosidade do HSL não é a luminosidade percebida: um amarelo e um azul a 50% parecem ter brilhos bem diferentes. Quando o contraste importa, teste o par real no Verificador de Contraste de Cores ou use o valor OKLCH que o conversor também mostra. Para valores de canal simples, veja HEX para RGB.