SEO e utilitáriosGrátis
Conversor de Cores Hex / RGB / HSL
Converte um código de cor entre Hex, RGB e HSL. Mostra a cor, o código CSS pronto para copiar e o nome aproximado da cor. Útil para design e desenvolvimento.
- Sem cadastro
- Funciona no navegador
Cor selecionada
#0F3D2E
Verde-azulado escuro
CSS pronto
color: #0F3D2E; background-color: rgb(15, 61, 46); border-color: hsl(160, 61%, 15%);
Quando usar cada formato
- HEX: ferramentas de design (Figma, Sketch), CMS e HTML inline.
- RGB: transparência (canal alfa) com rgba().
- HSL: sistemas de design e variações mais claras ou escuras (ajuste só o L).
Acessibilidade rápida
Texto preto sobre essa cor é difícil de ler. Use texto claro para ter contraste adequado. Para atender à WCAG AA em texto pequeno, busque contraste de pelo menos 4,5:1.
Como funciona
Como funciona o Conversor de Cores Hex / RGB / HSL
A ferramenta trabalha com os três jeitos de descrever a mesma cor. Hex usa seis dígitos em base 16 (ex: #FF6B35), RGB separa as três componentes em valores de 0 a 255, e HSL descreve matiz, saturação e luminosidade. Você cola um código em qualquer formato e a ferramenta recalcula os outros dois, mostra a cor, o código CSS pronto para copiar e o nome aproximado da cor.
Na prática: cole o laranja da sua marca como #FF6B35 e ele vira rgb(255, 107, 53) e hsl(16, 100%, 60%) na hora. A amostra confirma o tom na tela, e você copia a linha CSS direto para o seu botão de comprar ou faixa de frete grátis sem abrir o Photoshop só para pegar o valor.
Dica para o e-commerce brasileiro: padronize a paleta da loja em um só formato (de preferência Hex) e guarde os códigos do CTA, do selo de desconto e do banner. Cuidado com o atalho de 3 dígitos (#F63 não é igual a #FF6B35) e lembre que a tela do cliente pode exibir a cor um pouco diferente da impressão da etiqueta ou da embalagem.
Dúvidas
Perguntas frequentes
Qual a diferença entre Hex, RGB e HSL?
Hex usa um código hexadecimal de 6 dígitos (ex: #FF5733); RGB define a cor por canais de vermelho, verde e azul (ex: rgb(255,87,51)); HSL usa matiz, saturação e luminosidade. Os três representam a mesma cor, só mudam a notação. O conversor traduz entre os três formatos.
Como converter Hex para RGB?
Cole o código Hex (ex: #FF5733) no conversor e ele retorna o RGB equivalente, neste caso rgb(255, 87, 51). A conversão separa o Hex em pares (FF, 57, 33) e transforma cada par em um valor de 0 a 255. Funciona nos dois sentidos: RGB para Hex também.
Como descobrir o código de uma cor em CSS?
Cole a cor em qualquer formato (Hex, RGB ou HSL) e o conversor mostra o código CSS pronto para copiar, além de um preview visual e o nome aproximado da cor. É só colar direto no seu arquivo de estilo.
O conversor de cores é grátis?
Sim, o conversor de Hex, RGB e HSL é 100% gratuito, roda no navegador e não exige cadastro. Ideal para designers e desenvolvedores que precisam alternar entre formatos de cor rapidamente.
Quando usar HSL em vez de Hex no CSS?
Use HSL quando precisar ajustar a cor de forma intuitiva: clarear, escurecer ou dessaturar mexendo só na luminosidade e na saturação. Hex e RGB são mais comuns em ferramentas de design, mas HSL facilita criar variações e paletas. O conversor mostra os três para você escolher.
Blog
Artigos sobre o tema
Guia
Melhores Ferramentas para Monitorar Concorrentes em 2026 (Comparativo Honesto)
Nenhuma ferramenta faz tudo, e quem te diz o contrário quer vender uma. O comparativo direto por objetivo, com preços, pra você montar o stack certo sem desperdício.
10 min de leitura
Canais
Como Monitorar o Site de um Concorrente (Preços, Lançamentos e Mudanças)
O site é onde a estratégia do concorrente se materializa primeiro — e é o canal menos vigiado. Como detectar cada preço novo, lançamento e banner sem viver dando F5.
9 min de leitura