Converter HEX para HSL
Digite o HEX e copie o HSL — com números inteiros ou com casas decimais para uma conversão exata.
Processado no seu navegador — nada é enviado ou armazenado.
Casas decimais
Sintaxe
- Matiz
- 214°
- Saturação
- 82%
- Luminosidade
- 51%
HSL
hsl(214, 82%, 51%)
Propriedade CSS
color: hsl(214, 82%, 51%);
Convertido de volta, dá #1c74e9 (o original é #1a73e8): é o arredondamento do HSL com inteiros. Use 2 casas decimais para uma conversão exata.
Como usar
- Digite o código HEX.
- Escolha as casas decimais: inteiros são mais legíveis; duas casas garantem voltar exatamente à mesma cor.
- Escolha a sintaxe: hsl(214, 82%, 51%) funciona em qualquer navegador; hsl(214 82% 51%) é a forma atual do CSS.
- Clique em Copiar.
Por que usar HSL
No HSL fica fácil criar variações: mantenha a matiz e mude só a luminosidade para ter tons mais claros e mais escuros do mesmo azul, ou só a saturação para versões mais acinzentadas.
Precisão
Com números inteiros, o HSL tem cerca de 3,6 milhões de combinações, menos que os 16,7 milhões do HEX: uma cor convertida e convertida de volta pode mudar até alguns pontos em um canal. Com duas casas decimais, a volta é exata para todas as cores — conferimos isso em 636 mil cores nos testes.
Conteúdo e funcionamento revisados pela Equipe UtiliLab em . Consulte nossa metodologia de revisão.
Perguntas frequentes
O que significam os três números?
Matiz é a posição no círculo cromático (0° vermelho, 120° verde, 240° azul). Saturação vai de 0% (cinza) a 100% (cor pura). Luminosidade vai de 0% (preto) a 100% (branco), com a cor pura em 50%.
Posso usar casas decimais no CSS?
Sim. hsl(214.1, 81.7%, 50.6%) é válido em todos os navegadores atuais.
Ferramentas relacionadas
HEX para RGB
Converta códigos HEX em RGB e RGBA, com validação e cópia em um clique.
Gerador de Paleta de Cores
Gere paletas análogas, complementares, triádicas e tetrádicas e exporte em HEX, RGB ou CSS.
Conversor de Cores
Converta uma cor entre HEX, RGB, HSL e OKLCH, com prévia e razão de contraste.
Seletor de Cores
Escolha uma cor no quadro de saturação e brilho e copie em HEX, RGB, HSL ou HSV.