Conversor de HSL para HEX

Conversão de HSL para HEX: o propósito principal da página

Esta página converte valores HSL — matiz em graus (0–360), saturação em porcentagem e luminosidade em porcentagem — no código hexadecimal (HEX) equivalente. Basta inserir os três componentes, como 243, 75%, 59%, e o código de seis dígitos (por exemplo, #4f46e5) é exibido instantaneamente. A atualização ocorre em tempo real enquanto você digita ou ajusta qualquer campo. Se os canais RGB resultantes couberem cada um em um único dígito hexadecimal, a notação abreviada de três dígitos também aparece — #abc em vez de #aabbcc. Todos os outros campos de cor (RGB, HSV, CMYK, LAB) são recalculados simultaneamente, sem nenhum atraso ou ida ao servidor.

Por que HSL é o modelo ideal para designers e desenvolvedores

Diferente de RGB ou HEX, o HSL foi projetado para o raciocínio humano sobre cor. A matiz define a tonalidade pura, a saturação controla a intensidade e a luminosidade ajusta o brilho sem distorcer a matiz. Isso torna HSL a escolha natural para geração de paletas e temas — você pode escurecer ou clarear um tom mantendo a família cromática intacta.

A conversão para HEX é direta e sem perdas dentro do gamute sRGB, ao contrário de conversões envolvendo LAB ou CMYK, que podem exigir ajustes para cores fora do alcance. Não há necessidade de aproximação ou clipping: um HSL válido sempre produz um HEX válido e vice-versa dentro do mesmo espaço de cor. Essa simplicidade é o que distingue esta página de ferramentas genéricas de conversão.

A mecânica da conversão: de HSL para RGB e depois para HEX

Para entender o que acontece nos bastidores, é útil conhecer o algoritmo. A conversão segue duas etapas:

1. HSL → RGB: a fórmula padrão da CSS e de bibliotecas de cor é usada. Primeiro, a saturação e a luminosidade são convertidas de porcentagens para frações decimais. Depois, funções auxiliares calculam os valores intermediários de croma, segundo maior e matiz base. As três componentes RGB (vermelho, verde, azul) são obtidas em uma faixa de 0 a 1.

2. RGB → HEX: cada canal é multiplicado por 255 e arredondado para o inteiro mais próximo. Cada inteiro é convertido para dois dígitos hexadecimais (00 a FF). A string resultante é prefixada com #.

Exemplo com 243, 75%, 59%:

• Matiz 243° → setor azul-violeta.
• Saturação 75% → cor vibrante, sem acinzentamento.
• Luminosidade 59% → tom médio, nem muito claro nem muito escuro.
• Após o cálculo, obtém-se os valores RGB aproximados de 31, 70, 229 → #1f46e5. Na prática, a página exibe #4f46e5 porque o arredondamento exato depende da implementação precisa da fórmula; o resultado real para 243, 75%, 59% é #4f46e5, um roxo-azulado típico (conhecido como "Indigo" em muitos frameworks CSS).

Tratamento de erros e validação de entrada

A página impõe limites rigorosos nos campos de entrada. O matiz deve estar entre 0 e 360; saturação e luminosidade, entre 0% e 100%. Se qualquer valor estiver fora desses intervalos ou se a formatação estiver incorreta — por exemplo, escrever 243, 75, 59 sem o sinal de porcentagem, ou -10, 50%, 30% — o sistema exibe a seguinte mensagem de erro:

"Insira HSL como matiz 0–360 com duas porcentagens, por exemplo, 243, 75%, 59%."

Não há conversão parcial ou tolerância a erros de digitação. Um campo vazio também impede a atualização dos demais. Todo o processamento ocorre diretamente no navegador via JavaScript; nenhum dado é enviado a servidores, garantindo privacidade total.

Aplicações práticas: da paleta ao CSS e contraste de acessibilidade

1. Exportação de paletas para CSS

Designers que trabalham com HSL em ferramentas como Figma ou Sketch frequentemente precisam fornecer HEX para desenvolvedores front-end. Esta página elimina a etapa manual de conversão. Basta copiar os parâmetros HSL do design system e colá-los no campo correspondente. O HEX é gerado instantaneamente, seja para variáveis CSS (--primary: #4f46e5), seja para propriedades inline.

2. Ajuste de contraste para acessibilidade (WCAG)

A luminosidade em HSL é uma ferramenta poderosa para atender aos critérios de contraste da WCAG. Você pode manter a matiz e a saturação fixas enquanto altera apenas a luminosidade até que a taxa de contraste entre texto e fundo atinja 4,5:1 (AA) ou 7:1 (AAA). Depois de encontrar o valor ideal em HSL, converte-se para HEX e aplica-se no CSS. Essa abordagem é muito mais intuitiva do que tentar adivinhar o HEX escurecendo ou clareando manualmente.

3. Handoff entre design e desenvolvimento

Ao receber especificações de cores em HSL, o desenvolvedor insere os valores na página e obtém o HEX correspondente. Se o designer enviar hsl(200, 80%, 60%), a página retorna #47a3ff. Não há dúvida sobre qual código usar. O mesmo vale para a notação abreviada de três dígitos quando aplicável, como #abc para cores pastel que tenham canais iguais em cada par.

Limitações do HEX em comparação com HSL

O código hexadecimal de seis dígitos (#RRGGBB) carrega três canais de 8 bits cada, totalizando 16,7 milhões de cores possíveis. No entanto, faltam duas coisas importantes:

• Canal alfa: a forma de oito dígitos (#RRGGBBAA) existe, mas é menos suportada em ferramentas mais antigas. A página não gera automaticamente a versão com alfa; para transparência, o usuário deve recorrer a RGBA ou a notação CSS moderna color-mix().
• Dimensão de luminosidade direta: no HEX, não há um valor único que represente "clarear" ou "escurecer" — você precisa ajustar os três canais manualmente, o que geralmente distorce a matiz. HSL oferece controle direto sobre a luminosidade sem afetar a tonalidade.

A saída CMYK mostrada na página é uma estimativa na tela e pode diferir dos valores reais de impressão profissional. Isso ocorre porque o espaço de cor CMYK depende do perfil da impressora e do tipo de papel; a conversão aqui é apenas um referencial aproximado para simulação.

Perguntas frequentes (FAQ)

1. O que significa a notação de três dígitos, como #abc?

Ela é uma forma abreviada válida em CSS quando cada par de dígitos hexadecimais é idêntico. Por exemplo, #aabbcc pode ser escrito como #abc. A página exibe essa versão quando os canais RGB resultantes são iguais em cada par: R = 0xAA, G = 0xBB, B = 0xCC. Isso ocorre com frequência em cores pastel ou padrão.

2. Posso confiar no valor CMYK gerado para impressão?

Não. O CMYK exibido é calculado por uma fórmula genérica que assume um perfil sRGB simples. Para impressão profissional, utilize perfis ICC específicos e softwares de gerenciamento de cor. A página deixa claro que é uma estimativa — nunca use esse valor diretamente em um fluxo de impressão sem validação.

3. E se eu inserir valores HSL fora dos intervalos definidos?

A página rejeita qualquer entrada fora de 0–360 para matiz, 0–100% para saturação e luminosidade. Você verá a mensagem de erro citada acima. Também é obrigatório incluir o símbolo de porcentagem nos dois últimos campos; 50 sem % é tratado como inválido.

4. A página suporta conversão reversa (HEX → HSL)?

Não. Esta página é dedicada exclusivamente à conversão HSL → HEX. Para o caminho inverso, utilize a página irmã "hex-to-hsl" disponível no mesmo site. Cada direção tem seu próprio tratamento de entrada e validação.

5. Por que a cor exibida na tela pode parecer diferente da cor impressa?

Monitores usam o modelo aditivo RGB (HEX é uma representação dele), enquanto impressoras usam o modelo subtrativo CMYK. Mesmo dentro do sRGB, variações de calibração de tela e perfil de cor podem causar diferenças. A conversão HSL → HEX é numericamente exata dentro do sRGB, mas a percepção visual depende do dispositivo.

6. O código HEX gerado pode ser usado diretamente em CSS?

Sim. Qualquer valor HEX de seis dígitos gerado pela página é válido em CSS, HTML e na maioria das bibliotecas JavaScript. Basta copiar o código com o # e aplicá-lo à propriedade color, background-color, border-color, etc. A página não adiciona espaços ou caracteres extras — o que você vê é o que cola.