Início›Conversores›Conversor HEX RGB
🔄 Conversores

Conversor HEX ↔ RGB ↔ HSL

Converta cores entre os formatos HEX, RGB e HSL com pré-visualização em tempo real. Essencial para designers e desenvolvedores web.

🎨 Converter Cor

🎨 Para que Serve o Conversor de Cores?

No desenvolvimento web e no design, as cores podem ser representadas em diferentes formatos: HEX (hexadecimal, como #3498db), RGB (canais vermelho, verde e azul, como rgb(52, 152, 219)) e HSL (matiz, saturação e luminosidade). Cada linguagem e ferramenta tem preferências diferentes — CSS aceita todos os três, mas ferramentas de design como Figma exportam em HEX, enquanto filtros de imagem trabalham melhor com HSL.

Este conversor permite transformar uma cor entre todos esses formatos instantaneamente, com pré-visualização em tempo real da cor resultante. Você também pode usar o seletor de cor para escolher visualmente e obter os códigos correspondentes.

🚀 Como Usar

1
Insira o código da corDigite um valor HEX, ajuste os sliders RGB, ou use o seletor visual de cores.
2
Veja a pré-visualizaçãoO painel colorido mostra a cor em tempo real enquanto você edita.
3
Copie o formato desejadoClique em "Copiar" ao lado do formato que precisa: HEX, RGB ou HSL.

💡 Dicas de Uso

  • Para CSS moderno, use variáveis: --cor-primaria: #3498db — assim você muda a cor em um só lugar e ela atualiza em todo o site.
  • O formato HSL é mais intuitivo para ajustar cores: aumente a luminosidade para versões mais claras, diminua para versões mais escuras.
  • Para criar paletas harmônicas, use cores com o mesmo matiz (H) mas saturações e luminosidades diferentes.
  • Cores com contraste suficiente são essenciais para acessibilidade — texto escuro sobre fundo claro (ou vice-versa) deve ter relação de contraste mínima de 4,5:1.
  • O HEX é o formato mais compacto e amplamente suportado — ideal para usar no código-fonte de sites.
  • Para transparência em CSS, use RGBA: rgb(52, 152, 219, 0.5) para 50% de opacidade, ou cores HEX com 8 dígitos (#3498db80).