Pular para o conteúdo principal
Ferramenta para Design e Código

Conversor de Cores

Transforme qualquer cor entre HEX, RGB e HSL com pré-visualização instantânea. Perfeito para criar paletas consistentes entre design e desenvolvimento.

Aplicações Comuns

  • • Padronizar paletas de cores para web.
  • • Ajustar saturação e luminosidade de uma cor.
  • • Converter cores do Figma/Photoshop para CSS.
  • • Extrair valores RGB de um código HEX.

Ferramentas de Dev

Para outras tarefas, use o Formatador de CSS ou o Gerador de UUID.

Dicas rápidas

  • O formato HEX é o mais usado em design web (#RRGGBB).
  • RGB representa a intensidade de vermelho, verde e azul entre 0 e 255.
  • HSL facilita ajustes de saturação e luminosidade ao estudar variações de uma mesma cor.

Entendendo os Formatos de Cor

Cada formato de cor tem uma finalidade. HEX (Hexadecimal) é um padrão compacto e universal na web. RGB (Red, Green, Blue) representa a cor pela intensidade de luz vermelha, verde e azul, sendo ideal para telas. Já o HSL (Hue, Saturation, Lightness) é mais intuitivo para humanos, pois permite ajustar a matiz (a cor em si), a saturação (a pureza da cor) e a luminosidade (quão clara ou escura ela é).

Dicas para Acessibilidade

Ao escolher cores para um site ou aplicativo, a acessibilidade é fundamental. Use o formato HSL para criar variações de uma cor principal. Aumentar a Luminosidade (L) torna a cor mais clara, enquanto diminuí-la a torna mais escura. Isso ajuda a criar contrastes adequados entre o texto e o fundo, garantindo que pessoas com baixa visão consigam ler o conteúdo. Ferramentas de verificação de contraste podem ser usadas em conjunto com nosso conversor.

Perguntas Frequentes

Tire suas dúvidas sobre conversão de formatos de cores.

Qual formato de cor é melhor para usar em CSS?+

Todos os três (HEX, RGB, HSL) são amplamente suportados. HEX é o mais compacto. RGB é direto e fácil de entender. HSL (Matiz, Saturação, Luminosidade) é excelente para criar variações de uma cor (tons mais claros ou mais escuros) de forma intuitiva.

É possível converter cores com transparência?+

Este conversor trabalha com cores opacas. Para transparência, você deve usar os formatos RGBA ou HSLA, que adicionam um canal 'alfa' (um valor de 0 a 1). Por exemplo, `rgba(255, 0, 0, 0.5)` para um vermelho 50% transparente.

Como posso pegar uma cor de um site ou imagem?+

Use uma extensão de navegador como o ColorZilla ou a ferramenta conta-gotas (eyedropper) nativa do seu navegador ou software de design (Figma, Photoshop). Copie o código HEX e cole em nosso conversor para obter os valores RGB e HSL.

O que significam os números em cada formato?+

HEX: #RRGGBB (pares de valores hexadecimais para Vermelho, Verde e Azul). RGB: rgb(R, G, B) (valores de 0 a 255 para cada cor primária). HSL: hsl(H, S, L) (Matiz de 0 a 360, Saturação e Luminosidade de 0 a 100%).