Softonic

Conversor de HEX para HSL

Etapa 1 / 2
Próximo

HSL, matiz, saturação, luminosidade, é a notação de cor mais amigável para design em CSS. Uma vez que você conhece o HSL da cor da sua marca, gerar matizes (mais luminosidade) e sombras (menos luminosidade) se torna um ajuste de dois segundos em vez de uma viagem de volta ao seletor de cores. Cole um HEX e este conversor retorna a tripla HSL pronta para hsl() em folhas de estilo.

Como converter HEX para HSL

  1. 1

    Insira um valor HEX

    Cole `#1e88e5`, `1e88e5`, ou a forma curta `#09f`.

  2. 2

    Leia a tripla HSL

    A saída é matiz 0-360°, saturação %, luminosidade %, pronta para `hsl()` ou `hsla()`.

  3. 3

    Explore a paleta

    Visualize matizes (maior L) e sombras (menor L) em matiz consistente para construir uma escada.

  4. 4

    Copie o CSS

    Pegue a string `hsl(210, 79%, 50%)` pronta para ser inserida em uma folha de estilo.

HSL para design do mundo real

HSL é um remapeamento cilíndrico de RGB. A mesma cor física expressa em qualquer um dos sistemas tem a mesma saída de pixel; HSL apenas organiza os parâmetros em torno de como os humanos pensam sobre cor.

O que cada canal significa

Canal Faixa O que controla
Matiz 0-360° Onde na roda de cores (vermelho, amarelo, verde…)
Saturação 0-100% Cinza (0%) a cor total (100%)
Luminosidade 0-100% Preto (0%) a cor pura (50%) a branco (100%)

Marcos de matiz

Matiz Família de cores Exemplo
0° Vermelho hsl(0, 100%, 50%) = #ff0000
30° Laranja
60° Amarelo hsl(60, 100%, 50%) = #ffff00
120° Verde hsl(120, 100%, 50%) = #00ff00
180° Ciano
210° Azul celeste Azul clássico de link
240° Azul hsl(240, 100%, 50%) = #0000ff
270° Roxo
300° Magenta

Por que os designers preferem HSL para paletas

Escolha uma matiz de marca, depois mantenha a matiz e a saturação fixas e varie a luminosidade em passos de 10%. Você obtém uma escala de cores de 9 passos (10, 20, 30, … 90% L) que um sistema de design pode referenciar como primary-100 até primary-900. Ferramentas como Tailwind CSS e Material usam essa estrutura nativamente.

Limitações

A luminosidade HSL não é perceptivamente uniforme. Amarelo a 50% L parece brilhante; azul a 50% L parece escuro. Para paletas perceptivamente uniformes, mude para OKLCH ou LCH (Módulo de Cor CSS 4).

Perguntas frequentes

Saturação e luminosidade são porcentagens por definição; a especificação CSS exige o sufixo % para ambos. Matiz é um ângulo (opcionalmente com deg, rad, grad ou turn).

Ambos são cilíndricos. HSL usa luminosidade onde 50% é a matiz pura e 100% é branco. HSV usa valor onde 100% é a matiz pura e não há extremo branco. Seletor do Photoshop e Figma usam HSV por padrão.

Sim. O CSS moderno suporta hsl(210 79% 50% / 0.5) com uma sintaxe de barra, e navegadores mais antigos usam hsla(210, 79%, 50%, 0.5) com vírgulas.

A conversão de ida e volta arredonda a saturação e a luminosidade para o percentual inteiro mais próximo. Se você precisar de uma conversão exata, mantenha os valores HSL com uma casa decimal.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas