Conversor de hex para HSL

O que é esta conversão

Um código hex é a forma mais comum de guardar uma cor em CSS, em design ou em código: seis dígitos hexadecimais — por vezes três, quatro ou oito, com ou sem o cardinal à frente — que representam os canais vermelho, verde e azul num único bloco compacto, como #3B82F6. HSL descreve a mesma cor de outra maneira: matiz (a posição na roda de cores, de 0 a 360 graus), saturação (a intensidade da cor, em percentagem) e luminosidade (quão clara ou escura é, também em percentagem).

Converter hex para HSL é útil sempre que precisa de pensar numa cor em termos de ajustes em vez de bytes. Um código hex não diz nada sobre se uma cor é clara ou escura, saturada ou lavada — é preciso decifrá-lo mentalmente. Em HSL essas propriedades ficam à vista: subir a luminosidade clareia a cor, baixar a saturação torna-a mais acinzentada, e rodar a matiz muda-a para outra família cromática mantendo tudo o resto igual.

Esta ferramenta faz a conversão em tempo real: escreva ou cole um código hex, com 3, 4, 6 ou 8 dígitos, com ou sem o cardinal, e o valor hsl() correspondente aparece de imediato, pronto a copiar.

Como converter hex para HSL

1. Escreva ou cole o código hex no campo de texto. A ferramenta aceita 3, 4, 6 ou 8 dígitos, com ou sem o cardinal à frente — por exemplo 3B82F6 ou #3b82f6ff — e o resultado atualiza-se a cada tecla, sem botão de confirmar nem envio para servidor.
2. Veja a amostra de cor e o valor hsl() calculado ao lado. Um clique sobre o valor copia-o de imediato para a área de transferência, pronto a colar numa folha de estilos.
3. Consulte a linha «outros formatos» para obter a mesma cor em hex e em RGB. Encontra também a ligação para a cor nomeada mais próxima e para o seletor de cores completo, caso precise de afinar ainda mais o resultado.

Para que serve esta conversão

Esta conversão específica costuma servir um cenário concreto: já tem uma cor de marca definida em hex — vinda de um manual de identidade, de um ficheiro de design ou do próprio código — e precisa de criar uma variante mais clara ou mais escura sem sair da mesma família cromática. Em hex, isso implicaria calcular à mão novos valores de vermelho, verde e azul, o que raramente dá o resultado esperado. Em HSL basta manter a matiz e a saturação e subir ou descer apenas a luminosidade.

É também o caminho mais direto quando quer descrever uma paleta em palavras — «um azul saturado e médio-claro» corresponde a valores concretos de matiz, saturação e luminosidade, enquanto o mesmo azul em hex não diz nada disso à primeira vista. Depois de converter, a matiz mantém-se fixa enquanto experimenta luminosidades e saturações diferentes, que é exatamente como muitas paletas e sistemas de tema são construídos.

Limites honestos

A base matemática desta conversão é exata: hex e RGB são a mesma informação escrita de duas formas diferentes — uma simples mudança de base — e passar de RGB para HSL com precisão total não perde nada. Confirmámos isto sobre as 16 777 216 cores possíveis em sRGB: convertidas para HSL e de volta a hex, todas as 16 777 216 regressaram exatamente à cor de partida — 0 falhas. Este cálculo foi ainda verificado contra o módulo colorsys da biblioteca padrão do Python, em mais de 60 000 cores, incluindo todos os cinzentos e uma varredura de matizes puras, sem qualquer divergência entre as duas implementações.

A limitação aparece no ecrã, não na matemática. Como qualquer outra ferramenta, o valor hsl() mostrado aqui é arredondado a graus inteiros e percentagens inteiras. Feita essa segunda conversão — hex para HSL arredondado e de volta a hex — apenas 1 775 570 das 16 777 216 cores (10,58%) regressam exatamente à cor original; as outras 15 001 646 (89,42%) voltam ligeiramente diferentes.

Isto não é um defeito que se possa corrigir — é uma consequência de contar quantos valores existem de cada lado. A matiz arredondada tem 360 valores inteiros, a saturação e a luminosidade têm 101 cada, o que dá 3 672 360 combinações possíveis contra 16 777 216 cores sRGB. Com menos de um quarto das etiquetas necessárias, pelo menos 78,11% das cores têm forçosamente de partilhar etiqueta com outra; o valor medido, 89,42%, fica acima desse mínimo, como tem de ficar.

Na prática o desvio costuma ser pequeno: olhando para o maior erro entre os três canais, 54,38% das cores desviam-se 1, 32,06% desviam-se 2, 2,89% desviam-se 3, 0,09% desviam-se 4 e apenas 108 cores em 16,7 milhões desviam-se 5. O pior caso medido foi #02E4E6, mostrado como hsl(181, 98%, 45%) e devolvido como #02DFE3 ao converter de volta. A forma segura de trabalhar é usar o HSL para raciocinar sobre a cor e ajustá-la — mudar a luminosidade, rodar a matiz — e guardar sempre o hex como o valor definitivo, em vez de encadear sucessivas idas e voltas pelo HSL arredondado.

Porque é gratuito

Esta ferramenta corre inteiramente no seu navegador: a conversão de hex para HSL é aritmética simples em JavaScript, não exige qualquer processamento no servidor, por isso não há custo a repassar. Não é preciso criar conta, não há marca de água nem limite de utilizações — pode converter uma cor ou mil, hoje e daqui a um ano.