Conversor RGB para HSL

Como converter RGB para HSL

Inserir RGB
Vermelho, Verde e Azul (0–255 cada) com controles ou campos.
Ver HSL
Matiz (0–360°), saturação e luminosidade (0–100 %) se atualizam automaticamente.
Copiar ou usar
Copie os valores HSL para CSS, ferramentas de design ou edição.

Por que converter RGB em HSL?

Converter RGB em HSL permite manipular cores de forma mais intuitiva, ajustar luminosidade e saturação com facilidade e melhorar o fluxo de design.

Vantagens do formato HSL

Seleção intuitiva: Representação frequentemente mais natural
Ajuste simples: Luminosidade e saturação fáceis de alterar
Ferramentas de design: Muito usado em aplicativos criativos
Manipulação de cor: Criar variações com mais facilidade
Compreensão visual: Melhor percepção das relações entre cores

RGB vs HSL: a diferença

Compreender RGB e HSL ajuda a escolher o formato certo.

Características do RGB

Valores Vermelho, Verde, Azul
Cada componente de 0 a 255
Controle de cor mais preciso
Formato padrão em design digital
Compatível com todas as ferramentas de design

Características do HSL

Modelo matiz, saturação, luminosidade
Representação intuitiva
Luminosidade e saturação fáceis de ajustar
Comum em ferramentas de design
Frequentemente mais intuitivo para escolher cores

Por que a luminosidade HSL não é o que o olho vê

HSL é o modelo de cor mais simples de raciocinar e o menos confiável para construir uma paleta. Vale a pena saber por quê antes de comprometer um tema com ele.

50% de luminosidade não é um só brilho — hsl(60 100% 50%) é um amarelo vivo e hsl(240 100% 50%) é um azul escuro. Mesmo número, brilho aparente muito diferente: uma rampa baseada nisso fica desigual.
Clarear desvia o matiz — Aumente a luminosidade de um azul em HSL e ele deriva para o roxo. O OKLCH foi criado exatamente para isto, e esta página mostra ambos para comparar.
O cinza não tem matiz nenhum — Com 0% de saturação o matiz é indefinido, não zero. Esta página mantém o matiz que você escreveu em vez de redefini-lo, para você poder definir o matiz primeiro e acrescentar saturação depois.
A saturação se comporta de outra forma nos extremos — Quando a luminosidade se aproxima de 0% ou 100%, toda a saturação converge para preto ou branco — por isso pequenos ajustes ali parecem não fazer nada.

Quando converter RGB em HSL

Quando precisar de manipulação intuitiva, ajustes mais simples ou melhor escolha de cores no design.

Casos de uso ideais

Design: HSL para manipulação mais simples
Variações: Criar variações mais facilmente
Luminosidade: Ajustar luminosidade de forma intuitiva
Saturação: Controlar a saturação com facilidade
Ferramentas: HSL em aplicativos de design

Fatos sobre RGB → HSL

Informação útil para decidir com confiança.

Estatísticas-chave

HSL: matiz 0–360, saturação e luminosidade 0–100 %
RGB: vermelho, verde, azul de 0 a 255 cada
A conversão mantém a precisão da cor
HSL é frequentemente mais intuitivo para escolher cores
RGB é mais preciso para controle por canal

Boas práticas

Orientações para melhores resultados.

Qualidade

Verifique os valores RGB antes da conversão
Use intervalos válidos (0–255 por componente)
Confirme a exatidão dos valores HSL
Teste as cores no aplicativo de destino
Leve em conta espaço de cor e gamut

Quando não converter

Não converta se o RGB bastar
Mantenha RGB quando o aplicativo o exigir
Evite a conversão se a compatibilidade de formato não for necessária
Não converta se o destino não suportar HSL

Limitações e compatibilidade

A conversão roda no dispositivo; requer JavaScript e dispositivo recente.

Com algoritmos otimizados de processamento de imagem.

Os outros conversores de cor

Perguntas frequentes

Como funciona o conversor de RGB para HSL?

Insira Vermelho, Verde e Azul (0-255) com os controles deslizantes ou campos e a ferramenta os converte em Matiz (0-360 graus), Saturação (0-100%) e Luminosidade (0-100%). Uma prévia é atualizada na hora e você pode copiar os valores HSL para CSS ou ferramentas de design.

O que é HSL e por que usá-lo?

O HSL descreve a cor por Matiz (a cor em uma roda de 360 graus), Saturação (quão intensa é) e Luminosidade (quão clara). Ele corresponde à forma como as pessoas pensam a cor, facilitando ajustar o tom ou criar variações de tema em vez de editar números RGB brutos.

A conversão de RGB para HSL perde informação?

Não. HSL e RGB descrevem a mesma cor em coordenadas diferentes, então a conversão é reversível e sem perdas. Converta para HSL, ajuste os valores e você pode voltar ao RGB ou HEX sem degradar a cor.

Quais faixas os valores HSL usam?

O Matiz vai de 0 a 360 graus ao redor da roda de cores, enquanto a Saturação e a Luminosidade são porcentagens de 0 a 100. O conversor exibe os resultados exatamente nessas faixas, igual à sintaxe hsl() usada no CSS.

Como ajusto cores usando HSL?

Altere o Matiz para mudar de cor, aumente ou reduza a Saturação para deixá-la mais viva ou suave, e ajuste a Luminosidade para clarear ou escurecer. Isso torna o HSL ideal para gerar tons, sombras e escalas de cor de interface consistentes.

A ferramenta é gratuita, privada e funciona offline?

Sim. O conversor é totalmente gratuito, e cada cálculo é executado localmente no seu dispositivo, então suas cores nunca são enviadas. Funciona no celular e no computador e continua funcionando depois que a página carrega.