Conversor de HSL para RGB

Por que a conversão de HSL para RGB é diferente

HSL foi projetado para o raciocínio humano sobre cor; RGB é o espaço de trabalho matemático que um monitor utiliza para emitir luz. Quando você altera a luminosidade em HSL, o matiz permanece intacto — é por isso que designers usam HSL para gerar paletas e temas, ajustando o tom sem deslocar a cor base. Já em RGB, alterar um dos três valores modifica o matiz de forma imprevisível para quem não está acostumado.

O diferencial central desta página é que a conversão entre HSL e RGB não tem perdas: todo valor HSL válido mapeia para um único trio RGB dentro da faixa exibível de 0 a 255. Ao contrário de conversões a partir de LAB ou CMYK, não ocorre recorte de gama (out‑of‑gamut clipping). Se você converte RGB para HSL e volta para RGB, o resultado é exatamente o original. Não há desvio de cor, nem necessidade de aproximação. Isso é crítico para fluxos de trabalho que exigem repetibilidade — por exemplo, ao gerar cores de interface dinamicamente a partir de um valor HSL central.

O modelo HSL usa três eixos: matiz (0° a 360°, representando a roda de cores), saturação (0% a 100%, do cinza ao puro) e luminosidade (0% a 100%, do preto ao branco). RGB, por sua vez, combina luz vermelha, verde e azul em intensidades de 0 a 255. A matemática da conversão é padronizada pela especificação CSS do W3C e é reversível com precisão absoluta dentro do espaço sRGB.

Entradas e saídas da ferramenta

A página aceita um valor HSL no formato matiz, saturação%, luminosidade%, por exemplo 243, 75%, 59%. Imediatamente, seis campos são atualizados:

Todas as conversões são instantâneas. Basta editar o campo HSL ou qualquer outro campo colorido (HEX, RGB, HSV) e todos os demais se ajustam em tempo real. Não há botão "converter" — a atualização é contínua.

Se você digitar um valor fora do formato esperado, a ferramenta exibe a mensagem: "Digite HSL como matiz 0–360 com duas porcentagens, como 243, 75%, 59%.". O matiz deve estar entre 0 e 360; saturação e luminosidade, entre 0% e 100%. Valores decimais são aceitos, mas arredondamentos podem ocorrer nos campos de saída.

Atenção para o CMYK: os valores exibidos são uma estimativa de tela. Em impressão profissional, o resultado depende do perfil de papel, tinta e calibração da impressora. Nunca use esses números diretamente para uma gráfica sem antes convertê-los com um perfil ICC adequado.

Como a conversão funciona internamente

Toda a matemática roda no seu navegador — nada é enviado para servidores. A ferramenta implementa o algoritmo de conversão HSL‑to‑RGB definido pela especificação CSS Color Module Level 4. Eis o essencial do método:

1. Se saturação for 0%: a cor é cinza. R = G = B = L, onde L é a luminosidade convertida para a escala 0–255.

2. Se saturação > 0%: entra em jogo a função auxiliar f(n), que calcula um componente de cor com base no matiz. Os valores de R, G e B são derivados com a fórmula:

   • C = (1 - |2L - 1|) × S (cromaticidade)
   • X = C × (1 - |(H / 60°) mod 2 - 1|)
   • m = L - C / 2
   • A partir de H, determina-se qual dos seis setores de 60° define a combinação (C, X, 0).

   Por exemplo, para o matiz 243° (que cai entre 240° e 300°, setor azul‑magenta), o cálculo produz os valores finais somando m a cada componente.

A conversão reversa (RGB → HSL) segue o mesmo padrão: encontra o maior e menor valor entre R, G, B, calcula luminosidade como a média, saturação a partir da diferença, e matiz pela posição relativa.

Esse método é deterministico e não envolve aproximações. É a base de como navegadores, editores de imagem e bibliotecas de cor (como a do Tailwind CSS ou do Adobe Color) lidam com HSL.

Quando usar esta ferramenta

O público principal inclui:

• Designers criando paletas ou temas: ajustar luminosidade em HSL mantém o matiz, permitindo gerar variações claras e escuras de uma cor com consistência. Depois de definir a família de cores, você precisa dos valores RGB para codificar em CSS, Swift, Kotlin ou qualquer linguagem que use triplas de 8 bits.
• Desenvolvedores front‑end: ferramentas de design como Figma, Sketch e Adobe XD exportam cores em HSL. Ao implementar uma interface, é comum precisar do RGB para a propriedade background-color ou para criar gradientes dinâmicos. Esta página faz a ponte sem complicação.
• Qualquer pessoa que prefira pensar em cor em termos humanos: você escolhe um matiz (tom), decide o quanto de pureza (saturação) e o brilho (luminosidade). A ferramenta fornece instantaneamente o trio numérico que o monitor entende.

Um exemplo prático: suponha que você está montando um esquema de acessibilidade e quer aumentar o contraste entre texto e fundo. Em HSL, eleve a luminosidade da cor de fundo para 90% e reduza a do texto para 20%, mantendo o mesmo matiz. A ferramenta converte esses valores para RGB — você cola diretamente no código. Não há tentativa e erro.

Limitações e cuidados

Embora a conversão seja precisa e sem perdas, há dois pontos importantes:

• Gamut limitado ao sRGB: HSL e RGB nesta página operam dentro do espaço sRGB, o padrão para monitores e web. Cores fora desse espaço (como amarelos muito vivos de impressão ou tons de cinza‑azulados de Adobe RGB) não podem ser representadas. Se você informar um HSL que leve a um RGB fora de 0–255, a ferramenta trunca os valores — mas isso é raro porque HSL foi definido para mapear exatamente o sRGB.
• CMYK é apenas referencial: como dito, os valores CMYK exibidos servem para ter uma noção da composição de tinta, mas não substituem uma conversão com perfil de impressão. A fórmula usada é a genérica (sem correção de GCR/UCR) e não considera o preto separado.
• Erro de entrada: se o formato não for respeitado, a mensagem de erro é clara. Mas a ferramenta aceita variações como espaços extras ou vírgulas sem problema, desde que os três valores estejam presentes.

Nenhum dado inserido é armazenado ou transmitido. Tudo fica no navegador — o que é relevante para quem trabalha com cores confidenciais de branding.

Perguntas frequentes

1. A conversão é realmente reversível? Posso ir de RGB para HSL e voltar?
Sim. Sendo a entrada válida (RGB com valores 0–255), converter para HSL e depois para RGB produz exatamente os mesmos números. Isso é garantido pela fórmula matemática sem arredondamentos.

2. Por que o HSL é melhor que o RGB para ajustar cores?
Porque HSL separa matiz, saturação e luminosidade. Se você quer uma versão mais clara da mesma cor, só mexe na luminosidade. No RGB, tentar isso mexe em três números ao mesmo tempo, e o resultado muda de matiz. HSL é o modelo intuitivo para humanos.

3. O que significa “sem recorte de gama” nesta página?
Em conversões entre espaços de cor diferentes (ex.: LAB → RGB), cores que estão fora do alcance do destino precisam ser aproximadas, o que causa perda. HSL e RGB compartilham o mesmo espaço de cor (sRGB), então todo HSL válido tem um RGB exato dentro dos limites 0–255. Não há aproximação.

4. Posso usar os valores CMYK da ferramenta para enviar para uma gráfica?
Não recomendo. O CMYK mostrado é uma conversão linear genérica, sem considerar o perfil da impressora, o tipo de papel (couche, offset, jornal) e a configuração de GCR (remoção de cinza). Para impressão profissional, use um software de pré‑impressão com perfis ICC específicos.

5. O que acontece se eu digitar saturação acima de 100% ou luminosidade negativa?
A ferramenta trata valores fora da faixa como erro e exibe a mensagem de formato inválido. A faixa esperada é matiz 0–360, saturação 0–100%, luminosidade 0–100%. Percentuais decimais, como 75,5%, são aceitos.

6. Esta ferramenta funciona offline?
Sim. Todo o código de conversão é executado no navegador. Uma vez carregada a página, você pode desconectar a internet e continuar usando — as fórmulas estão no JavaScript local.