TL
Tool Lab
💰Donate
💰Donate

Color Picker

Pick colors and get HEX, RGB, HSL

R59
G130
B246
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Sobre esta ferramenta

O Seletor de Cores permite selecionar visualmente qualquer cor e ver instantaneamente suas representações HEX, RGB e HSL. Use o seletor nativo para seleção ampla ou os controles deslizantes RGB para controle preciso no nível do canal.

As cores selecionadas são salvas automaticamente no histórico de cores recentes, para que você possa retornar rapidamente sem redigitar. Útil para comparar variações de cor ou construir uma paleta.

Como usar

  1. Clique no grande swatch de cor para abrir o seletor nativo do navegador e escolha uma cor.
  2. Arraste os controles R, G e B para ajustar os canais de cor individuais.
  3. Clique em Copiar ao lado de HEX, RGB ou HSL para copiar o valor para a área de transferência.
  4. As cores copiadas aparecem na linha de Cores recentes — clique em qualquer swatch para restaurar.

Casos de uso

Web designers selecionam cores exatas de um guia de marca e copiam hex para CSS. Desenvolvedores ajustam valores RGB para canvas ou WebGL. Designers UI comparam variações sutis no mesmo matiz ajustando um único controle.

Perguntas frequentes

  • As cores selecionadas são salvas permanentemente?Não. Cores recentes são armazenadas no estado do componente e redefinidas ao sair ou atualizar a página. Para armazenamento permanente, copie os códigos hex para suas notas.
  • Posso digitar um código hex diretamente?Sim. Use o campo de entrada hex do seletor nativo (disponível na maioria dos navegadores) para digitar um valor hex.
  • O que é HSL e por que é útil?HSL significa Matiz (Hue), Saturação (Saturation) e Luminosidade (Lightness). Descreve a cor de forma intuitiva — alterar a luminosidade torna a cor mais clara ou escura mantendo o mesmo matiz, útil para gerar tints e sombras.