Conversor Gratuito

HSL para Conversor HEX

Converta valores de cor HSL para códigos de cor HEX instantaneamente — conversor de cores gratuito e em tempo real.

Matiz
Saturação (%)
Luminosidade (%)

Saída HEX

#368CE2
R:54
G:140
B:226

Copiar formato

Formato #HEX#368CE2
Formato hsl()hsl(210°, 75%, 55%)
Formato rgb()rgb(54, 140, 226)

Sobre esta ferramenta

Converta valores de cores HSL (matiz, saturação, luminosidade) em códigos hexadecimais. HSL é um modelo de cores intuitivo onde Matiz é o ângulo da cor (0-360°), Saturação é a intensidade da cor (0-100%) e Luminosidade controla o quão clara ou escura a cor é (0-100%). Útil para designers que trabalham em HSL e precisam de códigos hexadecimais para CSS.

Como usar

  1. Insira o valor de Matiz (0-360 graus na roda de cores).
  2. Defina Saturação (0-100%) e Luminosidade (0-100%).
  3. O código hexadecimal é calculado e exibido em tempo real.
  4. Copie o código hexadecimal para usar em seu CSS ou ferramenta de design.

Perguntas frequentes

Por que usar HSL em vez de hexadecimal ou RGB?
HSL é mais intuitivo para humanos. Quer um tom mais escuro? Diminua a leveza. Quer uma versão silenciosa? Diminua a saturação. Essas relações não são óbvias em hexadecimal ou RGB, onde você precisaria ajustar todos os três canais.
O que significa um matiz de 0 vs 360?
Tanto 0° quanto 360° são vermelhos – a roda de matiz gira em torno. Tons principais: 0° = vermelho, 60° = amarelo, 120° = verde, 180° = ciano, 240° = azul, 300° = magenta.
O que acontece com 0% e 100% de saturação?
Com saturação de 0%, qualquer matiz se torna um tom de cinza (determinado apenas pela luminosidade). Com 100% de saturação, você obtém a versão mais pura e vívida dessa tonalidade.
Como funciona a leveza?
0% de luminosidade é sempre preto, independentemente do matiz/saturação. 100% é sempre branco. 50% dá a versão pura e mais vibrante da cor. Valores entre 0-50% são tons mais escuros, 50-100% são tons mais claros.