O que é a conversão HEX para HSL?
A página «HEX para HSL» recebe um código de cor hexadecimal — completo de seis dígitos como #1E90FF ou na forma abreviada de três dígitos como #abc — e devolve de imediato o valor HSL equivalente: tonalidade (hue) em graus (0–360), saturação em percentagem (0–100%) e luminosidade (lightness) também em percentagem (0–100%). Simultaneamente, a página mostra a mesma cor nos formatos RGB, HSV, CMYK e LAB, permitindo copiar o valor que precisar.
A ferramenta executa toda a conversão dentro do seu navegador. Nenhum dado é enviado para um servidor nem armazenado. Isto significa que pode usar a página com códigos de cor confidenciais de projectos internos sem qualquer preocupação de privacidade.
Diferenças fundamentais entre HEX e HSL
HEX é uma notação RGB crua. Um código hexadecimal de seis dígitos (ou três em forma abreviada) codifica directamente os valores de vermelho, verde e azul em base 16. Por exemplo, #4f46e5 representa R=79 (4f em decimal), G=70 (46) e B=229 (e5). É compacto e muito usado em CSS e ferramentas de design, mas não é intuitivo para fazer ajustes manuais porque uma pequena alteração num dos componentes pode afectar de forma imprevisível a cor percebida.
HSL foi concebido para o raciocínio humano. A tonalidade (hue) é medida em graus num círculo cromático: 0° = vermelho, 120° = verde, 240° = azul. A saturação controla a intensidade da cor (0% = cinzento, 100% = cor pura). A luminosidade varia do preto (0%) ao branco (100%). Modificar apenas a luminosidade mantém a tonalidade inalterada — algo impossível de fazer directamente em HEX sem conhecer o algoritmo de conversão. Esta característica torna HSL o formato de eleição para gerar paletas de cores, criar temas claro/escuro e produzir variações dinâmicas de cor em interfaces.
| Propriedade | HEX (6 dígitos) | HSL |
|---|---|---|
| Representação | #rrggbb (base 16) |
hsl(240°, 75%, 58%) |
| Componentes | vermelho, verde, azul | tonalidade, saturação, luminosidade |
| Facilidade de ajuste humano | Baixa: alterar um componente altera a cor de forma não linear | Alta: ajustar luminosidade ou saturação mantém a tonalidade |
| Canal alfa | Não suportado (sem transparência) | Não suportado (sem transparência) |
Ambos os formatos lidam exclusivamente com cores opacas. Não existe canal alfa nem em HEX nem em HSL — a conversão trata sempre de cores totalmente opacas.
Como funciona o algoritmo de conversão
A conversão de HEX para HSL segue um processo intermédio através de RGB. Primeiro, o código hexadecimal é dividido nos pares de dígitos correspondentes ao vermelho, verde e azul, convertendo cada par para o valor decimal (0–255). Para a forma abreviada de três dígitos (ex.: #abc), cada dígito é duplicado: #aabbcc.
De seguida, os valores RGB são normalizados para o intervalo dividindo cada um por 255. A partir daí, calcula‑se a luminosidade (L) como a média do maior e do menor dos três componentes normalizados:
L = (max(R,G,B) + min(R,G,B)) / 2
A saturação (S) depende da luminosidade e da diferença entre máximo e mínimo (croma). Se o máximo e o mínimo forem iguais (cor acinzentada), a saturação é 0%. Caso contrário:
S = croma / (1 - |2L - 1|)
Finalmente, a tonalidade (H) é calculada com base em qual dos componentes RGB é o máximo. O resultado é um ângulo entre 0° e 360°. Estes valores são depois apresentados em graus (H) e percentagens (S e L).
O algoritmo emprega arredondamentos padrão para apresentar valores inteiros, mas os cálculos internos mantêm precisão para evitar erros de acumulação. É o mesmo algoritmo usado pelos navegadores na função CSS hsl().
Casos especiais e limitações
Entrada inválida
A página aceita apenas códigos hexadecimais válidos de seis ou três dígitos, com ou sem o prefixo #. Se introduzir um valor inválido (por exemplo, #xyz ou 12345), a ferramenta mostra a mensagem de erro: “Insira uma cor hexadecimal como #4f46e5 ou #abc.” Não há qualquer conversão até o formato ser corrigido.
Cores fora do gamut visível
Se alternar para outro espaço de cor (por exemplo, LAB ou CMYK) e introduzir um valor que esteja fora do gamut RGB (ou seja, que não pode ser representado correctamente num ecrã), a página ajusta a cor para a mais próxima que seja exibível. Isto pode provocar uma ligeira diferença na cor quando a converte de volta para HEX. O ajuste segue algoritmos de compressão de gamut comuns, mas não há garantia de reversibilidade exacta entre todos os espaços.
Valores CMYK
Os valores CMYK apresentados são uma estimativa para ecrã. Não devem ser usados para impressão profissional sem calibração adequada. O processo de conversão de RGB para CMYK é modelado, mas cada impressora e suporte tem o seu próprio perfil de cor. A página não substitui um software de gestão de cor.
Ausência de canal alfa
Como referido, nem HEX (na forma padrão) nem HSL incluem transparência. Se precisar de trabalhar com cores semi‑transparentes, terá de usar o formato RGBA (rgba(79,70,229,0.5)) ou notação #rrggbbaa (HEX com oito dígitos), que não é suportada por esta página.
Para quem é esta ferramenta e casos de uso
- Desenvolvedores front‑end que escrevem CSS e precisam de converter uma cor HEX de um mockup de design para HSL, de forma a poderem ajustar facilmente a luminosidade para estados hover ou variantes de tema. Com HSL, criar um tom mais escuro para
:hoverresume‑se a baixar a luminosidade uns 10%, sem que a tonalidade se altere. - Designers de UI/UX que pensam em termos de tonalidade, saturação e luminosidade e precisam de igualar uma cor de marca dada em HEX. Podem depois usar o valor HSL para definir uma paleta completa com cores análogas ou complementares.
- Qualquer pessoa a construir um sistema de cores (paletas, temas claro/escuro) — o HSL permite gerar variações monocromáticas modificando apenas a luminosidade, mantendo a mesma tonalidade.
- Auditores de acessibilidade web que verificam rácios de contraste (WCAG). Com HSL, é mais fácil perceber se uma cor tem luminosidade suficiente para garantir contraste com um fundo preto ou branco, sem ter de decorar a relação entre componentes RGB.
Exemplo prático
Imagine que o designer lhe entrega um HEX #1E90FF (azul Dodger). Quer criar uma versão mais clara para um fundo de cartão. Com a ferramenta, descobre que o HSL é hsl(210°, 100%, 56%). Para clarear, mantém a tonalidade e a saturação e aumenta a luminosidade para 80%: hsl(210°, 100%, 80%). O resultado visual é coerente. Fazer o mesmo directamente em HEX exigiria tentativa e erro ou conhecimentos aprofundados de mistura de cor.
Perguntas frequentes
Porque é que a tonalidade (hue) é medida em graus e não em percentagem? A tonalidade representa uma posição num círculo cromático. Um círculo tem 360°, por isso um valor de 0° a 360° é natural. As percentagens (0%–100%) são usadas para saturação e luminosidade porque estes componentes têm um mínimo e máximo absolutos (preto, branco, cinzento). A tonalidade não tem um máximo absoluto — o círculo fecha em si mesmo.
O que acontece se introduzir um código hexadecimal de menos de três caracteres?
A página aceita apenas seis dígitos (ex.: #1E90FF) ou três dígitos (ex.: #abc). Qualquer outra entrada é considerada inválida e mostra o erro descrito acima. Não há suporte para códigos de um ou dois dígitos.
Posso usar os valores CMYK obtidos para impressão profissional? Não directamente. Os valores CMYK são uma estimativa de ecrã baseada num modelo genérico. Cada impressora, papel e perfil ICC produz resultados diferentes. Para impressão profissional, deve usar um software de gestão de cor que permita definir o perfil exacto do dispositivo e do suporte.
Qual é a diferença entre HSL e HSV? Ambos partilham a tonalidade (H), mas definem de forma diferente a saturação e o terceiro componente. O HSV usa “valor” (brightness) que vai de 0 (preto) ao máximo de cor (intensidade total). O HSL usa “luminosidade” que vai de 0 (preto) a 100% (branco), passando pela cor pura a 50%. Isto significa que o HSL permite clarear uma cor até ao branco, enquanto no HSV clarear uma cor faz‑a tender para a cor pura e depois para o branco, com comportamentos diferentes. O HSL é geralmente preferido para geração de paletas porque a luminosidade é mais intuitiva para ajustes de claro/escuro.
Os dados que introduzo são enviados para algum servidor? Não. Toda a conversão ocorre localmente no seu navegador. Nenhum código de cor é transmitido para a Internet. Pode usar a página com cores confidenciais de projectos privados sem risco.
O código hexadecimal pode ser introduzido sem o prefixo #?
Sim. A página aceita 1E90FF ou abc exactamente como aceita #1E90FF ou #abc. O prefixo é opcional, mas a ferramenta reconhece e ignora se estiver presente. A validação verifica apenas o comprimento e os caracteres hexadecimais válidos (0–9, A–F, a–f).