Início›Dev›Conversor de cores
Dev

Conversor de cores

Converta cores entre HEX, RGB e HSL instantaneamente.

Clique para escolher uma cor ou edite os campos abaixo
RGB
HS%L%

Como usar

  1. Digite um valor HEX, RGB ou HSL no campo correspondente — ou use o seletor de cor visual.
  2. Os outros formatos são calculados e exibidos automaticamente.
  3. Clique em qualquer valor para copiar no formato desejado.

Dicas de uso

CSS usa os três formatos de cor em contextos diferentes. HEX é o mais compacto para paletas fixas, RGB para manipulações programáticas com JavaScript, e HSL para criar variações de tom e saturação de forma intuitiva.

  • HSL é o mais intuitivo para criar variações: aumente o L (lightness) para tons mais claros, diminua para tons mais escuros da mesma cor.
  • Para variáveis CSS, prefira HSL: --primary: hsl(220, 90%, 56%) — você manipula as variações diretamente no código.
  • Copie o HEX para ferramentas de design como Figma; use RGB para manipulações em canvas e JavaScript.

💡 Próximo passo: Paleta de cores — extraia as cores dominantes de uma imagem e use este conversor para exportar no formato que o seu projeto precisa.