Converta HSL em valores RGB
Introduza valores HSL e os canais RGB aparecem enquanto escreve: hsl(217.2, 91.2%, 59.8%) corresponde a rgb(59, 130, 246). O resultado está sempre na escala de 0 a 255, e a opacidade de hsla mantém-se em rgba. Com a notação do Office, introduz números da 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.
Como converter HSL em RGB?
Calcule cada canal separadamente com uma única fórmula da especificação CSS. Nessa fórmula, o vermelho tem o número n igual a 0, o verde 8 e o azul 4[1]. A saturação e a luminosidade entram como frações de 0 a 1.
Fórmula: k = (n + H ÷ 30) mod 12, a = S × mín(L, 1 − L), canal = L − a × máx(−1, mín(k − 3, 9 − k, 1)).
Tome hsl(0, 84.2%, 60.2%). Uma luminosidade de 0,602 e uma saturação de 0,842 dão a igual a 0,335. Para o vermelho, k vale 0, por isso o parêntese dá −1 e o canal é 0,602 + 0,335, ou seja, 0,937.
Para o verde e o azul, o parêntese dá 1. Os dois canais valem, portanto, 0,602 − 0,335, ou seja, 0,267. Multiplicados por 255 e arredondados, dão rgb(239, 68, 68). O Chromium 151, onde o testámos, dá o mesmo resultado.
O conversor HSL para HEX dá o código HEX desta cor. O conversor RGB para HSL faz o caminho inverso.
Como se traduz o HSL em canais RGB?
O matiz define a cor no círculo cromático, ou seja, quais os canais RGB fortes e quais os fracos. A 0° o canal mais forte é o vermelho, a 120° o verde e a 240° o azul[1].
A saturação indica a distância entre os canais. A 0% os três são iguais e a cor é cinzenta. A luminosidade fixa o nível de todos os canais ao mesmo tempo: a 0% cada um vale 0, a 100% cada um vale 255, e a 50% a cor tem a sua forma habitual[1].
O CSS tem duas sintaxes para esta notação. Na antiga, vírgulas separam os valores, e a saturação e a luminosidade precisam do sinal de percentagem. Na nova, espaços separam os valores, a opacidade vem depois de uma barra, e a saturação e a luminosidade podem escrever-se sem sinal de percentagem[1]. O conversor lê as duas, por isso hsl(217.2 91.2 59.8) dá o mesmo resultado que hsl(217.2, 91.2%, 59.8%).
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 altera a saturação os valores RGB?
hsl(217.2, 91.2%, 59.8%) desce em passos de 10 pontos, de 100% a 0%. O matiz e a luminosidade não mudam, por isso vê a distância entre os canais diminuir.| Saturação | HSL | Valores RGB |
|---|---|---|
| 100% | hsl(217.2, 100%, 59.8%) | 50, 128, 255 |
| 90% | hsl(217.2, 90%, 59.8%) | 60, 130, 245 |
| 80% | hsl(217.2, 80%, 59.8%) | 70, 133, 234 |
| 70% | hsl(217.2, 70%, 59.8%) | 81, 135, 224 |
| 60% | hsl(217.2, 60%, 59.8%) | 91, 138, 214 |
| 50% | hsl(217.2, 50%, 59.8%) | 101, 140, 204 |
| 40% | hsl(217.2, 40%, 59.8%) | 111, 143, 193 |
| 30% | hsl(217.2, 30%, 59.8%) | 122, 145, 183 |
| 20% | hsl(217.2, 20%, 59.8%) | 132, 148, 173 |
| 10% | hsl(217.2, 10%, 59.8%) | 142, 150, 163 |
| 0% | hsl(217.2, 0%, 59.8%) | 152, 152, 152 |
Como se escreve o matiz em graus, grados, radianos e voltas?
| Notação CSS | Ângulo em graus | Valores RGB |
|---|---|---|
| hsl(90deg, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(90, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(100grad, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(0.25turn, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(1.5708rad, 100%, 50%) | 90,0002° | 127, 255, 0 |
| hsl(1.570796rad, 100%, 50%) | 89,99998° | 128, 255, 0 |
Que formas de escrever a cor em HSL é que este conversor aceita?
| O que escreve | Resultado do conversor | Como lemos |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | rgb(59, 130, 246) | A notação CSS com vírgulas é aceite sem alterações |
| H 217.2 S 91.2 L 59.8 | rgb(59, 130, 246) | As letras dos canais e a falta de percentagens não atrapalham, lemos os números pela ordem |
| hsla(217,2, 91,2%, 59,8%, 0,5) | rgba(59, 130, 246, 0.5) | A vírgula decimal funciona também na opacidade, não é preciso trocá-la por um ponto |
| hsl(0.25turn, 100%, 50%) | rgb(128, 255, 0) | Um matiz dado em voltas passamo-lo a graus: 0.25turn são 90° |
| hsl(-120, 100%, 50%) | rgb(0, 0, 255) | Um matiz negativo contamo-lo a partir do fim do círculo cromático, tal como faz o navegador |
| hsl(0, 150%, 50%) | rgb(255, 0, 0) | A saturação acima de 100% ajustamo-la a 100%, tal como faz o navegador |
| color: hsl(217, 91%, 60%); | rgb(60, 131, 246) | Cole a linha inteira da folha de estilos, a cor tiramo-la nós |
| 154, 233, 153 | rgb(60, 131, 246) | Trê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 introduz o resultado RGB?
Os documentos Google e a caixa do Office aceitam os valores RGB tal como saem do conversor, enquanto o código muitas vezes precisa do resultado em frações.
Google Docs, Sheets e Slides
Na barra de ferramentas, clique em Cor do texto ou noutra ferramenta com opções de cor e, em Personalizado, clique em Adicionar uma cor personalizada. Na janela que se abre, pode introduzir o código hexadecimal ou os valores RGB[3].Caixa Cores do Office
No separador Personalizado, deixe o modelo de cor em RGB e escreva os três números nas caixas Vermelho, Verde e Azul[4]. No nosso teste no Office 2016, estas caixas aceitaram valores de 0 a 255.Python
colorsys.hls_to_rgb(h, l, s)recebe a luminosidade antes da saturação e os três valores como frações de 0 a 1[5]. O resultado também sai em frações, por isso multiplique cada canal por 255 para obter os números do conversor.JavaScript
A especificação CSS inclui uma função pronta,hslToRgb(hue, sat, light), que recebe o matiz em graus e a saturação e a luminosidade de 0 a 100[1]. Devolve canais de 0 a 1, e o conversor usa a mesma fórmula.
Converter outras unidades para RGB
Converter HSL para outras unidades
Fontes
- CSS Color Module Level 4 — Converting HSL Colors to sRGB — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Mudar a cor de texto, objetos e planos de fundo — Ajuda do Editores de arquivos Google
- Escolher cores na caixa de diálogo Cores — Suporte da Microsoft
- colorsys — Conversões entre sistemas de cores — Python Software Foundation
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 RGB
Porque é que o resultado RGB convertido de volta dá um valor HSL ligeiramente diferente?
Os canais RGB só aceitam números inteiros, por isso vários valores HSL dão a mesma cor. hsl(217, 91%, 60%) dá rgb(60, 131, 246), e essa cor convertida de volta é hsl(217.1, 91.2%, 60%). Ambos descrevem exatamente a mesma cor no ecrã.
Como converto em RGB os números da caixa Cores do Office?
Escolha a notação Microsoft Office (0–255) e introduza os três números da caixa. Os valores 154, 233 e 153 dão rgb(60, 131, 246), porque a caixa calcula o HSL numa escala de 0 a 255[4] e perde alguma precisão. Introduza os números depois de mudar a notação, porque o seletor reescreve a cor que já está no campo como a mesma cor na nova notação.
Posso escrever a saturação e a luminosidade sem sinal de percentagem?
Sim. O conversor lê números simples tal como a nova sintaxe CSS, por isso 217.2 91.2 59.8 dá rgb(59, 130, 246)[1].
Como obtenho os canais RGB como frações de 0 a 1?
Converta o valor HSL num código com o conversor HSL para HEX e introduza esse código no conversor HEX para RGB com o seletor em 0–1. Para hsl(217.2, 91.2%, 59.8%), obtém 0,2314, 0,5098 e 0,9647.
O navegador mostra a mesma cor que o conversor?
Sim. Testámos isto no Chromium 151 nas 16 777 216 cores: os valores HSL dados pelos nossos conversores produziram no navegador exatamente os canais RGB de partida.
Como defino em RGB uma cor com transparência?
Acrescente a opacidade ao valor HSL, por exemplo hsla(217.2, 91.2%, 59.8%, 0.5). O conversor dá rgba(59, 130, 246, 0.5), e o quarto número mantém-se.
Ajude-nos a melhorar as nossas ferramentas
Tem uma ideia, encontrou um erro ou quer sugerir uma nova ferramenta? Escreva-nos.