🌈Conversor de cores (HEX, RGB, HSL)
Escolha uma cor no seletor ou digite diretamente em HEX, RGB ou HSL — os outros dois formatos se atualizam automaticamente, junto com um preview da cor escolhida.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: Modelos de cor RGB e HSL — CSS Color Module — fórmulas padrão de conversão RGB↔HSL usadas em qualquer ferramenta de design ou especificação CSS · Última verificação em 23/09/2026
O conversor lê a cor digitada em qualquer um dos três formatos (HEX, RGB ou HSL), converte para RGB como formato intermediário e recalcula os outros dois. HEX e RGB guardam os mesmos valores de vermelho, verde e azul em bases diferentes; HSL descreve a cor por matiz, saturação e luminosidade, mais intuitivo para ajustar tons.
Como usar a ferramenta
- Escolha a cor no seletorClique no quadrado de cor para abrir a paleta nativa do navegador e escolher visualmente.
- Ou digite direto em qualquer campoDigite um HEX (#2FA153), um RGB (rgb(47, 161, 83)) ou um HSL (hsl(139, 55%, 41%)) — a ferramenta identifica o formato e converte os outros dois.
- Copie o formato que precisarCada campo (HEX, RGB, HSL) tem seu próprio botão de copiar, para levar direto ao seu CSS, design ou código.
Como funciona
Os três formatos descrevem exatamente a mesma informação de cor, só que de jeitos diferentes. HEX e RGB são praticamente a mesma coisa: ambos guardam a quantidade de vermelho, verde e azul (de 0 a 255 cada), mas HEX escreve esses números em base 16 (dois dígitos hexadecimais por cor, como "2F" para 47), enquanto RGB escreve em base 10, no formato que humanos leem mais facilmente.
HSL é um modelo diferente, pensado para ajustar cores de forma mais intuitiva: matiz (hue) é um ângulo de 0 a 360 graus na roda de cores (0° é vermelho, 120° é verde, 240° é azul); saturação é o quanto a cor é vibrante ou acinzentada (0% é cinza puro, 100% é cor pura); luminosidade é o quanto a cor tende ao preto ou ao branco (0% é preto, 100% é branco, 50% é a cor "pura").
A conversão de RGB para HSL usa o maior e o menor valor entre R, G e B para calcular a luminosidade e a saturação, e a posição relativa dos três valores para calcular o matiz. A conversão de volta, de HSL para RGB, desfaz esse cálculo em etapas, reconstruindo os três valores de cor a partir do ângulo de matiz e das porcentagens de saturação e luminosidade. Sempre que você edita um campo, a ferramenta converte para RGB como formato intermediário e recalcula os outros dois a partir dele.
RGB → HSL: L = (máx+mín)÷2; S depende da diferença entre máx e mín; H depende de qual canal é o máximo
Exemplo resolvido
Digite #2FA153 no campo HEX (o verde usado neste site). Convertendo: "2F" em hexadecimal é 47 em decimal, "A1" é 161, e "53" é 83 — então o RGB equivalente é rgb(47, 161, 83).
Para chegar ao HSL: o valor máximo entre 47, 161 e 83 é 161 (verde) e o mínimo é 47 (vermelho). A luminosidade é a média entre o máximo e o mínimo, normalizados de 0 a 1: (161+47)/2/255 ≈ 0,41, ou 41%. A saturação e o matiz seguem fórmulas parecidas, considerando que o canal verde é o dominante — o resultado final é hsl(139, 55%, 41%): um matiz de 139° (na faixa dos verdes), com saturação e luminosidade moderadas, o que produz um verde equilibrado, nem muito claro nem muito escuro — exatamente a cor de destaque usada nos botões deste site.
Suposições e limitações
- Não converte formatos com canal alfa (transparência), como #RRGGBBAA, rgba() ou hsla() — apenas cores totalmente opacas
- Os valores de matiz, saturação e luminosidade são arredondados para números inteiros ao exibir, o que pode gerar uma diferença de ±1 unidade de RGB em conversões de ida e volta (HEX → HSL → HEX), por causa do arredondamento — normal em qualquer conversor de cor
- HEX de 3 dígitos (formato abreviado, como #2A5) é aceito na entrada, mas a saída sempre usa o formato completo de 6 dígitos
- Não reconhece nomes de cores em texto (como "verde" ou "green") — apenas os três formatos numéricos
Dicas para tirar o melhor proveito
Use HEX para colar direto em código CSS ou design tools — é o formato mais compacto e o mais usado em folhas de estilo. Use HSL quando estiver ajustando uma cor manualmente e quiser manter o mesmo matiz, só variando a intensidade: mude apenas a luminosidade para clarear ou escurecer, ou apenas a saturação para deixar a cor mais viva ou mais acinzentada, sem precisar recalcular tudo. Use o seletor de cor visual quando não souber o valor exato de uma cor, mas conseguir identificá-la visualmente — é o caminho mais rápido para começar. Para criar uma paleta de tons de uma mesma cor (útil em design de interface), converta para HSL e gere variações mudando só a luminosidade em passos de 10%.
Erros comuns a evitar
Digitar um RGB com valores acima de 255 (como "rgb(300, 50, 20)") — cada canal de cor vai de 0 a 255, e valores fora dessa faixa não representam uma cor válida; a ferramenta rejeita e mostra um erro. Esquecer o símbolo "#" ao digitar HEX manualmente — a maioria dos formatos aceita com ou sem o símbolo, mas é boa prática sempre incluir. Confundir HSL com HSV/HSB (outro modelo de cor parecido, mas com uma terceira dimensão calculada de forma diferente) — os valores de saturação e luminosidade não são os mesmos nos dois modelos, então não dá para simplesmente copiar um HSV como se fosse HSL. E tentar colar um nome de cor em português ou inglês ("vermelho", "red") — o conversor trabalha apenas com os três formatos numéricos, não com nomes.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Formatador e validador de JSON, Gerador de gradiente CSS, Contador de linhas, palavras e caracteres, Gerador de UUID.
Ferramentas relacionadas
🧾Formatador e validador de JSON
Cole um JSON, formate com indentação, minifique ou descubra exatamente onde está o erro.
Abrir ferramenta →🎨Gerador de gradiente CSS
Escolha as cores e a direção, veja o preview ao vivo e copie o código CSS pronto.
Abrir ferramenta →📝Contador de linhas, palavras e caracteres
Conte linhas, palavras, caracteres e parágrafos de um texto.
Abrir ferramenta →🆔Gerador de UUID
Gere identificadores únicos UUID v4 (aleatórios) ou v7 (ordenáveis por tempo).
Abrir ferramenta →Perguntas frequentes
Qual a diferença entre HEX, RGB e HSL?
Os três descrevem a mesma cor de formas diferentes. HEX e RGB guardam a quantidade de vermelho, verde e azul (em base 16 e base 10, respectivamente). HSL descreve a cor por matiz, saturação e luminosidade, mais intuitivo para ajustar tons manualmente.
Por que o RGB que eu digitei não bateu exatamente com o HEX original?
Pequenas diferenças de ±1 em algum canal podem acontecer por arredondamento ao converter entre HSL (que usa porcentagens) e RGB (que usa números inteiros de 0-255). É um comportamento normal em qualquer conversor de cor, não um erro.
O conversor aceita cores com transparência?
Não nesta versão — o conversor trabalha apenas com cores totalmente opacas em HEX, RGB e HSL. Formatos com canal alfa, como RGBA e HSLA, não são convertidos.
Como funciona o seletor de cor (color picker)?
É o seletor nativo do navegador, o mesmo usado em formulários HTML com input type="color". Ele sempre retorna um valor HEX de 6 dígitos, que a ferramenta usa para calcular o RGB e o HSL equivalentes.
Posso digitar HEX abreviado, com 3 dígitos?
Sim. Um HEX de 3 dígitos como #2A5 é interpretado como #22AA55 (cada dígito é duplicado) e convertido normalmente. A saída sempre mostra o formato completo de 6 dígitos.
Meus dados de cor ficam salvos em algum lugar?
Não. Toda a conversão acontece no seu navegador, em JavaScript — nenhuma cor digitada é enviada ou armazenada em um servidor.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.