Ferramentas CSS e de desenvolvimento front-end

HEX para HSL

Converta uma cor HEX em CSS hsl() e consulte separadamente os valores H, S e L.

Valores de entrada

Processamento no navegador

Pré-visualização em tempo real

Atualização automática ao alterar os parâmetros
Selecione ou copie diretamente

Converta HEX em HSL e consulte matiz, saturação, luminosidade e a cor resultante.

Os dados introduzidos são processados apenas no seu navegador e nunca enviados para um servidor.

Sobre esta ferramenta

HEX para HSL interpreta o HEX segundo as mesmas regras de HEX para RGB e calcula matiz, saturação e luminosidade. HSL ajuda a compreender relações entre cores e a ajustar tons mais claros ou escuros do mesmo matiz.

Como utilizar

  1. Introduza um HEX de 3 ou 6 dígitos, com ou sem #.
  2. Consulte o HSL e os valores individuais H, S e L.
  3. Confira a pré-visualização da cor e copie o HSL.
  4. Clique em Limpar para apagar a entrada ou carregue um exemplo.

Exemplos de utilização

  • #ff0000 → hsl(0, 100%, 50%).
  • #00ff00 → hsl(120, 100%, 50%); #0000ff → hsl(240, 100%, 50%).
  • #808080 → hsl(0, 0%, 50.2%); #ffffff → hsl(0, 0%, 100%).

Como funciona o cálculo

Dividem-se os canais RGB por 255 e calculam-se o máximo max, o mínimo min e a diferença delta. A luminosidade é L = (max + min) / 2. Nas cores cromáticas, S = delta / (1 − |2L − 1|); o matiz depende da posição do maior canal no círculo cromático. Para cinzento, H e S são definidos como 0. Os decimais só são arredondados na apresentação.

Utilizações comuns

  • Compreender o matiz e a luminosidade das cores de um design.
  • Converter constantes HEX em HSL para facilitar ajustes de cor.
  • Verificar valores HSL de cores puras, cinzento, preto e branco.

Privacidade

Os dados introduzidos e os resultados são tratados apenas no seu navegador, sem serem enviados ou guardados automaticamente. Copie os resultados que pretender conservar antes de sair da página.

FAQ

Quais são os três componentes HSL?

H é o ângulo do matiz, S é a saturação em percentagem e L é a luminosidade em percentagem.

Porque se mede o matiz em graus?

O matiz é representado num círculo cromático. Uma volta tem 360°, pelo que 0° e 360° indicam a mesma posição.

Porque tem o cinzento H igual a 0?

Quando os três canais RGB são iguais, não existe um matiz específico. Por convenção, a ferramenta usa H = 0 e S = 0%.

Pode haver erros de precisão na conversão?

O resultado é arredondado para um número limitado de casas decimais. Ao voltar a convertê-lo, poderá observar pequenas diferenças devido ao arredondamento.

HEX → RGB RGB → HEX Gerador de gradientes CSS

Voltar ao diretório de ferramentas para programadores