Ferramenta da Categoria Geradores

Color Picker e Conversor de formatos de cor (HEX, RGB, HSL)

Escolha cores e obtenha seus códigos equivalentes para projetos de design e front-end.

Inclui
  • Seletor visual do navegador
  • Conversão entre HEX, RGB e HSL
  • Pré-visualização instantânea
  • Sugestão de cor de texto legível
  • Cópia de cada formato com um clique
Seleção de cores

Ajuste a cor visualmente e acompanhe os formatos em tempo real

Escolha uma cor pelo seletor do navegador, refine o HEX ou os canais RGB e copie o formato pronto para usar em CSS, interfaces e documentação.

Pré-visualização
--

Ajuste os campos para ver a cor.

Use o formato #RRGGBB.

Informe uma cor HEX.

Use números entre 0 e 255.

Use números entre 0 e 255.

Use números entre 0 e 255.

HEXInválido
RGBrgb(0, 0, 0)
HSLhsl(0, 0%, 0%)
Para quem é

Leve a mesma cor para HEX, RGB e HSL sem fazer contas

O seletor de cores atende designers, desenvolvedores front-end e quem monta apresentações e precisa repetir uma cor exata em outro programa.

  • Converta um código HEX recebido de uma marca para RGB ou HSL.
  • Monte uma cor a partir dos canais vermelho, verde e azul.
  • Veja se texto claro ou escuro fica mais legível sobre a cor.
Instruções

Como usar

  1. 1. Informe um HEX de seis dígitos ou ajuste os valores de R, G e B.
  2. 2. Confira a amostra e os formatos gerados.
  3. 3. Observe a sugestão de cor de texto para a amostra.
  4. 4. Copie o formato de que você precisa.
Como funciona

Três formas de escrever a mesma cor

HEX, RGB e HSL descrevem a mesma cor de maneiras diferentes. A ferramenta converte entre eles automaticamente.

HEX

Seis dígitos hexadecimais, dois para cada canal.

#FF6600 significa vermelho FF, verde 66 e azul 00.

RGB

Cada canal vai de 0 a 255.

É o formato usado por muitas ferramentas de edição de imagem.

HSL

Matiz em graus, saturação e luminosidade em porcentagem.

Facilita criar variações mais claras ou escuras da mesma cor.

Exemplo verificável

Laranja #FF6600

Ao informar o HEX abaixo, a ferramenta mostra os valores equivalentes.

HEX
#FF6600
RGB
rgb(255, 102, 0)
HSL
hsl(24, 100%, 50%)

Para esse laranja, a sugestão de texto é branca, porque a cor não é clara o suficiente para texto escuro.

Limites

Limites do seletor

A ferramenta trabalha com cores opacas em formato de tela.

  • O HEX precisa ter seis dígitos: a forma curta, como #F60, e a transparência não são aceitas.
  • A sugestão de texto usa uma estimativa de brilho e não substitui uma verificação completa de contraste de acessibilidade.
  • Cores de impressão, como CMYK e Pantone, não são convertidas.
FAQ

Perguntas frequentes

Qual é a diferença entre HEX, RGB e HSL?

HEX representa a cor em componentes hexadecimais; RGB combina vermelho, verde e azul; HSL descreve matiz, saturação e luminosidade. São formas diferentes de representar a mesma cor.