Como usar o Conversor de RGB para HSL: guia completo (2026)

O que é o Conversor de RGB para HSL?

Um conversor RGB para HSL transforma canais vermelho/verde/azul (0-255) em matiz, saturação e luminosidade - o modelo que o CSS usa em hsl() - e o inverso. O Conversor RGB para HSL grátis da ToolsMinify é bidirecional: edite RGB ou HSL, veja a amostra ao vivo e copie rgb(), hsl() ou HEX. Roda no navegador, sem cadastro nem envio.

Converta RGB para HSL e HSL para RGB na hora. Conversor de cores grátis com amostra ao vivo e CSS rgb() e hsl() prontos para copiar.

Por que usar o Conversor de RGB para HSL?

• Converta RGB ↔ HSL ao digitar, com amostra ao vivo
• CSS rgb() e hsl() prontos para copiar, mais HEX
• Seletor de cor nativo e amostras predefinidas
• Matiz 0-360, saturação e luminosidade 0-100%
• 100% no cliente - as cores não saem do navegador

Como usar o Conversor de RGB para HSL passo a passo

1. Passo 1: Informe R, G e B de 0 a 255 - ou escolha uma cor com o seletor nativo.
2. Passo 2: Leia os valores H, S e L (matiz 0-360, saturação e luminosidade 0-100%).
3. Passo 3: Edite H, S ou L para converter o outro sentido; RGB e a amostra atualizam na hora.
4. Passo 4: Copie o CSS rgb() ou hsl() (ou o HEX) para a folha de estilo - sem cadastro.

O Conversor de RGB para HSL fica em Conversores. Abra a página da ferramenta, digite os seus dados no campo principal e os resultados se atualizam na hora. Use o botão de copiar para colar a saída em documentos, editores de código ou planilhas.

Casos de uso comuns

hsl() de CSS a partir de um RGB de design

Cole R, G e B do Figma ou de uma captura e copie hsl() para folhas de estilo modernas.

Ajustar a matiz sem refazer o RGB

Mantenha saturação e luminosidade fixas, gire a matiz e copie o novo rgb() para uma variante de paleta.

Passagem entre ferramentas HEX e HSL

Use o Conversor HEX para RGB para um código #rrggbb e este conversor para o caminho HSL.

Ensinar modelos de cor

Mostre por que o cinza tem matiz 0, por que luminosidade 50% é um tom puro e como 100% de luminosidade vira branco.

Exemplos

• Vermelho puro: rgb(255, 0, 0) → hsl(0, 100%, 50%).
• Azul Tailwind 500: rgb(59, 130, 246) → hsl(217, 91%, 60%).
• Cinza neutro: rgb(128, 128, 128) → hsl(0, 0%, 50%). A matiz é 0 porque o cinza não tem saturação.
• HSL para RGB: hsl(120, 100%, 50%) → rgb(0, 255, 0) (verde puro).

Dicas de quem usa

• Matiz 0 = vermelho, 120 = verde, 240 = azul. 360 volta a 0.
• Com 0% de saturação a cor é cinza e a matiz não aparece até você subir S.
• Luminosidade 0% é preto, 100% é branco, 50% é o tom 'puro' em saturação plena.
• RGB fora da faixa fica em 0-255; S e L ficam em 0-100.
• Precisa de HEX, CMYK, contraste ou uma escala de tons? Abra o Conversor HEX para RGB.

Perguntas frequentes

Como converto RGB para HSL?

Informe vermelho, verde e azul de 0 a 255. A ferramenta calcula matiz (0-360), saturação (0-100%) e luminosidade (0-100%) e mostra o CSS hsl() para copiar. Exemplo: rgb(255, 0, 0) é hsl(0, 100%, 50%).

Posso converter HSL para RGB?

Sim. Edite H, S ou L e os canais RGB, o CSS rgb(), o HEX e a amostra atualizam juntos. A matiz dá a volta em 360; saturação e luminosidade ficam entre 0 e 100.

O que significam H, S e L?

A matiz é o ângulo na roda (0 vermelho, 120 verde, 240 azul). A saturação é o quão viva é a cor (0% cinza, 100% cor plena). A luminosidade é o quão claro é (0% preto, 50% puro, 100% branco).

Por que a matiz é 0 no cinza?

Cinzas têm saturação 0%, então a matiz é indefinida e este conversor informa 0. Mudar a matiz num cinza não faz nada até você subir a saturação.

É o mesmo que HEX para RGB?

Não. O Conversor HEX para RGB é para códigos #rgb / #rrggbb, mais CMYK, contraste e tokens. Esta ferramenta é o caminho RGB ↔ HSL. Use as duas quando a spec misturar HEX e HSL.

A cor sai do dispositivo?

Não. O conversor RGB para HSL roda inteiramente no navegador. Os valores não são enviados nem armazenados em um servidor.

Ferramentas relacionadas que você pode precisar

Explore outras conversores no ToolsMinify. A página do Conversor de RGB para HSL tem links para utilitários relacionados, para você concluir o trabalho sem sair do site.