Como descobrir a cor de uma imagem (5 métodos)

Por Felipe Silva · Atualizado em 25/09/2026

O jeito mais rápido de descobrir a cor de uma imagem é abrir um conta-gotas digital, apontar para o pixel que interessa e copiar o código. Você pode fazer isso direto no navegador, sem instalar nada, com o seletor de cor em imagem deste site: envie ou cole a imagem, clique no ponto desejado e receba o valor em HEX, RGB, HSL, HSV e CMYK.

Se você já trabalha em um editor ou no DevTools, também dá para resolver ali mesmo. A seguir estão cinco métodos, do mais simples ao mais especializado, os atalhos do sistema operacional e os cuidados para que o código capturado seja de fato a cor que você está vendo.

Método 1: a ferramenta online do site

É o caminho indicado quando você tem um arquivo, um print ou uma foto e quer o código sem abrir nenhum programa pesado. Tudo acontece no próprio navegador.

1. Carregue a imagem. Clique na área de envio e escolha o arquivo, arraste a imagem para cima dela ou cole da área de transferência com Ctrl+V (Cmd+V no Mac). Colar é o atalho ideal para capturas de tela: tire o print e cole direto na página.
2. Use a lupa. Ao passar o cursor sobre a imagem, uma lupa mostra os pixels ampliados em volta do ponteiro. Isso evita clicar sem querer na borda de um texto ou numa sombra.
3. Clique no pixel. A cor fica registrada e os códigos aparecem em vários formatos, cada um com botão de copiar.
4. Capture fora da imagem, se precisar. O botão “Capturar da tela” aciona o conta-gotas do sistema (a EyeDropper API, disponível no Chrome e no Edge para desktop) e permite pegar a cor de qualquer ponto visível, inclusive de outra janela.

A ferramenta também indica a cor nomeada mais próxima. Se você clicou num azul escuro e o resultado aponta para azul-marinho, a página dessa cor traz combinações e variações prontas.

Método 2: o conta-gotas do navegador

Para quem desenvolve, o navegador já tem um conta-gotas embutido. É útil para descobrir a cor de algo que está numa página web, seja um botão, um fundo ou uma imagem.

Chrome e Edge

1. Abra o DevTools com F12 ou Ctrl+Shift+I (Cmd+Option+I no Mac).
2. No painel de estilos de qualquer elemento, clique no pequeno quadrado de cor ao lado de uma propriedade como color ou background-color.
3. No seletor de cor que se abre, ative o ícone de conta-gotas e clique em qualquer ponto da página. O valor da propriedade passa a ser a cor capturada, e você pode alternar o formato exibido (HEX, RGB, HSL e outros) no próprio seletor.

Os dois navegadores também implementam a EyeDropper API, que permite a um site abrir o conta-gotas do sistema com um clique. É essa API que torna possível o botão “Capturar da tela” do método anterior. Ela ainda não existe no Firefox nem no Safari, e a documentação atualizada fica no MDN.

Firefox

O Firefox tem um conta-gotas próprio no DevTools. No Inspetor, procure o ícone de conta-gotas na barra de ferramentas: ao ativá-lo, uma lupa acompanha o cursor e, ao clicar, o código HEX é copiado para a área de transferência. O seletor de cor do painel de regras também tem conta-gotas, como no Chrome.

Método 3: Photoshop

No Photoshop você controla a área de amostragem, o que é valioso em fotografias.

1. Selecione a ferramenta Conta-gotas pela barra de ferramentas ou com a tecla I.
2. Na barra de opções, ajuste o tamanho da amostra. “Amostra de ponto” lê 1 pixel exato; as opções de média 3 × 3 e 5 × 5 calculam a média dos pixels ao redor, o que suaviza ruído e granulação.
3. Clique na imagem. A cor vai para a cor de primeiro plano, visível no painel de cores e na barra de ferramentas.
4. Clique na amostra de cor de primeiro plano para abrir o Seletor de Cores. Ali há um campo com o código HEX (marcado com #) e os valores RGB, HSB, Lab e CMYK, que você pode selecionar e copiar.

Uma dica: segurar o botão do mouse e arrastar com o conta-gotas atualiza a cor em tempo real, e você solta quando encontrar o tom certo.

Método 4: Figma

No Figma, o conta-gotas fica dentro do seletor de cor de qualquer preenchimento ou traço.

1. Selecione uma camada e clique na amostra de cor do preenchimento, no painel de propriedades.
2. No seletor que se abre, clique no ícone de conta-gotas ou pressione I.
3. Passe sobre a imagem (a lupa mostra os pixels) e clique. A camada recebe a cor e o código HEX aparece no campo do seletor, pronto para copiar.

Se você só quer ler a cor, sem alterar a camada, aplique-a num retângulo temporário e apague depois. Em imagens com detalhes pequenos, aumente o zoom do canvas antes de clicar para acertar o pixel.

Método 5: no celular

No smartphone há dois cenários bem diferentes:

• Imagem que já está no aparelho (foto, print, arte recebida por mensagem): abra o seletor de cor online no navegador do celular, envie a imagem pela galeria e toque no ponto desejado. Funciona sem instalar app. O botão de capturar da tela, por depender da EyeDropper API, não está disponível em navegadores móveis.
• Objeto do mundo real (uma parede, um tecido, uma embalagem): aí entram os apps de câmera que identificam cores, como o Adobe Capture e outros semelhantes. Eles ajudam a ter uma referência, mas a leitura depende da luz ambiente, do balanço de branco e do processamento da câmera. Uma parede branca sob luz amarela sai amarelada na foto. Para cor física exata, o padrão continua sendo um catálogo impresso ou um colorímetro.

Atalhos do sistema operacional

Às vezes a cor está num aplicativo que não tem conta-gotas. Os próprios sistemas oferecem soluções:

• Windows, PowerToys Color Picker: depois de instalar o PowerToys (gratuito, da Microsoft) e ativar o módulo Color Picker, pressione Win+Shift+C. Uma lupa aparece sobre a tela; ao clicar, o código é copiado no formato configurado (HEX por padrão) e fica salvo num histórico.
• macOS, Medidor de Cores Digital (Digital Color Meter): já vem instalado, na pasta Utilitários dentro de Aplicativos. Ele mostra os valores do pixel sob o cursor em tempo real. Escolha no menu do app o espaço de cor exibido (por exemplo, sRGB) e o formato dos valores, e use as opções do próprio app para travar a posição e copiar a cor.

Por que a cor capturada pode não bater

É comum clicar em duas áreas “da mesma cor” e receber códigos diferentes. As causas mais frequentes:

Um exemplo prático: o laranja de um logotipo pode ser #FF5733, ou seja, rgb(255, 87, 51). Num JPEG muito comprimido, pixels vizinhos podem aparecer como #FE5834 ou #FF5631. Diferenças de uma ou duas unidades por canal são imperceptíveis, mas, se você precisa do valor oficial de uma marca, procure o manual de identidade visual em vez de depender só da captura.

O que fazer depois de descobrir a cor

Com o código em mãos, os próximos passos mais comuns são:

• Extrair a paleta inteira. Se a imagem é uma referência de estilo, o extrator de paleta de cores identifica as cores dominantes de uma vez, sem clicar pixel por pixel.
• Converter para outro formato. O conversor de cores transforma HEX em RGB, HSL, CMYK e outros. Para entender o que cada formato significa, veja o guia de códigos de cor HEX, RGB e HSL.
• Levar para impressão. Um valor capturado da tela está em RGB; antes de mandar para a gráfica, leia RGB x CMYK.
• Montar combinações. Com uma cor base, o guia de harmonia de cores mostra como chegar a complementares e análogas.

Resumo

• Para a maioria dos casos, use o seletor de cor em imagem: envie ou cole com Ctrl+V, use a lupa e clique.
• Para cores de páginas web, o conta-gotas do DevTools (Chrome, Edge e Firefox) resolve sem sair do navegador.
• No Photoshop, use a tecla I e escolha entre amostra de ponto e média; no Figma, pressione I dentro do seletor de cor.
• Para qualquer app, use o PowerToys (Win+Shift+C) no Windows ou o Medidor de Cores Digital no macOS.
• Evite bordas e áreas comprimidas, use média em fotos e confira o espaço de cor.

Quer explorar mais? Veja a lista de cores com página própria ou os demais guias sobre cor.