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.

Conversores

Conversor de RGB para HSL

Converta RGB (0-255) para HSL (matiz, saturação e luminosidade) e o inverso no navegador.

rgb(20, 184, 166)hsl(173, 80%, 40%)

RGB

= hsl(173, 80%, 40%)

HSL

= rgb(20, 184, 166)

HEX #14b8a6

Sobre o Conversor de RGB para HSL

Converta RGB (0-255) para HSL (matiz, saturação e luminosidade) e o inverso no navegador. Digite um canal, escolha uma cor ou clique em um preset - a amostra, o CSS rgb() e o CSS hsl() atualizam juntos. Use em folhas de estilo, tokens de design e na passagem entre ferramentas com modelos de cor diferentes. Nada é enviado.

Como usar o Conversor de RGB para HSL

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

Exemplos de Conversor de RGB para HSL

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).

Ler o guia completo

Como usar o Conversor de RGB para HSL: guia completo (2026) - 5 min de leitura

Perguntas frequentes sobre o Conversor de RGB para HSL

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.

Conversor de HEX para RGB

Converta HEX para RGB (e o inverso) com HSL, CMYK, escala de tons, cartões de contraste WCAG e snippet de tokens CSS - conversor de cores grátis online.

Conversor de cm para Polegadas

Converta centímetros para polegadas e polegadas para centímetros na hora. Conversor de cm para polegadas grátis com 1 polegada = 2,54 cm e alta precisão.