Entrada e saída da ferramenta
A página recebe três valores de um modelo HSL: tom (hue) em graus de 0 a 360, saturação em percentagem (0–100%) e luminosidade também em percentagem (0–100%). O resultado imediato é o código hexadecimal equivalente, sempre no formato de seis algarismos (#4f46e5) ou, quando cada canal RGB pode ser representado por um único algarismo hexadecimal, na notação abreviada de três algarismos (por exemplo, #abc). A conversão é instantânea: enquanto o utilizador escreve ou ajusta os valores, o campo HEX é atualizado sem qualquer atraso. Além do HEX, todos os outros campos de cores — RGB, HSV, CMYK e LAB — são recalculados em simultâneo, permitindo uma visão completa da cor nos diferentes espaços.
O formato de entrada esperado é simples: os três números separados por vírgulas, com os dois últimos acompanhados do sinal %. Exemplo válido: 243, 75%, 59%. Se o utilizador omitir o sinal de percentagem, usar um tom fora do intervalo ou escrever os valores de forma incorrecta, a ferramenta não tenta adivinhar — mostra antes uma mensagem de erro clara: “Introduza HSL como tom 0–360 com duas percentagens, ex: 243, 75%, 59%.”.
O que diferencia esta página das outras
Muitas ferramentas online convertem entre espaços de cor. Esta página dedica-se exclusivamente à conversão de HSL para HEX, e essa especialização não é arbitrária. O modelo HSL foi concebido para ser intuitivo para o ser humano: alterar a luminosidade mantém o tom intacto, o que torna o HSL ideal para gerar paletas, temas e gradientes. O HEX, por seu lado, é a notação hexadecimal do modelo RGB — seis algarismos (ou três na forma abreviada) que representam directamente as componentes vermelha, verde e azul.
A diferença fundamental está na natureza da conversão: é directa e sem perdas dentro da gama sRGB. Ao contrário do que acontece com conversões que envolvem espaços como LAB ou CMYK, onde cores fora da gama de um dispositivo podem ser ajustadas (gamut clipping), a passagem de HSL para HEX nunca sai do espaço sRGB. Isto significa que o código hexadecimal que obtém corresponde exactamente aos valores HSL que introduziu, sem aproximações nem alterações de tonalidade. Para designers e programadores que trabalham com CSS, esta fidelidade é essencial — não há surpresas quando o HEX gerado é colocado num ficheiro de estilo.
O processo de conversão passo a passo
A conversão de HSL para HEX passa obrigatoriamente pelo espaço RGB intermédio. O algoritmo clássico, descrito na especificação CSS e utilizado por esta ferramenta, segue estes passos:
- Normalizar os valores de entrada — o tom é dividido por 360 para obter um valor entre 0 e 1; a saturação e a luminosidade são divididas por 100 para ficarem entre 0 e 1.
- Calcular os canais RGB — existem fórmulas que, a partir de
H,SeL, produzemR,GeBreais entre 0 e 1. Por exemplo, para um tom de 243°, saturação 75% e luminosidade 59%:H = 243/360 = 0,675S = 0,75L = 0,59- Aplicando as fórmulas obtém-se
R ≈ 0,310,G ≈ 0,275,B ≈ 0,898.
- Multiplicar cada canal por 255 e arredondar —
R = 79,G = 70,B = 229. - Converter cada inteiro para hexadecimal — 79 em base 16 é
4F, 70 é46, 229 éE5. O resultado é#4f46e5(as letras podem ser maiúsculas ou minúsculas; a ferramenta usa minúsculas por omissão).
Se todos os três valores RGB forem múltiplos de 17 (como 0, 51, 102, 153, 204, 255), o código pode ser abreviado para três algarismos. Por exemplo, rgb(255, 170, 0) corresponde a #fa0 (e não #ffaa00). Esta página mostra a forma abreviada sempre que ela é válida.
Regras de validação e mensagens de erro
A ferramenta impõe limites rigorosos nos valores de entrada porque o modelo HSL só faz sentido dentro desses intervalos. Um tom inferior a 0 ou superior a 360 não corresponde a nenhuma cor no círculo cromático; saturação ou luminosidade abaixo de 0% ou acima de 100% estão fora do espaço definido.
Quando o utilizador introduz algo que não respeita estas regras — por exemplo, 450, 50%, 50% ou 120, 80% (faltando o terceiro valor) — a página não tenta interpretar parcialmente nem assume valores por omissão. Em vez disso, mostra a mensagem de erro já mencionada. Isto evita ambiguidades: uma cor inválida não deve gerar um código hexadecimal enganador.
Além da validação de intervalo, a página verifica o formato da string. Se o utilizador escrever 120 50% 50% sem vírgulas ou 120, 0.5, 0.5 em vez de percentagens, o erro é o mesmo. A mensagem inclui um exemplo concreto para que o utilizador corrija rapidamente a entrada.
Para quem é esta ferramenta
Designers que constroem paletas de cores usando o modelo HSL — por exemplo, mantendo a saturação constante e variando a luminosidade para criar tons claros e escuros — precisam do código HEX para implementar essas cores em código ou em ferramentas de design como Figma, Sketch ou Adobe XD. A conversão imediata poupa o passo de abrir um selector de cores separado.
Programadores front‑end que recebem valores HSL a partir de ficheiros de design e precisam de os traduzir para propriedades CSS como background-color, color ou border-color beneficiam da rapidez da página. Em vez de fazerem contas manuais ou recorrerem a bibliotecas JavaScript, escrevem ou colam os valores e copiam o HEX.
Qualquer pessoa que esteja a ajustar temas ou a aplicar rácios de contraste de acessibilidade (WCAG) pode usar a luminosidade do HSL para controlar o brilho de uma cor mantendo o tom, e depois converter o resultado para HEX para uso em produção. O WCAG exige rácios de contraste específicos entre texto e fundo; manipulando a luminosidade no HSL, o designer consegue atingir o rácio desejado sem perder a identidade cromática.
Limitações a ter em conta
O código hexadecimal de seis algarismos não suporta canal alfa, ao contrário da notação RGBA ou HSLA. Se precisar de transparência, terá de usar a forma de oito algarismos (#rrggbbaa) ou recorrer a outra ferramenta que converta HSL para HEXA (não disponível nesta página). A página foca-se exclusivamente na conversão sem alfa.
O campo CMYK apresentado em simultâneo com o HEX é uma estimativa calculada no navegador. Os valores podem diferir dos obtidos em perfis de impressão profissionais (por exemplo, CMYK para papel coated ou uncoated). Não use este valor para produção gráfica sem o validar com um perfil ICC adequado.
Toda a conversão ocorre localmente, no navegador do utilizador. Nenhum valor introduzido é enviado para servidores externos. Isto garante privacidade imediata, mas também significa que a página depende inteiramente do motor JavaScript do navegador para os cálculos — algo que todos os navegadores modernos suportam sem problemas.
Perguntas frequentes
O que significa o código hexadecimal de três algarismos?
É uma notação abreviada para cores em que cada um dos três canais RGB pode ser representado por um único algarismo hexadecimal (0–F). Por exemplo, rgb(255,170,0) escreve-se como #fa0 em vez de #ffaa00. A página mostra esta forma sempre que é válida, mas o utilizador pode usar sempre a forma completa de seis algarismos.
Posso usar valores de saturação ou luminosidade sem o sinal de percentagem?
Não. A ferramenta espera que ambos os valores estejam no formato 0% a 100%. Introduzir 50 em vez de 50% faz com que a validação falhe e surja a mensagem de erro.
A conversão altera a cor se o HSL estiver fora da gama sRGB?
Não. O modelo HSL foi definido sobre o espaço sRGB; portanto, qualquer combinação válida de tom (0–360), saturação (0–100%) e luminosidade (0–100%) está dentro da gama sRGB. Não existe gamut clipping nesta conversão.
O valor CMYK que vejo ao lado do HEX é exacto para impressão?
É uma estimativa. Os valores CMYK dependem do perfil de cor da impressora e do tipo de papel. Use esta referência apenas para visualização conceptual; para trabalho profissional de impressão, recorra a um perfil ICC e a uma ferramenta de separação de cores.
O que acontece se introduzir um tom fora de 0–360?
A página rejeita a entrada e mostra a mensagem de erro padrão. Não são feitas tentativas de normalizar o valor (como reduzir o módulo de 360), porque isso poderia gerar uma cor diferente da pretendida pelo utilizador.
Os meus dados são enviados para algum servidor?
Não. Todo o processamento é feito no seu navegador. Não há envio de qualquer valor de cor, nem para análise nem para armazenamento. Pode utilizar a página com total privacidade.