Converter HSL em HEX
HSL para HEX transforma um ângulo de matiz, uma saturação e uma luminosidade em uma cor hex. Saturação e luminosidade definem até onde a cor se afasta do cinza; o ângulo de matiz decide em qual setor de 60° do círculo cromático ela cai e, portanto, qual canal é o maior. Os três canais saem como valores de 0–255 e cada um se torna dois dígitos hex.
Digite uma cor à esquerda. São aceitos valores hexadecimais com ou sem cerquilha, rgb(), hsl(), oklch() e nomes de cores CSS.
Como funciona o Converter HSL em HEX?
A conversão acontece em três etapas. O chroma — a distância da cor até o cinza — vem da saturação e da luminosidade juntas: (1 − |2L − 1|) × S. Esse fator é o que faz o chroma encolher nas duas extremidades, porque uma cor em 5% ou 95% de luminosidade tem muito pouco espaço para ser colorida.
O setor decide qual canal vence
Divida a matiz por 60 e você cai em um dos seis setores. Cada setor tem um padrão fixo: um canal no chroma máximo, um no zero, e um variando entre eles conforme a posição dentro do setor. Em 32° você está pouco além da metade do caminho do vermelho para o amarelo, então o vermelho está no chroma máximo, o verde está em 0.53 dele, e o azul está no zero — que é o laranja no topo desta página.
Então a luminosidade move o conjunto
Os três valores até aqui descrevem a cor no seu ponto mais saturado. Somar L − chroma / 2 a cada um desloca o conjunto para cima ou para baixo até a luminosidade pedida, sem mudar as diferenças entre eles — e é isso que mantém a matiz constante quando a luminosidade muda.
Por que não se chega a todo hex a partir de todo HSL
Você pode, na verdade: HSL e sRGB descrevem exatamente o mesmo conjunto de cores, e o mapeamento é uma bijeção. O que você não consegue é recuperar os mesmos números HSL depois de uma ida e volta, porque o hex tem 16,7 milhões de valores e o HSL como normalmente é escrito — matiz em número inteiro e décimos de porcento — tem menos. Dois valores HSL próximos podem se arredondar para o mesmo hex, e converter esse hex de volta dá o que quer que a fórmula produza entre eles. Se a exatidão importa, guarde o hex.
Um aviso sobre construir escalas desse jeito
Um padrão muito comum é pegar uma cor de marca, convertê-la para HSL e gerar uma paleta variando a luminosidade de 95% até 10%. O resultado são números iguais e cores desiguais: a luminosidade do HSL pondera os três canais igualmente, e o olho não, então os amarelos da rampa parecem bem mais claros que os azuis no mesmo número. Se é isso que você veio fazer, gere a escala em OKLCh em vez disso — é o que o seletor de cores deste site faz, e os degraus saem com aparência tão igual quanto a medida.
Matiz, saturação, luminosidade
hsl(32 100% 50%)
A cor hex
#ff8800 chroma = (1 − |2 × 0.5 − 1|) × 1.00 = 1.000 sector = 32 / 60 = 0.53 (red → yellow) channels = 1.000, 0.533, 0.000 → 255, 136, 0 → ff 88 00
Quais opções e casos-limite o Converter HSL em HEX suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| hsl(32 100% 50%) | moderno | espaços | A sintaxe CSS atual. A unidade de matiz é opcional; 32 e 32deg são iguais. |
| hsl(32, 100%, 50%) | legado | vírgulas | Ainda válido em todos os lugares. Não está obsoleto e não há motivo para reescrevê-lo. |
| hsla(…) | alias | — | A mesma função que hsl(), que agora aceita o alpha diretamente. |
| Matiz | qualquer número | volta ao início | 370 é 10, e −30 é 330. O ângulo é modular, então valores fora do intervalo são válidos em vez de erros. |
| Saturação 0% | — | cinza | Produz um cinza na luminosidade dada, independentemente do valor da matiz. |
| Luminosidade 0% / 100% | — | preto / branco | Ambos reduzem toda a matiz e saturação para a mesma cor. |
| Alfa | 0–1 ou % | 1 | Anexado como um par hexadecimal quarto. 0.5 se torna 80. |
| Fora do intervalo | — | limitado | Saturação e luminosidade são limitados a 0–100 em vez de rejeitados, como no CSS. |
Perguntas frequentes
Como converto HSL para hex manualmente?
Calcule o chroma como (1 − |2L − 1|) × S, com L e S como frações. Divida a matiz por 60 para achar o setor, e calcule o canal do meio como chroma × (1 − |(hue/60 mod 2) − 1|). Atribua o chroma, esse valor do meio e o zero ao vermelho, ao verde e ao azul conforme o setor, some L − chroma/2 aos três, multiplique por 255 e escreva cada um como dois dígitos hex.
hsl(32 100% 50%) sempre dá o mesmo hex?
Sim. A conversão é determinística e igual em todos os navegadores e ferramentas; hsl(32 100% 50%) é #ff8800 em qualquer lugar. O que não é garantido é o caminho de volta — converter #ff8800 de volta pode dar uma matiz de 31.9, dependendo de como a ferramenta arredonda, porque o hex guarda mais valores distintos do que uma matiz em número inteiro.
Por que mudar a luminosidade no HSL também parece mudar a matiz?
Ela não muda o número da matiz, mas muda o que você vê, porque o eixo de luminosidade do HSL não é perceptual. Ir de 50% para 70% de luminosidade em um azul parece uma mudança bem menor que o mesmo movimento em um amarelo, então um conjunto de cores que compartilham um número de luminosidade não parece compartilhar a luminosidade. Trabalhando em OKLCh, o efeito desaparece por completo.
Qual é uma boa maneira de construir uma escala de cores a partir de um valor HSL?
Não variando a luminosidade do HSL, que é o conselho usual e produz degraus visivelmente desiguais. Converta para OKLCh, varie a luminosidade dele em uma curva, mantenha a matiz e suavize o chroma nas duas pontas, para que os degraus claros não fiquem fluorescentes e os escuros não brilhem. O seletor de cores deste site faz exatamente isso e entrega os onze valores e as variáveis CSS.
Posso escrever uma matiz acima de 360 ou abaixo de 0?
Pode, e o CSS aceita. O ângulo de matiz é modular, então 370deg é 10deg e −30deg é 330deg. É genuinamente útil em uma animação ou em uma paleta gerada, onde um ângulo está sendo incrementado e você prefere não tratar o fechamento do ciclo por conta própria.
Por que outro conversor me dá um hex com um dígito diferente?
Arredondamento. HSL é contínuo e cada canal hex tem apenas 256 degraus, então um canal que cai em 127.5 precisa ir para um lado ou para o outro; este conversor arredonda para o mais próximo, e uma ferramenta que trunca em vez disso fica um abaixo. As duas cores são indistinguíveis na tela — a diferença é 1/255 de um canal — mas não são a mesma string.