Quando um design usa uma cor que você quer reutilizar, estimá-la visualmente é lento e inconsistente. Um seletor de cores de uma imagem lê o pixel escolhido e retorna valores HEX, RGB e HSL. Abra o seletor de cores de imagem, carregue uma foto ou captura, clique na cor e copie o valor necessário.
A ferramenta lê a imagem no navegador, aceita JPG, PNG e WebP e permite ampliar o canvas quando é difícil acertar um ponto preciso. Você pode clicar com o mouse ou usar o teclado; apenas uma amostra fica ativa por vez.
O que um seletor de cores de imagem faz?
A ferramenta coleta um pixel selecionado e o converte em formatos comuns:
- HEX é prático para CSS, web e tokens de design.
- RGB é útil quando o fluxo precisa dos canais vermelho, verde e azul.
- HSL facilita trabalhar com matiz, saturação e luminosidade.
Clique em outro ponto para substituir a amostra ativa e copie o novo valor. Isso ajuda a combinar um fundo, conferir uma foto de produto ou transformar a cor de uma captura em um valor reutilizável.
Como escolher uma cor de uma imagem online
1. Escolha uma fonte clara
Use a foto original ou uma captura de alta resolução quando possível. Uma miniatura comprimida, uma prévia borrada ou um filtro de cor pode mudar o tom exato que você quer reproduzir.
2. Abra o seletor de cores online
Abra o seletor de cores de uma imagem e escolha um arquivo JPG, PNG ou WebP. A imagem é processada no navegador e não precisa ser enviada a um servidor para a amostragem.
3. Clique no pixel desejado
Clique na parte da imagem cuja cor você quer identificar. Em um fundo plano, evite bordas e sombras. Em um produto ou ilustração, escolha uma área representativa em vez de um brilho, reflexo ou borda suavizada. Amplie quando necessário.
4. Copie o código da cor
Copie HEX quando precisar de uma cor CSS, ou use RGB e HSL se a próxima ferramenta ou o sistema de design exigir. Cole o valor no código, arquivo de design, notas da marca ou variável e revise-o no destino real.
Como obter uma amostra mais confiável
A cor visível em uma foto é afetada por iluminação, sombras, reflexos, compressão e tela. Uma amostra de um pixel fornece o valor daquele ponto, mas não recupera automaticamente uma cor original da marca alterada pela fotografia ou pela correção de cor.
Em um gráfico plano, escolha uma área central com preenchimento uniforme. Em uma foto, tire várias amostras do mesmo material e compare-as. Evite bordas, textos suavizados e superfícies brilhantes.
Se a imagem for grande demais, use o redimensionador de imagens para criar uma cópia de trabalho e mantenha o original. Remova bordas que distraem com o cortador de imagens antes de coletar as cores.
HEX, RGB ou HSL: qual valor usar?
Use HEX para estilos web
HEX é compacto e comum em CSS, tokens de design e documentação. Um valor como #2F80ED pode ser colado diretamente em uma folha de estilos.
Use RGB para canais e transparência
RGB mostra separadamente os canais vermelho, verde e azul. É útil para comparar canais ou transformar o valor em rgba() com uma transparência separada.
Use HSL para variações controladas
HSL separa matiz, saturação e luminosidade, facilitando criar um fundo mais claro, uma borda suave ou um estado hover mais escuro sem perder o matiz principal.
Erros comuns ao escolher cores
Amostrar uma sombra em vez da cor base
Uma sombra pode deixar uma superfície neutra cinza ou escurecer uma cor. Escolha uma área iluminada e representativa e compare pixels próximos.
Escolher um pixel da borda
As bordas podem conter pixels misturados por suavização ou compressão. Mova o ponto para o centro do objeto ou do fundo.
Usar uma captura com filtro de tela
Modo noturno, HDR, perfis de cor e extensões podem mudar a aparência. Quando a cor for importante, use o arquivo original ou uma captura sem alterações.
Tratar uma amostra como uma paleta completa
O seletor identifica a cor clicada e mantém uma amostra ativa, mas não cria uma paleta automaticamente. Colete as cores principais uma por uma e registre a função de cada uma.
Esquecer o contexto de uso
A mesma cor pode parecer diferente ao lado de outro fundo ou em outra tela. Teste o valor no site, componente, anúncio ou arquivo de design real e confira contraste e legibilidade.
Fluxo simples de entrega do design
- Mantenha a foto ou captura original como referência.
- Colete separadamente as cores do fundo, do tema, do texto e do destaque.
- Registre cada HEX com uma função significativa.
- Use RGB ou HSL quando a implementação precisar.
- Verifique contraste, estados hover e tamanho final de exibição.
Use o compressor de imagens somente depois da amostragem. Converta a cópia final com PNG para WebP quando o destino aceitar, mas mantenha a fonte para futuras verificações.
Perguntas frequentes
Como escolher uma cor de uma imagem?
Abra o seletor de cores de imagem, escolha JPG, PNG ou WebP, clique no pixel desejado e copie o valor HEX, RGB ou HSL.
Como encontrar um código HEX em uma imagem?
Carregue a imagem no seletor HEX de uma imagem, clique em um pixel representativo e copie o HEX exibido.
Posso escolher uma cor de uma captura de tela?
Sim. Uma captura pode ser amostrada como qualquer imagem compatível. Para chegar mais perto da origem, use uma captura sem compressão e evite bordas, sombras e filtros de tela.
Posso escolher várias cores?
Sim, mas apenas uma amostra fica ativa por vez. Clique em cada pixel, copie ou registre o valor antes de selecionar o próximo.
O seletor de cores é privado?
A amostragem é executada no navegador depois que a página carrega. A imagem não precisa ser enviada a um servidor para ler o pixel.
Continue com as ferramentas de imagem
Use o seletor de cores de imagem para obter valores de fotos ou capturas. O cortador de imagens remove bordas, o redimensionador prepara uma cópia de trabalho e o compressor de imagens prepara o arquivo final.