Converter RGB em HSL
O Conversor de RGB para HSL descreve novamente três canais de cor como um ângulo, uma saturação e uma luminosidade. Só o maior e o menor canal importam: o ponto médio entre eles é a luminosidade, a distância entre eles é o croma, e qual deles é o maior escolhe o setor de 60° em que o matiz cai. A posição do canal do meio dentro desse setor dá o ângulo exato.
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 RGB em HSL?
A conversão inteira depende de dois números: o maior canal e o menor. Escale os três para 0–1; a luminosidade é o ponto médio entre esses dois, e o croma é a distância entre eles. Se o croma é zero, os três canais são iguais, a cor é um cinza, e não há matiz a calcular.
Qual canal é o maior escolhe o setor
O círculo cromático se divide em seis setores de 60°. Vermelho como o maior coloca você no setor que vai do magenta ao amarelo; verde como o maior, no que vai do amarelo ao ciano; azul como o maior, do ciano ao magenta. Onde exatamente você cai depende do canal do meio: com vermelho no máximo, o ângulo é ((G − B) / chroma) × 60, e para os outros dois a mesma expressão com um deslocamento de 2 ou 4 setores.
Essa expressão pode sair negativa — quando o azul excede o verde em uma cor dominada pelo vermelho — e é por isso que toda implementação correta soma 360 e pega o resto. Uma implementação que pula essa volta retorna um matiz negativo para cerca de um sexto de todas as cores, e o bug é invisível até algo a jusante tentar ordenar por ele.
A saturação é medida contra o que é possível
A saturação não é o croma bruto; é o croma dividido pelo máximo de croma que a luminosidade permite, que é 1 − |2L − 1|. Esse denominador vai a zero nos dois extremos, então uma cor quase preta ou quase branca com uma diferença mínima entre canais aparece como altamente saturada. Está correto, e não é o que a maioria das pessoas espera que esse número signifique.
Para o que o HSL serve, e para o que não serve
É uma boa notação para uma pessoa. “Mesma cor, menos saturada” e “mesma cor, um pouco mais escura” são edições de um número no HSL e de três números no RGB, e um controle deslizante de matiz só faz sentido em um espaço polar. Essa é uma vantagem real, e é por isso que o HSL sobreviveu.
É uma base ruim para aritmética. Seu eixo de luminosidade pesa os três canais igualmente, e a visão humana pesa o verde cerca de dez vezes mais que o azul, então números iguais de luminosidade não parecem igualmente claros. Qualquer rampa, mistura ou julgamento de contraste construído sobre o HSL herda esse erro. O OKLCH é uma notação da mesma forma — ângulo, croma, luminosidade — com um eixo que corresponde ao que o olho relata, e ele está na saída abaixo.
Canais RGB
rgb(255 136 0)
Matiz, saturação, luminosidade
hsl(32 100% 50%) max = 255 (red) → 1.000 min = 0 (blue) → 0.000 chroma = 1.000 lightness = (1.000 + 0.000) / 2 = 50% hue = ((0.533 − 0.000) / 1.000) × 60 = 32°
Quais opções e casos-limite o Converter RGB em HSL suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| max, min | 0–1 | — | O maior e o menor dos três canais escalados. Tudo o mais deriva desses dois valores. |
| Cromaticidade | max − min | — | O quanto a cor está longe do cinza. Zero significa um cinza, e nesse caso a matiz fica indefinida. |
| Luminosidade | (max + min) / 2 | — | O ponto médio. Note que ele ignora quais eram os canais, e é daí que vem o problema perceptual do HSL. |
| Saturação | chroma / (1 − |2L − 1|) | — | Cromaticidade relativa ao máximo disponível naquela luminosidade — não é uma medida absoluta. |
| Matiz (máximo vermelho) | ((G − B) / C) × 60 | — | Pode ser negativo quando B > G; some 360 e pegue o resto. |
| Matiz (máximo verde) | ((B − R) / C + 2) × 60 | — | A mesma expressão deslocada em dois setores. |
| Matiz (máximo azul) | ((R − G) / C + 4) × 60 | — | Deslocada em quatro setores. |
| Cinza | C = 0 | matiz 0 | É reportado como 0, e não como o resultado que a aritmética produzir a partir de três números iguais. |
Perguntas frequentes
Como converter RGB para HSL?
Divida cada canal por 255. Pegue o maior e o menor: a luminosidade é o ponto médio entre eles, e o croma é a diferença. Se o croma é zero, a cor é um cinza e você terminou. Caso contrário, a saturação é chroma / (1 − |2L − 1|), e o matiz depende de qual canal era o maior: vermelho dá ((G − B) / chroma) × 60, verde dá ((B − R) / chroma + 2) × 60, azul dá ((R − G) / chroma + 4) × 60. Some 360 e pegue o resto se o resultado for negativo.
Por que meu matiz sai negativo?
Porque o ramo do máximo vermelho subtrai o azul do verde, e quando o azul é o maior dos dois o resultado fica abaixo de zero. A correção é o módulo que toda implementação correta tem: somar 360 e pegar o resto. Isso afeta cerca de um sexto do espaço de cores — o lado magenta do vermelho — e normalmente passa despercebido até algo tentar ordenar ou interpolar pelo matiz.
O que a saturação realmente mede no HSL?
O croma relativo ao máximo de croma que a luminosidade pode conter, e não o croma em si. É por isso que rgb(2 0 0) — quase preto — informa 100% de saturação: dentro do que é possível a 0.4% de luminosidade, é tão colorido quanto uma cor pode ser. Se você quer uma medida absoluta de coloração, é isso que o croma do OKLCh é.
O HSL é melhor que o RGB para CSS?
Para editar à mão, muitas vezes sim: dessaturar ou escurecer é um número em vez de três, e um matiz é algo com que você consegue raciocinar. Para qualquer coisa gerada — uma escala, um gradiente, um estado interpolado — é pior do que parece, porque a luminosidade não é perceptual e números uniformemente espaçados produzem cores com espaçamento desigual. Use onde uma pessoa digita, e OKLCH onde um programa calcula.
A conversão perde alguma coisa?
Não matematicamente — HSL e RGB descrevem exatamente o mesmo conjunto de cores, e o mapeamento é reversível. A precisão se perde em como o resultado é escrito: um matiz inteiro e um décimo de porcento não distinguem cada um dos 16,7 milhões de valores sRGB, então duas cores podem aparecer com o mesmo HSL. Os valores aqui têm casas decimais suficientes para a ida e volta.
Por que duas cores muito diferentes informam o mesmo matiz?
Porque o matiz registra apenas a direção de uma cor, não quanta dela existe. rgb(255 0 0) e rgb(40 30 30) estão ambos no matiz 0 e diferem inteiramente em saturação e luminosidade. Essa separação é a razão de ser do HSL — um eixo para qual é a cor, dois para quão intensa e quão clara — e é por isso que uma cor quase cinza ainda pode informar um matiz de aparência confiante.