Conversor HEX para HSL
O que é Conversor HEX para HSL
Esta ferramenta converte códigos de cor HEX (como #3B82F6) para valores HSL (como hsl(217, 91%, 60%)). HSL significa Matiz, Saturação e Luminosidade — um modelo de cor mais intuitivo para designers. Ajustar a luminosidade em HSL é muito mais fácil do que em HEX ou RGB, tornando-o ideal para criar paletas de cores e variáveis CSS.
Como usar
- Digite ou cole um código HEX no campo HEX (com ou sem #).
- Os valores HSL e RGB aparecem instantaneamente.
- Clique no botão de copiar ao lado de HSL para copiar no formato hsl(h, s%, l%).
- Alterne entre todos os 6 conversores usando os links de modo no topo.
Quando usar
Montando um sistema de cores a partir de uma cor de marca? Cole o HEX da marca (#E63946) e receba hsl(356, 75%, 56%). A partir daí você cria tons mais claros aumentando a luminosidade e mais escuros diminuindo, sempre mantendo o mesmo matiz.
Perguntas frequentes
O que é HSL e por que usá-lo em vez de HEX?
HSL (Matiz, Saturação, Luminosidade) descreve cores em termos intuitivos. Matiz é a posição na roda de cores (0–360°), Saturação é a intensidade (0–100%) e Luminosidade é o brilho (0–100%). É muito mais fácil criar variações de cores em HSL do que em HEX.
O que é #FF0000 em HSL?
Vermelho puro #FF0000 é hsl(0, 100%, 50%). Matiz 0° é vermelho na roda de cores, 100% de saturação significa totalmente saturado, 50% de luminosidade é a cor pura.
O CSS suporta cores HSL?
Sim. O CSS moderno suporta totalmente a notação `hsl()` e `hsla()`. Por exemplo: `color: hsl(217, 91%, 60%);` e `background: hsla(217, 91%, 60%, 0.5);`
O que é #000000 em HSL?
Preto (#000000) é hsl(0, 0%, 0%). Luminosidade em 0% significa preto puro independente do matiz ou saturação.
Posso compartilhar esta ferramenta com meus dados preenchidos?
Sim. A URL é atualizada automaticamente enquanto você digita. Copie da barra de endereço ou use o botão Compartilhar — quem abrir verá seus dados exatos já preenchidos.
Ferramentas relacionadas
Conversor HSL para HEX
Converta valores de cor HSL para códigos HEX instantaneamente. Conversor HSL para HEX com prévia ao vivo. Converta hsl() para HEX para CSS e design.
Calculadora de Proporção
Calcule a proporção, encontre a largura ou altura que falta e redimensione imagens e vídeos mantendo as mesmas proporções. Grátis.
Decodificador Base64
Decodifique strings Base64 para texto simples instantaneamente. Suporta saída Unicode completa com emojis. Decodificador Base64 gratuito.