Como extrair uma cor de uma imagem (ferramenta Conta-gotas)

O que é uma ferramenta de Conta-gotas?

O Conta-gotas é uma ferramenta que amostra a cor exata de qualquer pixel de uma imagem. Clique em um pixel e a ferramenta retorna o valor numérico da cor — geralmente como HEX, RGB ou HSL. Designers e desenvolvedores usam o tempo todo: "Adoro aquele azul da foto, qual é?" vira uma tarefa de 2 segundos com o Conta-gotas.

Os motivos pelos quais as pessoas extraem cores de imagens são práticos e frequentes:

• Combinar marca e foto: você tem uma foto de produto e quer que a cor de destaque do site faça eco do produto. O Conta-gotas encontra o tom exato.
• Replicar um design: você vê um site ou pôster que adora e quer o mesmo azul no seu projeto. Conta-gotas em um print e você tem o código hex.
• Construir uma paleta: uma foto tem 5-6 cores dominantes que ficam ótimas juntas. O Conta-gotas extrai como ponto de partida.
• Igualar tinta ou tecido: tire uma foto de uma parede, Conta-gotas a cor e leve a uma loja de tintas para igualar a amostra.
• Correção de cor precisa: precisa igualar o azul de um logo em duas imagens? Conta-gotas em ambas, compare os códigos, ajuste.
• Curiosidade: "Esse preto é realmente preto, ou é azul escuro?" O Conta-gotas responde com um clique.

A boa notícia: com a ferramenta certa, extrair uma cor de uma imagem é um trabalho de 10 segundos e você não precisa instalar nada.

Método 1: Use o Conta-gotas de cor grátis do UtilBoxx (Recomendado)

A maneira mais rápida, segura e privada de extrair cores de uma imagem é a ferramenta Conta-gotas do UtilBoxx. Ela roda inteiramente no seu navegador, então sua imagem nunca sai do seu dispositivo. Sem upload, sem cadastro e sem rastreamento.

Veja como usar:

1. Acesse utilboxx.com/pt/tools/color/picker
2. Clique na área de upload e selecione sua imagem (ou arraste e solte)
3. Passe o cursor sobre a imagem — a pré-visualização ao vivo mostra o código hex sob seu cursor
4. Clique em qualquer parte da imagem para "bloquear" aquela cor
5. Leia a cor em HEX, RGB e HSL simultaneamente
6. Clique em qualquer saída para copiá-la para a área de transferência
7. Opcional: amplie para amostragem com precisão de pixel

Por que recomendamos este método:

• 100% grátis, sem conta, sem cadastro, sem verificação de e-mail
• Privacidade em primeiro lugar: tudo é processado localmente no seu navegador. Sua imagem nunca chega a um servidor.
• Pré-visualização ao vivo: veja a cor sob o cursor antes de clicar
• Os três formatos: HEX, RGB, HSL mostrados juntos
• Cópia com um clique: copie qualquer formato para a área de transferência
• Suporte a zoom: obtenha amostras com precisão de pixel em imagens pequenas ou detalhadas
• Funciona em qualquer dispositivo: Windows, Mac, Linux, ChromeOS, iOS, Android

Se você só precisa extrair cores de vez em quando, essa é a opção de menor atrito disparado.

Método 2: Adobe Photoshop (Pago)

Photoshop é o peso-pesado da edição de imagens, e sua ferramenta Conta-gotas (atalho de teclado I) é o padrão-ouro para amostragem de cor. Clique em qualquer lugar de uma imagem aberta e a amostra de cor de primeiro plano é atualizada com o valor amostrado. O painel Info (Janela > Info) mostra as coordenadas exatas do pixel e a cor em CMYK, RGB, HSB, Lab e Web (hex) — tudo de uma vez. Você também pode definir o tamanho da amostra como "Média 3x3" ou "Média 5x5" para amostrar uma pequena região em vez de um único pixel, útil para imagens com ruído ou anti-aliasing.

O problema é o preço. Photoshop faz parte de uma assinatura Creative Cloud que custa cerca de $22,99 por mês (aproximadamente $240 por ano). Para uma extração pontual é exagero, e o painel de opções é mais do que a maioria das pessoas precisa.

Photoshop vale a pena apenas se você já o usa para retoque, composição ou design. Se extração de cor é tudo o que você precisa, uma ferramenta baseada em navegador faz o trabalho sem fatura nem instalação.

Método 3: Digital Color Meter do macOS (Integrado, grátis)

Se você está no Mac, já tem um Conta-gotas poderoso instalado: Digital Color Meter. Ele fica em Aplicativos > Utilitários. Abra-o, escolha seu display, passe a lupa sobre qualquer pixel da tela (não apenas dentro de uma imagem — em qualquer lugar), e ele mostra a cor em RGB, hex ou porcentagem. Você também pode travar a vista em uma pequena janela que fica sempre no topo, perfeita para comparar cores entre apps.

Para usar com uma imagem:

1. Abra a imagem no Visualização, Quick Look ou qualquer visualizador
2. Abra o Digital Color Meter (Cmd+Space, digite "Digital Color Meter")
3. Clique na imagem — a cor aparece no medidor
4. Escolha Cor > Copiar como Texto (ou pressione Cmd+Shift+C) para obter o código hex na área de transferência
5. Cole onde quiser

Esta é a ferramenta mais subestimada do macOS. Ela é integrada, grátis, e funciona com qualquer pixel da tela — não só dentro de um app. No Windows, o Microsoft PowerToys tem um utilitário "Color Picker" similar que faz o mesmo trabalho (pressione Win+Shift+C para ativar).

Perguntas frequentes

Posso amostrar cores de uma página web?

Sim. No Chrome, Firefox ou Edge, abra DevTools (F12 ou Cmd+Opt+I), clique na ferramenta "Inspecionar" (ícone no canto superior esquerdo), depois clique na página. O painel Estilos mostra as cores usadas naquele elemento, e você pode clicar no swatch de cor para ver hex, RGB, HSL e até modificar a cor ao vivo. No macOS, o Digital Color Meter pode amostrar qualquer pixel da tela, incluindo os do navegador.

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

• HEX é um código de seis caracteres como `#FF5733`, o padrão para CSS
• RGB são três números 0-255, como `rgb(255, 87, 51)`, os valores crus de tela
• HSL é matiz/saturação/luminosidade, mais intuitivo para ajustar cores

Os três descrevem a mesma cor. UtilBoxx mostra os três lado a lado para você copiar o formato que seu projeto precisa.

Como extraio uma cor de uma imagem pequena ou detalhada?

Aplique zoom. UtilBoxx suporta zoom na imagem para você posicionar o cursor no pixel exato. No Photoshop, o Conta-gotas tem um menu suspenso de "Tamanho da amostra" que permite fazer média sobre 3x3 ou 5x5 pixels, um ótimo fallback para imagens com ruído.

Como igualo uma cor que vejo na vida real?

Use a câmera do celular, Conta-gotas a foto que você tirou e use a cor amostrada. Para mais precisão, fotografe o objeto com boa luz natural (sem flash), Conta-gotas uma área plana e verifique o resultado contra o próprio objeto.

Posso extrair uma cor de um PDF ou vídeo?

Sim — tire um print (Cmd+Shift+4 no Mac, Win+Shift+S no Windows), depois Conta-gotas o print. Para vídeo, pause em um frame, print, Conta-gotas. UtilBoxx aceita JPG, PNG e WebP, então qualquer print nesses formatos funciona.

É seguro usar um Conta-gotas de cor online?

Depende do serviço. UtilBoxx processa tudo no seu navegador — sem upload, sem processamento no servidor, sem registros. Com outras ferramentas, assuma que sua imagem está sendo enviada para um servidor remoto e leia atentamente sua política de privacidade. Para imagens pessoais ou proprietárias, uma ferramenta só-navegador é a escolha mais segura.

Conclusão

O Conta-gotas é uma das pequenas ferramentas mais úteis no kit de qualquer designer ou desenvolvedor, e não deveria exigir uma assinatura paga. Para a maioria das pessoas, o Conta-gotas de cor grátis do UtilBoxx é a escolha óbvia: é privado, rápido e grátis, sem cadastro.

Se você é designer e já vive no Photoshop, a ferramenta Conta-gotas é um ótimo backup. Se você está no Mac, o Digital Color Meter é uma excelente opção sempre disponível. E o GIMP, a alternativa gratuita ao Photoshop, tem o mesmo Conta-gotas a custo zero.

Para todo o resto, visite as ferramentas de cor do UtilBoxx e você encontrará um conjunto completo de ferramentas para trabalhar com cores, com privacidade como prioridade, tudo no seu navegador.