Conversor de Cores Hex / RGB / HSL
Cole um código Hex, RGB ou HSL e converta entre os três formatos. Mostra preview visual, código CSS pronto pra copiar e nome aproximado da cor. Útil pra designers e dev.
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 — design tools (Figma, Sketch), CMS, HTML inline.
- • RGB — alfa/transparência via rgba().
- • HSL — sistemas de design e variações claras/escuras (mexe só no L).
Acessibilidade rápida
Texto preto sobre essa cor é difícil de ler. Use texto claro pra contraste adequado. Pra atender WCAG AA em texto pequeno, mire em contraste ≥ 4,5:1.
Como funciona
Como funciona o Conversor de Cores Hex / RGB / HSL
A ferramenta trabalha com os tres jeitos de descrever a mesma cor. Hex usa seis digitos em base 16 (ex: #FF6B35), RGB separa as tres componentes em valores de 0 a 255, e HSL descreve matiz, saturacao e luminosidade. Voce cola um codigo em qualquer formato e a ferramenta recalcula os outros dois, mostra o preview visual, o codigo CSS pronto pra copiar e o nome aproximado da cor.
Na pratica: cole o laranja da sua marca como #FF6B35 e ele vira rgb(255, 107, 53) e hsl(16, 100%, 60%) na hora. O preview confirma o tom na tela, e voce copia a linha CSS direto pro seu botao de comprar ou faixa de frete gratis sem ficar abrindo o Photoshop so pra pegar o valor.
Dica pro e-commerce brasileiro: padronize a paleta da loja em um so formato (de preferencia Hex) e guarde os codigos do CTA, do selo de desconto e do banner. Cuidado com o atalho de 3 digitos (#F63 nao e igual a #FF6B35) e lembre que a tela do cliente pode exibir a cor um pouco diferente da impressao da etiqueta ou da embalagem.
Aprenda mais
Artigos pra usar essa ferramenta
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.
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.
Dúvidas frequentes
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 pra 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 pra 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 saturação. Hex e RGB são mais comuns em design tools, mas HSL facilita criar variações e paletas. O conversor mostra os três pra você escolher.
