Conversor de HSL para HEX

O conversor de HSL para HEX transforma valores HSL como hsl(217, 91%, 60%) em códigos hexadecimais como #3B82F6. O HSL é o modelo mais amigável para projetar uma cor por matiz, saturação e luminosidade — mas a maioria das folhas de estilo, tokens de design e HTML ainda esperam um código HEX, então esta conversão faz a ponte entre os dois.

Dica de fluxo: acerte a cor exata em HSL — fácil de raciocinar — e depois converta para HEX, o valor que você de fato entrega no código.

Quando você precisa

Do design ao código

Você montou uma paleta em HSL e agora precisa de códigos HEX para um arquivo de tema ou guia de marca.

Compartilhar compacto

Uma única string HEX é mais fácil de copiar e colar do que três números HSL com sinais de porcentagem.

Suporte legado

Algumas ferramentas e trechos de código antigos ainda esperam HEX em vez da função hsl().

Como converter de HSL para HEX

Insira os valores HSL

Digite seus valores como 217, 91%, 60% ou como hsl(217, 91%, 60%). O símbolo de grau no matiz é opcional e os sinais % são aceitos, mas não obrigatórios.

Leia o resultado HEX

O código HEX é gerado na hora, e a amostra ao vivo se atualiza para você confirmar que a cor é a desejada.

Ou escolha uma cor

Clique na amostra para abrir o seletor de cores nativo e escolher visualmente — os campos HSL e HEX se preenchem para você.

Copie e reutilize

Copie o código HEX para a sua folha de estilo. O painel abaixo também lista RGB, HSL, HSV e CMYK da mesma cor.

Recursos

Conversão instantânea

O HEX aparece assim que você digita, totalmente no cliente e sem enviar nada a um servidor.

Entrada flexível

Funciona com ou sem os símbolos %, a marca de grau e o invólucro hsl().

Pré-visualização e seletor

Uma amostra ao vivo verifica a cor e o seletor integrado permite escolher uma visualmente.

Todos os formatos de uma vez

Cada resultado também mostra HEX, RGB, HSL, HSV e CMYK.

Respeite as faixas: o matiz deve ir de 0 a 360 e tanto a saturação quanto a luminosidade de 0 a 100. Valores fora desses limites são sinalizados, pois não correspondem a uma cor válida.

Perguntas frequentes

Quais valores HSL são válidos?

O matiz vai de 0 a 360 (graus), enquanto a saturação e a luminosidade vão de 0 a 100 por cento. Valores fora dessas faixas não são cores válidas.

Preciso incluir o símbolo %?

Não. O conversor aceita a saturação e a luminosidade com ou sem o sinal % — 91% e 91 são tratados da mesma forma.

O que acontece se os valores estiverem fora da faixa?

O conversor sinaliza um erro se algum valor ficar fora da faixa válida, para que você corrija a entrada em vez de obter uma cor enganosa.

Posso colar uma string hsl() completa?

Sim. Tanto hsl(217, 91%, 60%) quanto o simples 217, 91%, 60% funcionam — o invólucro e o símbolo de grau são interpretados e ignorados conforme necessário.

A saída HEX é em maiúsculas?

Sim, o HEX é retornado em maiúsculas (ex. #3B82F6), a convenção usual. O CSS trata HEX em maiúsculas e minúsculas de forma idêntica.