Conversor de RGB para HSL

O que esta página faz e por que ela é diferente

Esta página converte uma cor expressa no modelo RGB (Red, Green, Blue) – três números de 0 a 255 que indicam a intensidade de cada componente de luz – em seu equivalente no modelo HSL (Hue, Saturation, Lightness). O resultado inclui o matiz em graus (0–360), a saturação em porcentagem e a luminosidade em porcentagem. Além disso, a ferramenta mostra a mesma cor em outros formatos comuns: HEX, HSV, CMYK (apenas estimativa para tela) e LAB. Qualquer campo editado atualiza instantaneamente todos os outros, e tudo ocorre no navegador – nenhum valor é enviado para servidores.

O que torna esta página diferente da maioria dos conversores é o foco no motivo pelo qual você escolheria HSL em vez de RGB. RGB é o modelo nativo de telas: mistura aditiva de luz vermelha, verde e azul. Alterar um dos canais geralmente muda a percepção da tonalidade, o que dificulta criar variações controladas de uma cor. HSL, por outro lado, foi projetado para o raciocínio humano sobre cor. Com HSL você pode ajustar a luminosidade independentemente, mantendo o matiz inalterado. Isso a torna a ferramenta ideal para gerar paletas de cores, temas claros/escuros e variações acessíveis que respeitam taxas de contraste WCAG, sem perder a identidade cromática.

Como funciona a conversão de RGB para HSL

A transformação matemática de RGB (no espaço sRGB, o mais comum para monitores) para HSL segue um algoritmo padronizado. Primeiro os valores de 0–255 são normalizados para o intervalo 0–1, dividindo cada um por 255. Em seguida, calcula-se:

• Máximo (M) e Mínimo (m) entre os três componentes normalizados.
• Diferença (C) = M – m.
• Luminosidade (L) = (M + m) / 2.
• Saturação (S):
  • Se C = 0, S = 0 (cor acinzentada).
  • Senão, S = C / (1 – |2L – 1|).
• Matiz (H):
  • Se C = 0, H é indefinido (geralmente 0).
  • Se M = R, então H = 60 × ((G – B) / C mod 6).
  • Se M = G, então H = 60 × ((B – R) / C + 2).
  • Se M = B, então H = 60 × ((R – G) / C + 4).
  • Se H < 0, soma-se 360.

Exemplo prático: RGB(79, 70, 229). Normalizando: R=0,310, G=0,275, B=0,898. M=0,898 (B), m=0,275. C=0,623. L = (0,898+0,275)/2 = 0,5865 → 58,65%. Saturação: C/(1 – |2*0,5865 – 1|) = 0,623/(1 – 0,173) ≈ 0,753 → 75,3%. Matiz: como M=B, H = 60×((0,310-0,275)/0,623 + 4) = 60×(0,056 + 4) = 60×4,056 ≈ 243,4°. Portanto HSL(243°, 75%, 59%). A página exibe valores arredondados, mas preserva a precisão interna para conversão reversa.

Entrada e saída: formatos suportados e regras de uso

A ferramenta aceita entrada em qualquer um dos formatos e atualiza todos os campos simultaneamente. A tabela abaixo resume os campos de entrada e saída, com as regras de validação.

Edge cases importantes:

• Valores RGB fora do intervalo 0–255 geram a mensagem de erro específica.
• Valores HSL com saturação ou luminosidade acima de 100% ou negativos são considerados inválidos.
• Converter um LAB que originalmente pertencia a uma cor espectral (como verde muito saturado além do sRGB) resulta em aproximação. Esse desvio é inerente à limitação de gamut dos monitores.

Por que usar HSL em vez de RGB?

Paletas e temas

O modelo HSL é uma mão na roda para criar variações de uma cor base. Suponha que você tenha a cor primária de uma marca em HSL(210°, 80%, 50%). Para gerar um tom mais claro (tint), basta aumentar a luminosidade: L = 70%. Para um tom mais escuro (shade), diminuir L = 30%. Para um tom mais dessaturado (tone), reduzir a saturação. Todas essas operações mantêm o matiz idêntico, garantindo coesão visual.

Em RGB, fazer o mesmo exigiria alterar os três canais proporcionalmente – o que raramente mantém a mesma tonalidade perceptível. Por exemplo, RGB(0, 102, 204) clareado para RGB(102, 153, 255) muda o matiz de azul para azul-púrpura. Com HSL, você simplesmente mexe no controle deslizante de luminosidade.

Acessibilidade e contraste

As diretrizes WCAG 2.2 exigem taxas de contraste mínimas de 4,5:1 para texto normal e 3:1 para texto grande. Com HSL, é fácil ajustar a luminosidade de uma cor para atingir o contraste desejado sem alterar a identidade da marca. Ferramentas de verificação de contraste geralmente trabalham com luminância relativa (calculada a partir dos valores lineares de RGB), mas o canal L do HSL serve como guia intuitivo: cores com L abaixo de 50% são consideradas escuras, acima de 50% são claras. Basta garantir que a diferença entre a luminosidade do texto e do fundo seja grande o suficiente.

Uso prático em CSS

Desde CSS3, a função hsl() permite definir cores diretamente:

background-color: hsl(243, 75%, 59%);

A variante hsla() inclui um canal alfa para opacidade:

color: hsla(243, 75%, 59%, 0.8);

Isso torna a manipulação dinâmica de cores em JavaScript muito mais simples. Você pode armazenar apenas o matiz e variar S e L programaticamente para criar temas claros/escuros.

Limitações do modelo HSL

Apesar de sua utilidade prática, HSL não é perceptualmente uniforme. Cores com o mesmo valor de L podem parecer ter brilhos diferentes para o olho humano. Por exemplo, amarelo puro (HSL(60°, 100%, 50%)) parece muito mais claro que azul puro (HSL(240°, 100%, 50%)), embora ambos tenham L=50%. Isso acontece porque a percepção de luminosidade não é linear e depende da sensibilidade espectral dos cones da retina.

Modelos como CIELAB (ou CIELCh, sua versão cilíndrica) foram projetados para ser perceptualmente uniformes: a distância entre duas cores no espaço LAB corresponde aproximadamente à diferença percebida. A página oferece saída em LAB justamente para quem precisa de uniformidade – como em escalas sequenciais para visualização de dados. Se você precisa de séries de cores que transmitam ordem numérica de forma intuitiva, confie mais em LAB do que em HSL.

Outra limitação: tanto RGB quanto HSL são referenciados ao gamut do dispositivo (geralmente sRGB). Cores fora do triângulo de cromaticidade do monitor não podem ser representadas. É por isso que, ao digitar um valor LAB que mapeia para fora do RGB, a ferramenta ajusta para a cor mais próxima. A mensagem de erro para esse caso é suprimida (não há aviso, apenas ajuste silencioso), mas o usuário atento notará uma ligeira diferença na conversão de volta.

Perguntas frequentes (FAQ)

1. Por que o CMYK exibido não serve para impressão profissional?
   A conversão de RGB para CMYK depende das condições de impressão (tipo de papel, perfil de tinta, etc.). O valor mostrado é uma estimativa genérica baseada em perfis sRGB padrão. Para trabalho profissional, use um perfil ICC específico do equipamento de impressão.

2. O que acontece se eu digitar “100, 200, 300” em RGB?
   O valor 300 está fora do intervalo 0–255. A ferramenta exibirá a mensagem de erro: "Digite RGB como três números de 0 a 255, separados por vírgula ou espaço, por exemplo: 79, 70, 229."

3. Posso digitar HSL sem o símbolo de %?
   Sim, mas o formato esperado é reconhecido como porcentagens quando você escreve, por exemplo, 243 75 59. O sistema interpreta os dois últimos números como porcentagens, mesmo sem o símbolo, desde que estejam no intervalo 0–100. Para matiz, 0–360.

4. O matiz 0° é vermelho ou ciano?
   No modelo HSL padrão, 0° equivale ao vermelho puro (assim como em HSV). O círculo cromático começa no vermelho (0°), passa pelo amarelo (60°), verde (120°), ciano (180°), azul (240°), magenta (300°) e retorna ao vermelho (360°).

5. A página salva meu histórico de conversões?
   Não. Todas as conversões ocorrem apenas no navegador e nenhum dado é enviado a servidores. Se você recarregar a página, os campos voltam aos valores padrão (provavelmente RGB(79,70,229) de exemplo). Use a funcionalidade de copiar para transferir valores para seu projeto.