Conversor de HSL para hex

O que é esta conversão

HSL descreve uma cor pela forma como a escolheria numa roda de cores: matiz indica a posição na roda (0 a 360 graus), saturação indica quão viva ou lavada é a cor (em percentagem) e luminosidade indica quão clara ou escura é (também em percentagem). Hex é a notação oposta: seis dígitos hexadecimais — por vezes três, quatro ou oito, com ou sem cardinal — que representam diretamente os canais vermelho, verde e azul.

Converter HSL para hex é o passo que falta sempre que a cor nasce em HSL — escolhida num seletor de matiz, definida por uma regra de design («luminosidade 60%, saturação 70%») ou gerada por código — mas o destino final, uma folha de estilos CSS, um ficheiro SVG ou uma ferramenta de design, pede o código hex.

Esta ferramenta faz a conversão em tempo real: escreva um valor hsl() completo ou apenas os três números separados por vírgulas, e o código hex correspondente aparece de imediato, pronto a copiar.

Como converter HSL para hex

1. Escreva o valor hsl() no campo de texto, ou ajuste a matiz, a saturação e a luminosidade nos três campos numéricos por baixo. Aceita tanto hsl(212, 76%, 58%) completo como apenas 212, 76%, 58%, e os dois métodos ficam sincronizados: mudar um atualiza o outro de imediato, sem botão de confirmar.
2. Veja a amostra de cor e o código hex calculado ao lado. Um clique sobre o valor copia-o para a área de transferência, pronto a colar onde precisar do código.
3. Consulte a linha «outros formatos» para obter a mesma cor em RGB e em hsl() por extenso. Encontra também a ligação para a cor nomeada mais próxima e para o seletor de cores completo.

Para que serve esta conversão

Este sentido da conversão serve sobretudo quem escolhe uma cor a pensar em matiz, saturação e luminosidade e depois precisa do código que uma stylesheet, um ficheiro de design ou uma biblioteca de componentes efetivamente aceita. É o caso típico de quem gera uma paleta programaticamente — mantendo a mesma matiz e variando apenas a luminosidade para criar tons de uma cor de marca — e no final precisa de exportar cada tom como hex para o design system ou para o ficheiro de tokens de cor.

É também o caminho mais rápido quando a especificação de uma cor chega em palavras ou em HSL — «azul com matiz 212, bastante saturado, médio» — e o hex ainda não existe: em vez de calcular à mão os três canais de vermelho, verde e azul, escreve os três números de HSL e obtém o código exato.

Limites honestos

A conversão em si é matematicamente exata: dada uma matiz, uma saturação e uma luminosidade, existe uma e uma só cor em RGB e, portanto, um único código hex correspondente, e essa transformação de coordenadas não introduz qualquer erro. Confirmámos isto correndo a transformação nas duas direções sobre as 16 777 216 cores sRGB possíveis: convertidas para HSL e de volta, todas as 16 777 216 regressaram exatamente à cor de partida — 0 falhas.

O ponto a ter em conta está a montante, não nesta conversão: se o valor de HSL que está a escrever veio de outra ferramenta ou de outro ecrã que mostra graus e percentagens inteiras, esse valor já é uma versão arredondada de uma cor original, e mais do que uma cor sRGB pode arredondar para o mesmo triplo de HSL. Os graus e percentagens inteiros que qualquer ecrã mostra têm apenas 3 672 360 combinações possíveis (360 matizes × 101 saturações × 101 luminosidades) para 16 777 216 cores sRGB, pelo que pelo menos 78,11% das cores partilham obrigatoriamente etiqueta com outra.

Medido sobre as 16 777 216 cores, converter hex para esse HSL arredondado e de volta a hex devolve a cor exata em apenas 10,58% dos casos; nos restantes 89,42%, o hex final difere do original — normalmente por um ou dois valores num canal, como no pior caso medido, #02E4E6, que se mostra como hsl(181, 98%, 45%) e regressa como #02DFE3.

Para este sentido da conversão a implicação é simples: o hex que obtém aqui é sempre a cor exata correspondente aos números de HSL que introduziu; se esses números vieram de um hex arredondado noutro sítio, o hex de saída pode não ser exatamente o hex de origem, ainda que a diferença visual seja mínima. Há ainda um caso particular: com saturação a 0 a cor é um cinzento e a matiz deixa de ter efeito — qualquer matiz dá o mesmo código.

Porque é gratuito

A conversão de HSL para hex corre inteiramente no seu navegador — é aritmética simples, sem chamadas a um servidor — por isso pode ser oferecida sem custo. Não precisa de criar conta, não há marca de água no resultado nem limite de conversões: use a ferramenta uma vez ou mil vezes.