Seletor de cores online
Escolha uma cor no seletor visual ou digite um código HEX e copie instantaneamente o valor nos formatos HEX, RGB, HSL e CSS. A ferramenta também gera uma faixa de tons (do mais claro ao mais escuro) para você montar variações da mesma cor.
Como usar o seletor de cores
- Clique no quadrado de cor para abrir o seletor nativo do navegador, ou digite um código HEX no campo.
- Veja a cor escolhida representada nos quatro formatos mais usados na web.
- Clique em Copiar ao lado do formato desejado.
- Use a barra de tons para escolher rapidamente uma versão mais clara ou mais escura da cor.
Os formatos de cor
- HEX — o formato mais compacto, usado em design systems e CSS (
#3b82f6). - RGB — três canais de luz (vermelho, verde, azul), cada um de 0 a 255.
- HSL — matiz, saturação e luminosidade; ideal para gerar variações de tom.
- CSS — a declaração pronta para colar em uma folha de estilo.
Para que serve um color picker
Um seletor de cores é útil para escolher cores de marca, definir tokens de design, criar temas claro/escuro e padronizar a identidade visual de um site ou aplicativo. Ao copiar o código exato, você garante que a mesma cor seja reproduzida em diferentes telas e ferramentas.
Perguntas frequentes
Como pego o código de uma cor?
Escolha a cor no seletor visual ou digite o HEX. O código aparece automaticamente em HEX, RGB, HSL e CSS, com um botão para copiar cada um.
O que significam os “tons”?
São variações da mesma cor com luminosidades diferentes (mesma matiz e saturação). Servem para criar estados de hover, sombras e fundos sutis a partir de uma única cor base.
Posso usar a cor escolhida diretamente no CSS?
Sim. O campo CSS já entrega a declaração pronta (color: #3b82f6;). Você também pode copiar apenas o HEX ou o RGB conforme sua necessidade.