Como converter de HEX para HSL
Converta códigos de cor HEX para HSL na hora. Digite um valor HEX ou RGB, ou use os controles deslizantes, e todos os formatos se atualizam juntos, com prévia da cor, a fórmula e uma tabela de cores comuns.
- Digite ou cole um valor HEX, como #3B82F6, no campo correspondente acima.
- O valor HSL se atualiza na hora: #3B82F6 é hsl(217, 91%, 60%). Os outros formatos e a prévia da cor também se atualizam.
- Copie o valor HSL para o seu CSS, ferramenta de design ou código.
A fórmula de HEX para HSL
Escale os canais vermelho, verde e azul para 0-1. A luminosidade é a média do maior e do menor canal, a saturação cresce com a diferença entre eles e o matiz é a posição do canal dominante no círculo cromático de 360°:
#3B82F6 → hsl(217, 91%, 60%)
Cores comuns em HEX e HSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
O que são HEX e HSL
Uma cor HEX é um # seguido de seis dígitos hexadecimais: dois para o vermelho, dois para o verde e dois para o azul, de 00 (nada) a FF (máximo). É a forma mais comum de escrever cores em CSS e em ferramentas de design.
HSL descreve uma cor pelo matiz (um ângulo de 0 a 360 no círculo cromático), pela saturação e pela luminosidade (ambas em %). Facilita criar tons mais claros, mais escuros ou mais suaves da mesma cor.
Perguntas frequentes
A conversão muda a cor?
HEX, RGB e HSL descrevem as mesmas cores de tela, então a conversão entre eles é exata (o HSL é arredondado para números inteiros). CMYK é para impressão: o resultado impresso depende do perfil de cor da impressora, então use os valores CMYK de tela como ponto de partida.
Posso usar o resultado no CSS?
Sim. O CSS aceita diretamente hex (#3B82F6), rgb(59, 130, 246) e hsl(217, 91%, 60%). CMYK não é um formato de CSS; ele é usado em impressão e em programas de design.
E a transparência?
Adicione um valor alfa: hex de 8 dígitos (#3B82F680) ou rgba()/hsla() no CSS. O conversor trabalha com a cor sólida; o valor alfa é o mesmo em todos os formatos.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.