Converta valores RGB em HSL

Última revisão do conteúdo:

Introduza três canais RGB e os valores HSL aparecem enquanto escreve: rgb(59, 130, 246) corresponde a hsl(217.2, 91.2%, 59.8%). O campo aceita números com ou sem parênteses e reconhece canais escritos como frações de 0 a 1. O seletor dá a notação CSS ou a escala do Office.

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 RGB em HSL?

Divida cada canal por 255 e encontre o maior e o menor. A luminosidade é a média desses dois valores. A saturação resulta da diferença entre eles, e o matiz do canal mais forte[1].


Fórmula: Δ = máx − mín, L = (máx + mín) ÷ 2, S = Δ ÷ (1 − |2L − 1|), e quando o vermelho é o canal mais forte, H = 60° × ((G − B) ÷ Δ).


Tome rgb(239, 68, 68). Dividido por 255, o vermelho vale 0,937, e o verde e o azul 0,267 cada um. A média é 0,602, por isso a luminosidade é de 60,2%. A diferença, 0,671, dá uma saturação de 84,2%.


O verde e o azul são iguais, por isso o matiz é 0°. A cor completa é hsl(0, 84.2%, 60.2%). Quando o verde é o canal mais forte, o matiz conta-se a partir de 120°, por isso rgb(34, 197, 94) dá hsl(142.1, 70.6%, 45.3%).


O conversor RGB para HEX dá os códigos HEX destas cores, e o conversor HEX para HSL parte de um código.

Em que difere o HSL do RGB?

O RGB descreve uma cor pelas quantidades de luz vermelha, verde e azul que o ecrã combina num píxel. O HSL descreve a mesma cor pelo matiz, pela quantidade de cor e pela luminosidade. A especificação CSS observa que, com números RGB, é difícil adivinhar como clarear uma cor mantendo o seu matiz[1].


As duas notações cobrem o mesmo espaço sRGB. Uma cor escrita em HSL no CSS é convertida pelo navegador em sRGB[1], por isso qualquer cor HSL pode escrever-se como três canais RGB, e vice-versa.


Os autores do modelo, George Joblove e Donald Greenberg, deram outros nomes às suas dimensões em 1978: hue, relative chroma e intensity[2]. A especificação CSS chama-lhes hue, saturation e lightness, em português matiz, saturação e luminosidade[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.

Que valores HSL têm os cinzentos RGB?

Quando os três canais são iguais, a cor é cinzenta e a sua saturação é de 0%. Só a luminosidade decide então se o cinzento é claro ou escuro, e o matiz não influencia o resultado[1].
Valores RGBCódigo HEXHSL em CSSHSL no Office (0–255)
0, 0, 0#000000hsl(0, 0%, 0%)170, 0, 0
32, 32, 32#202020hsl(0, 0%, 12.5%)170, 0, 32
64, 64, 64#404040hsl(0, 0%, 25.1%)170, 0, 64
96, 96, 96#606060hsl(0, 0%, 37.6%)170, 0, 96
128, 128, 128#808080hsl(0, 0%, 50.2%)170, 0, 128
160, 160, 160#A0A0A0hsl(0, 0%, 62.7%)170, 0, 160
192, 192, 192#C0C0C0hsl(0, 0%, 75.3%)170, 0, 192
224, 224, 224#E0E0E0hsl(0, 0%, 87.8%)170, 0, 224
255, 255, 255#FFFFFFhsl(0, 0%, 100%)170, 0, 255
Em CSS, a luminosidade de um cinzento é o valor do canal dividido por 255. A caixa Cores do Office usa a mesma escala que os canais RGB, por isso nos cinzentos o terceiro número coincide com o valor do canal.

Como se escreve em HSL uma cor RGB com opacidade?

A opacidade tem o mesmo valor nas duas notações: o quarto número de rgba() é o quarto número de hsla(). A tabela mostra sete valores de opacidade para rgb(59, 130, 246) com o código HEX, em que a opacidade ocupa os dois últimos dígitos.
OpacidadergbahslaCódigo HEX
100%rgba(59, 130, 246, 1)hsl(217.2, 91.2%, 59.8%)#3B82F6
90%rgba(59, 130, 246, 0.9)hsla(217.2, 91.2%, 59.8%, 0.9)#3B82F6E6
75%rgba(59, 130, 246, 0.75)hsla(217.2, 91.2%, 59.8%, 0.75)#3B82F6BF
50%rgba(59, 130, 246, 0.5)hsla(217.2, 91.2%, 59.8%, 0.5)#3B82F680
25%rgba(59, 130, 246, 0.25)hsla(217.2, 91.2%, 59.8%, 0.25)#3B82F640
10%rgba(59, 130, 246, 0.1)hsla(217.2, 91.2%, 59.8%, 0.1)#3B82F61A
0%rgba(59, 130, 246, 0)hsla(217.2, 91.2%, 59.8%, 0)#3B82F600
Com opacidade 1, o conversor dá um hsl() simples, porque a opacidade total é o valor predefinido.

Como se convertem em HSL canais escritos como frações de 0 a 1?

Algumas bibliotecas escrevem os canais como frações: o módulo colorsys do Python, por exemplo, dá todos os valores entre 0 e 1[3]. O conversor reconhece esta notação quando pelo menos um dos três números tem casas decimais. Tal como no Python, as casas decimais vêm depois de um ponto.
Canais 0–1HSL em CSSHSL no Office (0–255)
0.2314, 0.5098, 0.9647hsl(217.2, 91.2%, 59.8%)154, 233, 153
0.1333, 0.7725, 0.3686hsl(142.1, 70.6%, 45.3%)100, 180, 116
0.5, 0.5, 0.5hsl(0, 0%, 50.2%)170, 0, 128
1.0, 0, 0hsl(0, 100%, 50%)0, 255, 128
O vermelho escrito como 1, 0, 0 tem apenas números inteiros, por isso o conversor lê-o na escala 0–255. 1.0, 0, 0 indica frações e dá o vermelho pleno.

Que formas de escrever os valores RGB é 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
rgb(59, 130, 246)hsl(217.2, 91.2%, 59.8%)A notação CSS com parênteses é aceite sem alterações
59 130 246hsl(217.2, 91.2%, 59.8%)Três números separados por espaços chegam, não são precisos parênteses nem vírgulas
R: 59, G: 130, B: 246hsl(217.2, 91.2%, 59.8%)As letras dos canais, como as escreve um manual de marca, são ignoradas e ficamos só com os números
rgb(23.1%, 51%, 96.5%)hsl(217.2, 91.2%, 59.8%)Os canais em percentagem passamo-los nós para a escala 0–255
rgba(59, 130, 246, 0,5)hsla(217.2, 91.2%, 59.8%, 0.5)A opacidade escrita com vírgula decimal é levada para o resultado em hsla
0,2314 0,5098 0,9647hsl(217.2, 91.2%, 59.8%)Os canais escritos em frações de 0 a 1 são reconhecidos pela vírgula e passados para a escala 0–255
[59, 130, 246]hsl(217.2, 91.2%, 59.8%)Lemos o array do NumPy que o Python imprime, com os parênteses retos
background-color: rgb(59, 130, 246);hsl(217.2, 91.2%, 59.8%)Cole a linha inteira da folha de estilos, a cor tiramo-la nós
300, -20, 128hsl(329.9, 100%, 50%)Os valores fora do intervalo são ajustados tal como faz o navegador: 300 desce para 255 e −20 sobe para 0

Como converter RGB em HSL no código, no CSS e no Office?

O Python, o CSS e o Office convertem RGB em HSL por conta própria. Cada um escreve o resultado de outra forma, por isso veja aqui como o ler em cada caso.

  1. Python

    colorsys.rgb_to_hls(r, g, b) recebe canais de 0 a 1 e devolve matiz, luminosidade e saturação por esta ordem[3]. Para #3B82F6, o matiz é 0,6034. É uma fração de uma volta completa, por isso multiplicado por 360 dá 217,2°.

  2. CSS

    Com a sintaxe relativa hsl(from rgb(59 130 246) h s calc(l + 10)), o próprio navegador converte RGB em HSL e aumenta a luminosidade em 10 pontos[4]. Testámos esta sintaxe no Chromium 151.

  3. Caixa Cores do Office

    Introduza os canais com o modelo RGB e depois mude o modelo de cor para HSL. A caixa mostra matiz, saturação e luminosidade numa escala de 0 a 255[5], que são os mesmos números que o conversor dá na notação Microsoft Office (0–255).

Converter outras unidades para HSL

HEX para HSL

Converter RGB para outras unidades

RGB para HEXRGB para CMYKRGB para HSV

Fontes

  1. CSS Color Module Level 4 — Converting sRGB Colors to HSL — W3C
  2. HSL e HSV — Wikipédia
  3. colorsys — Conversões entre sistemas de cores — Python Software Foundation
  4. Using relative colors — MDN Web Docs
  5. Escolher cores na caixa de diálogo Cores — Suporte da Microsoft

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 RGB em HSL

Posso introduzir os canais RGB em percentagem?

Sim. O conversor passa as percentagens para a escala 0–255, por isso rgb(23.1%, 51%, 96.5%) dá o mesmo resultado que rgb(59, 130, 246), ou seja, hsl(217.2, 91.2%, 59.8%).

Porque é que getComputedStyle devolve rgb quando escrevi hsl no CSS?

O navegador converte uma cor HSL em sRGB ao calcular o estilo e escreve o valor calculado como rgb() ou rgba()[1]. Para voltar a ver HSL, converta aqui esse resultado.

Porque é que o colorsys do Python usa outra ordem que não a do CSS?

O módulo colorsys chama a este modelo HLS e devolve a luminosidade antes da saturação[3]. Os valores (0.6034, 0.598, 0.912) significam, portanto, um matiz de 217,2°, uma luminosidade de 59,8% e uma saturação de 91,2%, que em CSS se escrevem hsl(217.2, 91.2%, 59.8%).

Como volto de HSL para RGB?

Introduza o valor no conversor HSL para RGB. O botão Trocar ordem leva-o até lá com o resultado atual.

Um cinzento tem matiz em HSL?

Com saturação de 0%, o matiz não altera a cor[1], por isso o conversor dá zero na notação CSS. A caixa Cores do Office põe 170 nesse lugar, e a cor fica igual.

Como verifico se uma cor RGB se lê bem sobre um fundo?

Cole os valores RGB ou o resultado HSL no verificador de contraste de cores. Ele dá a relação de contraste com os limiares WCAG para texto.

Captura de ecrã da ferramenta gratuita da Arteon: Converta valores RGB em HSL

Ajude-nos a melhorar as nossas ferramentas

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