O que é a conversão RGB para HSL?
A página rgb-to-hsl recebe uma cor no formato RGB — três números inteiros entre 0 e 255 que representam a intensidade de luz vermelha, verde e azul — e devolve imediatamente o equivalente em HSL (matiz em graus, saturação e luminosidade em percentagem). Além disso, mostra a mesma cor noutros formatos comuns (HEX, HSV, CMYK e LAB), permitindo copiar o valor mais adequado a cada projeto.
O que distingue esta página é que converte do modelo nativo dos ecrãs (RGB) para um modelo construído para o raciocínio humano sobre a cor. No RGB, alterar um canal modifica quase sempre o matiz que percebemos. No HSL, podemos ajustar a luminosidade de forma independente, mantendo o matiz constante. Isto torna o HSL o modelo preferido para gerar paletas de cores, temas e variações de contraste acessíveis. Os valores RGB são níveis crus de intensidade de 0 a 255; o HSL expressa o matiz num círculo de 0° a 360°, com saturação e luminosidade em percentagem.
Como o RGB representa a cor nos ecrãs
O RGB é um modelo de cor aditivo. Um ecrã produz cor combinando luz vermelha, verde e azul emitida por subpíxeis. Quando os três valores estão no máximo (255, 255, 255), obtém-se branco; quando estão no mínimo (0, 0, 0), obtém-se preto. A gama de cores que um ecrã consegue reproduzir depende do espaço de trabalho, normalmente sRGB, que cobre aproximadamente 35% do espectro visível. Cada canal de 8 bits pode assumir 256 valores, totalizando 16,7 milhões de cores possíveis.
O RGB é o formato nativo dos monitores, câmaras digitais e da maioria das linguagens de programação gráfica. No entanto, para um designer que queira criar uma variação mais clara de um azul escuro, alterar apenas o valor do azul no RGB não é intuitivo — é necessário mexer nos três canais para manter o matiz. É aqui que o HSL se revela mais prático.
Como o HSL modela a perceção humana
O HSL organiza a cor em três dimensões, inspiradas na forma como as pessoas descrevem a cor: matiz (hue), saturação e luminosidade (lightness). O matiz é representado como um ângulo num círculo cromático — 0° (ou 360°) para o vermelho, 120° para o verde, 240° para o azul. A saturação é a pureza da cor: 0% corresponde a cinzento (acromático), 100% à cor mais vívida possível para aquele matiz e luminosidade. A luminosidade indica a quantidade de luz: 0% é preto, 100% é branco, 50% é a cor pura (com saturação máxima).
Esta estrutura permite raciocinar sobre a cor de forma intuitiva. Para escurecer um vermelho intenso, basta reduzir a luminosidade; para o tornar pastel, reduz-se a saturação. O matiz permanece inalterado. Isto contrasta com o RGB, onde escurecer uma cor requer reduzir proporcionalmente todos os canais, e o resultado pode mudar ligeiramente o matiz.
Porquê usar HSL para paletas e temas?
Os designers de interfaces e os programadores front‑end beneficiam do HSL para criar sistemas de cor coesos. A função hsl() do CSS aceita três argumentos: hsl(243, 75%, 59%), por exemplo. É trivial gerar variações: para um tom mais claro, aumenta‑se a luminosidade; para um tom mais escuro, diminui‑se. Isto é especialmente útil para cumprir os rácios de contraste da WCAG. Mantendo o mesmo matiz, ajusta‑se a luminosidade até o contraste entre o texto e o fundo ser suficiente (por exemplo, 4.5:1 para texto normal).
Os construtores de temas (tema claro/escuro) usam HSL para preservar a identidade da marca enquanto alteram drasticamente a luminosidade do fundo e dos elementos. Um amarelo corporativo com hsl(45, 100%, 50%) pode ser convertido num fundo claro com hsl(45, 30%, 90%) e num texto escuro com hsl(45, 100%, 20%) — tudo sem perder o matiz original.
Os designers de visualização de dados também recorrem ao HSL porque o eixo da luminosidade é intuitivo para escalas sequenciais: à medida que o valor numérico aumenta, a luminosidade diminui (ou aumenta), criando uma perceção de ordem.
A matemática da conversão
Converter RGB para HSL não é complexo, mas requer alguns passos aritméticos. Primeiro, normalizam‑se os valores de RGB para o intervalo dividindo cada canal por 255. Depois, encontram‑se o valor mínimo (min), o valor máximo (max) e a diferença (delta = max - min). A luminosidade (L) é a média do máximo e do mínimo: L = (max + min) / 2.
A saturação (S) depende da luminosidade:
- Se
delta = 0(cor acromática),S = 0. - Senão,
S = delta / (1 - |2L - 1|).
O matiz (H) só é definido quando delta > 0. Calcula‑se com base no canal que atingiu o máximo:
- Se
max = R:H = 60 * ((G - B) / delta) mod 360 - Se
max = G:H = 60 * ((B - R) / delta) + 120 - Se
max = B:H = 60 * ((R - G) / delta) + 240
O resultado pode ser negativo; nesse caso, adiciona‑se 360 para o trazer ao intervalo [0, 360[.
Exemplo: RGB 79, 70, 229 (azul‑violeta). Normalizando: R=0.3098, G=0.2745, B=0.8980. max=0.8980 (azul), min=0.2745, delta=0.6235. L = (0.8980+0.2745)/2 = 0.5863 → 58,6%. S = 0.6235/(1 - |2*0.5863-1|) = 0.6235/(1-0.1726)=0.753 → 75,3%. Como o máximo é o azul: H = 60 * ((R-G)/delta) + 240 = 60*((0.3098-0.2745)/0.6235)+240 = 60*(0.0353/0.6235)+240 = 60*0.0566+240 = 3,4+240 = 243,4°. O resultado final é hsl(243°, 75%, 59%).
A página realiza estes cálculos instantaneamente no navegador, sem enviar dados para servidores.
Limitações do HSL e alternativas
Apesar da sua utilidade prática, o HSL não é perceptualmente uniforme. Isto significa que dois pares de cores com a mesma diferença numérica em HSL podem parecer ter distâncias diferentes ao olho humano. Por exemplo, um amarelo com luminosidade 50% parece muito mais claro do que um azul com a mesma luminosidade — o amarelo tem uma luminância relativa maior no modelo CIEXYZ. Para aplicações que exigem perceção linear, como escalas de cores em gráficos científicos, o modelo LAB (CIELAB) é mais adequado.
O LAB separa a luminosidade (L) de dois eixos cromáticos (a e b), e foi concebido para ser perceptualmente uniforme. No entanto, o LAB é menos intuitivo para quem está habituado a RGB ou HSL, e a sua representação requer conversões mais pesadas. A página também apresenta o valor LAB da cor, permitindo comparações, mas avisa que a conversão de LAB para RGB pode aproximar cores que estão fora da gama do ecrã. Nesse caso, a cor é ajustada para o sRGB mais próximo, e uma conversão de volta pode introduzir uma ligeira diferença.
Outra limitação do HSL é que ele é referenciado ao ecrã (dependente do dispositivo), tal como o RGB. Para impressão profissional, o CMYK continua a ser o padrão, e a página fornece uma estimativa de CMYK adequada para visualização no ecrã, mas que não deve ser usada como valor final para gráficas sem verificação.
Por fim, o HSL não representa cores fora da gama sRGB; se um valor de LAB ou CMYK mapear para fora desse espaço, o conversor aproxima‑o para o displayável, como indicado nas regras da ferramenta.
FAQ
P: Posso introduzir valores RGB com espaços em vez de vírgulas?
R: Sim. A ferramenta aceita três números inteiros de 0 a 255 separados por vírgulas ou por espaços. Exemplos válidos: 79, 70, 229, 79 70 229. Se a entrada não for reconhecida, surge a mensagem: «Enter RGB as three numbers 0–255, like 79, 70, 229.»
P: O que acontece se eu introduzir um valor HSL inválido?
R: A página tenta interpretar o valor como HSL. Se o formato estiver incorreto (ex.: hsl(400, 100%, 50%) com matiz fora do intervalo), aparece a mensagem: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
P: Posso converter de volta de HSL para RGB?
R: Sim. Basta editar qualquer campo HSL (matiz, saturação ou luminosidade) que a ferramenta recalcula automaticamente todos os outros formatos, incluindo RGB, HEX e HSV.
P: Porque é que o CMYK é apenas uma estimativa?
R: O perfil de tinta e o tipo de papel afetam a cor impressa. A conversão CMYK nesta página usa um modelo simplificado de separação de cores (por exemplo, com black generation genérico) e assume o espaço sRGB como origem. Para impressão profissional, deve obter‑se um perfil ICC da gráfica e usar um software de gestão de cor.
P: O que significa «LAB» e como se compara a HSL?
R: LAB (CIELAB) é um espaço de cor desenvolvido pela CIE em 1976. A componente L representa luminosidade, enquanto a e b representam eixos cromáticos verde‑vermelho e azul‑amarelo. É mais uniforme do ponto de vista perceptual do que HSL, mas menos intuitivo para ajustes rápidos de tom.
P: Os dados que introduzo são enviados para algum servidor?
R: Não. Todas as conversões são executadas localmente no seu navegador, utilizando JavaScript. Nenhum valor introduzido é carregado para a internet.