Conversor de RGB para HSL

O conversor de RGB para HSL transforma valores RGB como rgb(59, 130, 246) em valores HSL como hsl(217, 91%, 60%). Ambos descrevem a mesma cor, mas o RGB faz isso por três canais de luz, enquanto o HSL a descreve como Matiz, Saturação e Luminosidade — uma forma bem mais intuitiva de ajustar e variar uma cor.

Converter RGB para HSL é o primeiro passo quando você quer clarear, escurecer ou dessaturar uma cor de forma programática — essas operações são simples em HSL, mas trabalhosas em RGB puro.

Por que converter para HSL

Ajustar o brilho

Mude só a luminosidade para criar estados de hover, ativo e desabilitado consistentes a partir de uma cor base.

Controlar a intensidade

Ajuste a saturação para destacar mais uma cor ou suavizá-la em fundos discretos.

Paletas harmoniosas

Desloque o matiz em passos iguais para criar esquemas de cores complementares ou análogos.

Como converter de RGB para HSL

Insira os valores RGB

Digite seus três canais — por exemplo 59, 130, 246. Vírgulas ou espaços funcionam, e você pode envolver os valores em rgb(...) se quiser.

Leia o resultado HSL

O valor HSL é calculado na hora enquanto você digita, e a amostra ao vivo se atualiza para você verificar a cor visualmente.

Ou escolha uma cor

Clique na amostra para abrir o seletor de cores nativo e escolher uma cor visualmente — os campos RGB e HSL se atualizam automaticamente.

Copie e reutilize

Copie a string hsl() direto para o seu CSS. O painel abaixo também mostra HEX, RGB, HSV e CMYK.

Recursos

RGB x HSL

RGB

Três canais de luz

Combina com a forma como as telas emitem cor
Difícil "clarear" sem deslocar o matiz
Valores de 0 a 255 por canal

HSL

Modelo intuitivo

Luminosidade e saturação são controles separados
Tons claros, escuros e paletas com facilidade
Matiz 0–360°, S e L de 0 a 100%

Saída em tempo real

Os resultados se atualizam enquanto você digita, tudo no navegador.

Todos os formatos de uma vez

HEX, RGB, HSL, HSV e CMYK mostrados juntos para cada cor.

Perguntas frequentes

Qual é a diferença entre RGB e HSL?

O RGB define uma cor misturando luz vermelha, verde e azul. O HSL define a mesma cor por matiz (tipo de cor), saturação (intensidade) e luminosidade (brilho) — um remapeamento dos mesmos dados em termos mais intuitivos.

Quando devo usar HSL?

Use HSL quando precisar criar variações de cor — tons mais claros ou escuros, ou versões mais ou menos vivas — sem mudar o matiz base. É ideal para temas e estados de interface.

A conversão é precisa?

Sim. A matemática é precisa; o mesmo RGB sempre produz o mesmo HSL. Os valores HSL são arredondados para inteiros por legibilidade, o que pode variar uma unidade num ida e volta, mas parece idêntico.

Quais valores RGB são válidos?

Cada um dos três canais deve ser um inteiro de 0 a 255. Insira-os separados por vírgulas ou espaços, com ou sem o invólucro rgb().

Posso colar a saída HSL direto no CSS?

Sim. A saída usa a sintaxe padrão hsl(h, s%, l%) que todo navegador moderno suporta, então entra direto em uma folha de estilo.