Conversor HEX para HSL Converta códigos de cor HEX para valores HSL (Matiz, Saturação, Luminosidade).

🎨

Conversor HEX para HSL

Converta códigos de cor HEX para valores HSL (Matiz, Saturação, Luminosidade).

Insira a Cor HEX

Digite um código de cor HEX ou use o seletor de cores para selecionar sua cor.

Leia os Valores HSL

Veja os valores de Matiz (0-360°), Saturação (0-100%) e Luminosidade (0-100%) instantaneamente.

Copie a Saída HSL

Copie o valor da função CSS hsl() para usar diretamente em suas folhas de estilo.

Loading tool...

What Is Conversor HEX para HSL?

Um conversor de HEX para HSL transforma códigos de cor hexadecimais no modelo de cor HSL (Matiz, Saturação, Luminosidade). Diferentemente do RGB, que descreve cores misturando luz vermelha, verde e azul, o HSL descreve cores de uma maneira mais intuitiva para os humanos. A matiz é a cor em si (medida em graus ao redor da roda de cores: 0° é vermelho, 120° é verde, 240° é azul). A saturação descreve a intensidade ou pureza da cor (0% é cinza, 100% é totalmente viva). A luminosidade descreve quão clara ou escura a cor é (0% é preto, 50% é cor pura, 100% é branco). Isso torna o HSL inestimável para criar paletas de cores, ajustar o brilho sem alterar a matiz e gerar esquemas de cores harmônicos. Designers e desenvolvedores frequentemente precisam converter do HEX (o formato padrão da web) para HSL para fazer ajustes significativos. Por exemplo, criar uma sombra mais escura é trivial em HSL - basta reduzir a luminosidade - enquanto no HEX ou RGB, você precisaria ajustar todos os três canais proporcionalmente.

Why Use Conversor HEX para HSL?

Veja a cor dividida em componentes intuitivos de matiz, saturação e luminosidade
Visualização ao vivo da amostra de cor atualizada à medida que você digita o código HEX
Saída pronta para CSS com a função hsl() para uso direto em folhas de estilo
Suporta códigos HEX de 3 e 6 dígitos
Útil para entender e manipular relações de cores

Common Use Cases

Design de Paleta de Cores

Converta as cores HEX da marca para HSL para criar facilmente variações ajustando a saturação e a luminosidade.

Geração de Temas

Crie variantes de temas claros e escuros modificando o valor de luminosidade enquanto mantém a matiz constante.

Propriedades Personalizadas do CSS

Armazene os valores HSL como variáveis CSS para tema de cores flexível: --primaria-h, --primaria-s, --primaria-l.

Ajustes de Acessibilidade

Ajuste os valores de luminosidade para garantir uma relação de contraste suficiente entre o texto e os fundos.

Technical Guide

A conversão de HEX para HSL primeiro decodifica a string hexadecimal em valores RGB (0-255), então transforma em HSL. O algoritmo normaliza o RGB para a faixa de 0-1, encontra os valores máximo e mínimo do canal e computa: Luminosidade = (max + min) / 2. Se max for igual a min, a cor é acromática (cinza) com matiz = 0 e saturação = 0. Caso contrário, Saturação = delta / (1 - |2L - 1|) onde delta = max - min. A matiz depende de qual canal é máximo: se o vermelho for máximo, H = (G-B)/delta; se o verde, H = (B-R)/delta + 2; se o azul, H = (R-G)/delta + 4. O resultado é multiplicado por 60 para converter em graus (0-360). O HSL é uma representação cilíndrica do cubo RGB, o que o torna mais intuitivo para manipulação de cores. Uma distinção importante: a luminosidade do HSL de 50% representa a forma mais viva de qualquer matiz, enquanto 0% é sempre preto e 100% é sempre branco. Isso difere do HSV/HSB onde o valor (brilho) de 100% representa a cor mais viva.

Tips & Best Practices

1
A luminosidade HSL de 50% fornece a versão mais pura de qualquer matiz - útil para cores da paleta base
2
Desaturar (reduzir S) cria tons profissionais e suaves
3
HSL é ideal para tema CSS porque matiz, saturação e luminosidade são ajustáveis independentemente
4
Valores R, G, B iguais em HEX sempre produzem H=0, S=0 em HSL (cinza puro)
5
O CSS moderno suporta hsl() nativamente em todos os navegadores - nenhuma conversão necessária em tempo de execução

Related Tools

Conversor HEX para RGB

Converta códigos de cor HEX em valores RGB instantaneamente com uma pré-visualização ao vivo.

🎨 Color Tools

Conversor HSL para HEX

Converta valores de cor HSL em códigos HEX com controles deslizantes interativos.

🎨 Color Tools

Conversor RGB para HSL

Converta valores RGB para o formato de cor HSL com controles deslizantes interativos.

🎨 Color Tools

Seletor de Cores

Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.

🎨 Color Tools

Gerador de Matizes de Cor

Gere matizes mais escuros de qualquer cor com quantidade de passos ajustável.

🎨 Color Tools

Frequently Asked Questions

Q O que é o modelo de cor HSL?

HSL significa Matiz (ângulo da cor 0-360°), Saturação (intensidade 0-100%) e Luminosidade (brilho 0-100%). É uma representação cilíndrica que é mais intuitiva para os humanos do que RGB.

Q Por que converter HEX para HSL?

HSL facilita a criação de variações de cores. Você pode clarear, escurecer ou desaturar uma cor alterando um único valor, enquanto em HEX você precisaria modificar todos os seis caracteres.

Q O hsl() é suportado no CSS?

Sim, o hsl() é suportado em todos os navegadores modernos e vem sendo desde o IE9. O CSS moderno também suporta a nova sintaxe separada por espaços: hsl(217 91% 60%).

Q Como escurecer uma cor HEX usando HSL?

Converta HEX para HSL, então reduza o valor de Luminosidade. Por exemplo, hsl(217, 91%, 60%) escurecido para hsl(217, 91%, 40%) cria um tom mais escuro do mesmo azul.

Q Qual é a diferença entre HSL e HSV?

HSL e HSV usam matiz e saturação, mas diferem no terceiro componente. HSL usa luminosidade (50% é cor pura), enquanto HSV usa valor/brilho (100% é cor pura). HSL é mais comum em CSS.

About This Tool

Conversor HEX para HSL is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.