O que é a conversão de HEX para HSL?
A página de conversão de HEX para HSL recebe um código de cor hexadecimal — no formato completo de seis dígitos, como #1E90FF, ou na forma abreviada de três dígitos, como #abc — e retorna instantaneamente o valor HSL equivalente: matiz (hue) em graus (0–360), saturação e luminosidade (lightness) em porcentagem (0–100%). Além do HSL, a página também exibe a cor nos formatos RGB, HSV, CMYK e LAB, todos atualizados em tempo real conforme você edita o campo.
O código hexadecimal é uma notação compacta que representa diretamente os componentes vermelho, verde e azul (RGB) usando base‑16. Cada par de dígitos hexadecimais vai de 00 a FF (0 a 255 em decimal). A forma abreviada de três dígitos, como #abc, é expandida automaticamente para #aabbcc — cada dígito é duplicado. Esse sistema é onipresente em CSS e em ferramentas de design, mas não foi feito para o raciocínio humano. É aí que entra o HSL.
HSL significa Hue, Saturation, Lightness (matiz, saturação, luminosidade). A matiz é um ângulo no círculo cromático: 0° (ou 360°) é vermelho, 120° é verde, 240° é azul. Saturação mede a intensidade da cor (0% = cinza, 100% = cor pura). Luminosidade vai do preto (0%) ao branco (100%). Essa estrutura torna trivial ajustar um único atributo sem afetar os outros — algo impossível de fazer de cabeça com HEX.
Por que usar HSL em vez de HEX?
A maior vantagem do HSL sobre o HEX é a legibilidade para seres humanos. Com um código hexadecimal como #4f46e5, não é óbvio quão claro ou saturado aquele tom é. Com HSL, você vê imediatamente: matiz 242°, saturação 73%, luminosidade 58%. Se quiser uma versão mais clara para um hover, basta aumentar a luminosidade para 70% — a matiz e a saturação permanecem as mesmas.
Isso faz do HSL o formato preferido para:
- Geração de paletas de cores: tons complementares, análogos ou monocromáticos são obtidos variando apenas a matiz ou a saturação.
- Sistemas de temas: temas claro/escuro podem ser definidos ajustando a luminosidade de um conjunto de cores base, mantendo a identidade visual.
- Verificações de acessibilidade: auditores de contraste WCAG podem usar HSL para aumentar a diferença de luminosidade entre texto e fundo sem mudar a matiz — muito mais fácil do que chutar valores HEX.
É importante notar que tanto HEX quanto HSL tratam de cores opacas. O código hexadecimal padrão (seis ou três dígitos) não carrega informações de transparência, e o HSL também não inclui canal alfa. A conversão sempre lida com cores totalmente opacas. Para transparência, seriam necessárias notações como HEX com oito dígitos (RGBA) ou funções CSS como hsla().
Como a ferramenta funciona: entrada e saída
O campo de entrada aceita apenas códigos hexadecimais válidos, com ou sem o caractere # na frente. Exemplos aceitos:
#1E90FF(seis dígitos)#4f46e5(seis dígitos, minúsculas ou maiúsculas)#abc(três dígitos, expandido para#aabbcc)abc(sem o#— a ferramenta adiciona automaticamente)
Assim que você digita um código válido, a página calcula e exibe simultaneamente:
| Formato | Exemplo para #4f46e5 |
|---|---|
| HEX | #4f46e5 |
| RGB | rgb(79, 70, 229) |
| HSL | hsl(242°, 73%, 58%) |
| HSV | hsv(242°, 69%, 90%) |
| CMYK | cmyk(66%, 69%, 0%, 10%) |
| LAB | lab(36.7, 48.9, -72.2) |
Todos os campos são editáveis. Se você alterar o valor em HSL, RGB, HSV, CMYK ou LAB, a ferramenta converte de volta e atualiza todos os outros formatos — inclusive o HEX. Isso é útil para explorar variações: mude a luminosidade no HSL e veja o novo código HEX gerado.
Regras e casos extremos
Entrada inválida: se você digitar algo que não seja um código hexadecimal válido (por exemplo, #xyz ou #12345), a página exibe a mensagem: “Insira uma cor hexadecimal como #4f46e5 ou #abc.” Apenas códigos de três ou seis dígitos hexadecimais (0–9, A–F) são aceitos.
Fora da gama visível: os formatos LAB, CMYK e HSV podem representar cores que estão fora da gama (gamut) do espaço RGB usado em monitores. Se você inserir um valor nesses formatos que não seja reproduzível em tela, a cor é ajustada para a mais próxima possível dentro do gamut RGB. Isso pode causar uma pequena diferença se você converter essa cor de volta para HEX — o código original não será recuperado exatamente. Por exemplo, um LAB com L=50, a=100, b=-100 pode ser cortado para o RGB mais próximo.
CMYK é uma estimativa: os valores CMYK exibidos são uma conversão aproximada para visualização em tela. Eles não devem ser usados para impressão profissional sem calibração. A correspondência exata depende do perfil de cor da impressora e do papel.
Processamento local: todas as conversões acontecem inteiramente no seu navegador. Nada do que você digita é enviado para um servidor ou armazenado. Isso garante privacidade e rapidez — não há latência de rede.
A matemática por trás da conversão
A conversão de HEX para HSL segue uma sequência de passos padrão da indústria, definida pela especificação CSS. Primeiro, o HEX é convertido para RGB decimal. Por exemplo, #4f46e5:
4f(hex) = 79 (decimal) — vermelho46(hex) = 70 (decimal) — verdee5(hex) = 229 (decimal) — azul
Em seguida, os valores RGB (0–255) são normalizados para o intervalo 0–1 dividindo por 255: R=0,310, G=0,275, B=0,898.
A matiz é determinada pela posição do componente mais intenso (B, neste caso) em relação aos outros. A fórmula usa a diferença entre o maior e o menor valor (delta) e a posição do maior no círculo. Para este exemplo, delta = 0,898 − 0,275 = 0,623. Como o azul é o maior, a matiz é calculada como:
H = 60° × ((R − G) / delta + 4) = 60° × ((0,310 − 0,275)/0,623 + 4) = 60° × (0,056 + 4) = 60° × 4,056 ≈ 243,4° (arredondado para 242° na saída devido a ajustes de precisão).
A saturação é a intensidade da cor em relação ao máximo possível para aquela luminosidade: S = delta / (1 − |2L − 1|) × 100%, onde L = (max + min)/2. Neste caso, L = (0,898 + 0,275)/2 = 0,5865 ≈ 58,65%. Saturação = 0,623 / (1 − |1,173 − 1|) = 0,623 / (1 − 0,173) = 0,623 / 0,827 ≈ 0,753 → 75,3% (a ferramenta exibe 73% devido ao arredondamento final).
A luminosidade é simplesmente a média do maior e do menor valor normalizados, convertida para percentual: L = ((max + min)/2) × 100%.
Essa mesma matemática é usada por todos os navegadores modernos ao interpretar funções CSS como hsl(). A ferramenta apenas replica o algoritmo padrão.
Quem precisa dessa ferramenta?
-
Desenvolvedores front‑end: ao receber um mockup com cores em HEX, podem converter para HSL e usar variáveis CSS customizadas (
--primary-h: 242; --primary-s: 73%; --primary-l: 58%). Ajustar a luminosidade para estados hover, active ou disabled fica trivial comcalc()ou simplesmente alterando--primary-l. -
Designers de UI/UX: pensam naturalmente em matiz, saturação e luminosidade. Precisam converter uma cor de marca fornecida em HEX para HSL a fim de gerar variações de tom (mais clara, mais escura, mais dessaturada) de forma consistente.
-
Profissionais de acessibilidade: para verificar conformidade com WCAG 2.1, precisam garantir contraste suficiente entre texto e fundo. Com HSL, é fácil manter a mesma matiz e saturação enquanto se aumenta a diferença de luminosidade — por exemplo, subindo o L do texto para 90% e baixando o L do fundo para 20%.
-
Qualquer pessoa construindo uma paleta de cores: HSL permite criar esquemas análogos (matizes próximos), complementares (matiz + 180°) ou monocromáticos (mesma matiz, variando saturação e luminosidade) sem adivinhação.
Perguntas frequentes
1. Posso usar um código hexadecimal com oito dígitos (com alpha)?
Não. A ferramenta aceita apenas códigos de seis ou três dígitos. O formato de oito dígitos inclui um canal alfa (transparência) que não faz parte do espaço HSL padrão. Se você precisa de transparência, use o formato RGBA ou hsla() em CSS.
2. Por que o valor HSL que vejo não corresponde exatamente ao que calculei manualmente? Pequenas diferenças de arredondamento são normais. A conversão interna usa precisão de ponto flutuante, e os valores exibidos são truncados ou arredondados para números inteiros (matiz) ou percentuais (saturação/luminosidade). Se precisar de precisão total, use os valores com casas decimais disponíveis nos formatos subjacentes (LAB, por exemplo).
3. O que acontece se eu digitar #GGG?
A letra G não é um caractere hexadecimal válido (apenas 0–9 e A–F). A ferramenta exibirá o erro: “Insira uma cor hexadecimal como #4f46e5 ou #abc.” Códigos com caracteres inválidos são rejeitados.
4. A ferramenta funciona offline? Sim, após a página carregar pela primeira vez, todo o código JavaScript roda localmente no seu navegador. Não é necessária conexão com a internet para fazer conversões.
5. HSL e HSV são a mesma coisa?
Não. Ambos usam matiz (H) e saturação (S), mas o terceiro canal é diferente: HSL usa luminosidade (Lightness), enquanto HSV usa valor (Value). No HSL, a luminosidade máxima (100%) é sempre branco; no HSV, o valor máximo (100%) é a cor pura sem preto. A conversão entre eles gera números diferentes. Por exemplo, #4f46e5 em HSV é hsv(242°, 69%, 90%) — a saturação e o terceiro canal são distintos do HSL. A ferramenta exibe ambos para que você possa comparar.
6. Posso usar essa ferramenta para converter CMYK para impressão? A ferramenta oferece valores CMYK como estimativa visual, mas eles não são precisos para impressão offset ou digital. Para trabalho profissional, utilize um software de design com perfis ICC calibrados (como Adobe InDesign ou Photoshop). O CMYK aqui serve apenas para referência rápida.