Converta HSL num código HEX

Última revisão do conteúdo:

Introduza valores HSL e o código HEX aparece enquanto escreve: hsl(217.2, 91.2%, 59.8%) corresponde a #3B82F6. O campo aceita vírgulas, espaços e a opacidade depois de uma barra. Com a notação do Office, pode introduzir os três números 0–255 lidos na caixa Cores.

Introduza o matiz em graus e a saturação e a luminosidade em percentagem. Separe os valores com vírgulas ou espaços.

Notação HSL

A notação CSS corresponde às folhas de estilo e às ferramentas de programador do navegador. A notação 0–255 é a que a caixa Cores mostra no Word, no Excel e no PowerPoint.

para

Como converter HSL em HEX?

Passe a saturação e a luminosidade para frações de 0 a 1, calcule os três canais RGB e escreva cada canal como dois dígitos hexadecimais. O cálculo assenta no croma, a diferença entre o canal mais forte e o mais fraco[1]. Se os números vierem do Office, escolha antes a notação Microsoft Office (0–255). Se o campo já tiver uma cor, o seletor reescreve-a como a mesma cor na nova notação.


Fórmula: C = (1 − |2L − 1|) × S, o canal mais forte é L + C ÷ 2 e o mais fraco L − C ÷ 2.


Tome hsl(217.2, 91.2%, 59.8%). O croma vale 0,733. O canal mais forte tem 0,965 e o mais fraco 0,231. Um matiz de 217,2° fica entre o ciano e o azul, por isso o azul é o canal mais forte, o vermelho o mais fraco e o verde fica em 0,510[1].


Multiplicados por 255, os canais dão 59, 130 e 246. Em hexadecimal são 3B, 82 e F6, ou seja, #3B82F6. Cada metade do cálculo tem a sua ferramenta: o conversor HSL para RGB e o conversor RGB para HEX.

O que significam matiz, saturação e luminosidade em HSL?

O primeiro valor é o matiz, dado como ângulo no círculo cromático. As cores primárias do ecrã ficam separadas por 120 graus: o vermelho em 0°, o verde em 120° e o azul em 240°, e 360° volta a ser vermelho[2].


O segundo valor é a saturação. A 100% a cor está totalmente saturada, e a 0% passa a ser um cinzento em que o matiz já não influencia o resultado. O terceiro valor é a luminosidade. Dá preto a 0%, branco a 100% e a cor plena de um matiz a 50%[2].


O CSS também aceita o matiz noutras unidades de ângulo. Uma volta completa são 360 graus, 400 grados, 2π radianos ou uma volta escrita como 1turn[3]. O conversor lê todas, por isso 0.25turn dá a mesma cor que 90°.


O modelo HSL foi descrito em 1978, e em 1979 a Tektronix apresentou terminais gráficos em que as cores se definiam em HSL[1].


Se tiver a cor noutra notação, como OKLCH, Lab ou código de Android, o conversor de cores mostra-a de uma vez em todas as notações.

Como obter tons mais claros e mais escuros de uma cor em HSL?

Altere apenas a luminosidade e mantenha o matiz e a saturação. A tabela mostra nove níveis de luminosidade de hsl(217.2, 91.2%, 59.8%) e os códigos HEX que dão.
LuminosidadeHSLCódigo HEX
10%hsl(217.2, 91.2%, 10%)#021431
20%hsl(217.2, 91.2%, 20%)#042862
30%hsl(217.2, 91.2%, 30%)#073C92
40%hsl(217.2, 91.2%, 40%)#0950C3
50%hsl(217.2, 91.2%, 50%)#0B64F4
60%hsl(217.2, 91.2%, 60%)#3C83F6
70%hsl(217.2, 91.2%, 70%)#6DA2F8
80%hsl(217.2, 91.2%, 80%)#9DC1FB
90%hsl(217.2, 91.2%, 90%)#CEE0FD
O nível de 60% dá #3C83F6. A cor de partida #3B82F6 tem uma luminosidade de 59,8%, ou seja, menos 0,2 pontos percentuais.

Que códigos HEX têm os matizes separados por 30 graus?

A especificação CSS mostra a paleta HSL em passos de 30°, dos vermelhos aos magentas, passando pelos amarelos, verdes, cianos e azuis[2]. Todas as linhas têm saturação de 100% e luminosidade de 50%.
MatizMatizes na especificação CSSHSLCódigo HEX
0°vermelhoshsl(0, 100%, 50%)#FF0000
30°vermelho-amarelos, ou seja, laranjashsl(30, 100%, 50%)#FF8000
60°amareloshsl(60, 100%, 50%)#FFFF00
90°amarelo-verdeshsl(90, 100%, 50%)#80FF00
120°verdeshsl(120, 100%, 50%)#00FF00
150°verde-cianoshsl(150, 100%, 50%)#00FF80
180°cianoshsl(180, 100%, 50%)#00FFFF
210°ciano-azuishsl(210, 100%, 50%)#0080FF
240°azuishsl(240, 100%, 50%)#0000FF
270°azul-magentashsl(270, 100%, 50%)#8000FF
300°magentashsl(300, 100%, 50%)#FF00FF
330°magenta-vermelhoshsl(330, 100%, 50%)#FF0080
Os matizes de 0°, 120° e 240° são as primárias do ecrã, por isso os seus códigos têm um canal cheio e dois a zero. Nos passos intermédios, como 30° e 90°, um canal fica a meio da escala, o que em hexadecimal é 80.

Que código HEX dão os números da caixa Cores do Office?

A caixa Cores do Office mostra matiz, saturação e luminosidade numa escala de 0 a 255[4]. Introduzimos esses números no Office 2016 e lemos o resultado na mesma caixa, e 40 combinações saíram no conversor exatamente como no programa. A tabela mostra dez delas.
Valores no OfficeCódigo HEXA mesma cor em CSS
0, 255, 128#FF0101hsl(0, 100%, 50.2%)
42, 255, 128#FFFF01hsl(60, 100%, 50.2%)
85, 255, 128#01FF01hsl(120, 100%, 50.2%)
127, 255, 128#01FFFFhsl(180, 100%, 50.2%)
170, 255, 128#0101FFhsl(240, 100%, 50.2%)
213, 255, 128#FF01FFhsl(300, 100%, 50.2%)
154, 233, 153#3C83F6hsl(217.1, 91.2%, 60%)
170, 0, 128#808080hsl(0, 0%, 50.2%)
0, 0, 255#FFFFFFhsl(0, 0%, 100%)
0, 0, 0#000000hsl(0, 0%, 0%)
O vermelho puro introduzido como 0, 255 e 128 dá #FF0101. Uma luminosidade de 128 é um pouco mais de metade de uma escala de 255, por isso os dois canais mais fracos ficam em 1.

Que formas de escrever a cor em HSL é que este conversor aceita?

O campo aceita e converte cada uma destas formas, pelo que não é preciso corrigir nada antes de colar. A tabela mostra o que o conversor faz com cada uma, e foi ele que calculou os resultados.
O que escreveResultado do conversorComo lemos
hsl(217.2, 91.2%, 59.8%)#3B82F6A sintaxe CSS antiga com vírgulas lemo-la tal como a nova
hsl(217.2 91.2% 59.8%)#3B82F6A sintaxe CSS nova com espaços é aceite sem qualquer alteração
217,2 91,2 59,8#3B82F6Apenas números com vírgula decimal, sem parênteses e sem percentagens: seguimos a ordem em que estão
H: 217.2 S: 91.2% L: 59.8%#3B82F6As letras dos canais com dois pontos, como as escreve um manual de marca, são ignoradas e ficamos com os números
hsl(217.2 91.2% 59.8% / 50%)#3B82F680A opacidade indicada depois da barra é acrescentada ao resultado como os dois últimos caracteres do código
180°, 100%, 50%#00FFFFO sinal de grau junto ao matiz não atrapalha, lemos apenas o número
color: hsl(217, 91%, 60%);#3C83F6Cole a linha inteira da folha de estilos, a cor tiramo-la nós
154, 233, 153#3C83F6Três números na escala 0–255, ou seja a notação Microsoft Office da janela Cores do Word e do Excel: com o seletor Notação assim, lemo-los tal como percentagens

Onde encontra valores HSL e onde cola o código HEX?

Os dois primeiros sítios dão valores HSL para converter, e os dois seguintes recebem o código HEX já pronto.

  1. Caixa Cores do Office

    Abra Preenchimento da Forma e escolha Mais Cores de Preenchimento[5]. No separador Personalizado, mude o modelo de cor para HSL e copie os números das caixas Matiz, Sat e Lum. No conversor, escolha a notação Microsoft Office (0–255).

  2. Folha de estilos CSS

    Procure hsl( ou hsla( no ficheiro e copie o valor completo, com os parênteses. O conversor aceita-o com vírgulas, espaços e a opacidade depois de uma barra.

  3. Google Docs, Sheets e Slides

    Na barra de ferramentas, clique em Cor do texto ou noutra ferramenta com opções de cor. Em Personalizado, clique em Adicionar uma cor personalizada, cole o código HEX e clique em OK[6].

  4. Figma

    Clique na amostra do preenchimento na barra lateral direita. Na lista de modelos de cor abaixo dos controlos, escolha Hex[7] e cole o código no campo ao lado.

Converter outras unidades para HEX

RGB para HEXCMYK para HEX

Converter HSL para outras unidades

HSL para RGB

Fontes

  1. HSL and HSV — Wikipedia (em inglês)
  2. CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
  3. CSS Values and Units Module Level 4 — Angle Units — W3C
  4. Escolher cores na caixa de diálogo Cores — Suporte da Microsoft
  5. Adicionar um preenchimento ou efeito a uma forma ou caixa de texto — Suporte da Microsoft
  6. Mudar a cor de texto, objetos e planos de fundo — Ajuda do Editores de arquivos Google
  7. Update fills using the color picker — Figma Help Center

Todos os valores das tabelas foram calculados a partir das definições das unidades e verificados aritmeticamente antes da publicação. Os dados históricos e os nomes das unidades locais assentam nas fontes indicadas acima.

Última revisão do conteúdo: · escrito e verificado pela equipa Arteon

Perguntas frequentes sobre converter HSL em HEX

Porque é que hsl(217, 91%, 60%) dá um código diferente de #3B82F6?

O HSL arredondado às unidades descreve a cor com menos precisão. hsl(217, 91%, 60%) dá #3C83F6, enquanto #3B82F6 corresponde a hsl(217.2, 91.2%, 59.8%). Quantas cores mudam com esse arredondamento mostra uma tabela do conversor HEX para HSL.

Como introduzo uma cor HSL com transparência?

Acrescente a opacidade depois de uma barra, por exemplo hsl(217.2 91.2% 59.8% / 50%), ou indique-a como quarto valor de hsla()[2]. O conversor dá então o código de oito caracteres #3B82F680, cujos dois últimos dígitos guardam a opacidade.

O que acontece se escrever uma saturação fora de 0–100%?

O conversor ajusta-a ao limite do intervalo, por isso 150% conta como 100%. Um valor negativo conta como 0%, tal como exige a especificação CSS[2]. Com a luminosidade passa-se o mesmo.

Um matiz de 360° é a mesma cor que 0°?

Sim. O matiz é um ângulo, por isso 360° é o mesmo vermelho que 0°[2]. Pela mesma razão, 480° dá o mesmo verde que 120°, e −120° o mesmo azul que 240°.

Como converto HSL em valores RGB?

Introduza o valor no conversor HSL para RGB, que dá três canais de 0 a 255. Para hsl(217.2, 91.2%, 59.8%), o resultado é rgb(59, 130, 246).

Como passo uma cor da caixa do Office para uma folha de estilos?

Escolha a notação Microsoft Office (0–255) e introduza os três números da caixa Cores. O código HEX do campo de resultado cola-se diretamente no CSS, e o conversor HEX para HSL dá a mesma cor em graus e percentagens.

Captura de ecrã da ferramenta gratuita da Arteon: Converta HSL num código HEX

Ajude-nos a melhorar as nossas ferramentas

Tem uma ideia, encontrou um erro ou quer sugerir uma nova ferramenta? Escreva-nos.