← Todos os posts

Como pegar o código hex de qualquer cor numa imagem

2026-05-15

Resposta rápida: solte a imagem no seletor de cor do ToolKoala, clique no pixel que você quer e copie o valor hex (e RGB) — tudo no seu navegador, sem nada enviado a um servidor. É a forma mais rápida de pegar a cor exata de um print, foto ou mockup de design sem instalar nada.

Como pegar o código hex

  1. Abra o seletor de cor e arraste sua imagem ou print para dentro (PNG, JPG, WebP funcionam).
  2. Mova o cursor sobre a imagem. Uma lupa ampliada mostra o pixel que você está prestes a amostrar para você não errar por um.
  3. Clique no pixel exato. A ferramenta lê os valores RGB daquele pixel direto de um canvas na memória.
  4. Copie o código hex (como #3B82F6) ou a string RGB. Repita em quantos pixels quiser.

Como ele está lendo os dados do pixel localmente, não há ida e volta a um servidor nem espera. Abra a aba Network do DevTools do seu navegador enquanto usa — você verá zero requisições de upload. É esse o ponto inteiro.

Para que eu de fato uso isso

  • Combinar a cor de uma marca. Um cliente manda um logo como um PNG chapado, sem manual de marca. Amostre o azul, pegue #1D4ED8, pronto.
  • Montar uma paleta. Amostre cinco ou seis cores de uma foto ou print que você curtiu, e você tem uma paleta inicial sem adivinhar.
  • Corrigir uma divergência. "Este botão está num tom levemente errado" — amostre os dois, compare o hex, encontre o valor que está um tiquinho fora.

Se o seu navegador for recente (Chrome, Edge), também existe a API nativa EyeDropper, que consegue amostrar qualquer pixel na tela, não só dentro de uma imagem enviada. O seletor do ToolKoala se apoia num canvas, então funciona igual em todos os navegadores e em arquivos que você não abriu em nenhum outro lugar.

Comparação honesta com outras ferramentas

  • Medidor de Cor Digital do macOS — gratuito, nativo do macOS. Ótimo para amostrar qualquer coisa na tela, mas vem por padrão num espaço de cor estranho e o fluxo de copiar-para-hex é chato (você tem que fuçar nas configurações). Sem versão para Windows.
  • Conta-gotas do Chrome DevTools — gratuito, já no seu navegador. Abra o painel Styles, clique num swatch de cor, acione o conta-gotas. Funciona bem, mas está enterrado nas ferramentas de dev e só amostra a página renderizada.
  • Photoshop (~$23/mo) — o conta-gotas é excelente e preciso, mas abrir um app de mais de 20 por mês para ler um pixel é exagero.
  • Extensões de seletor de cor do navegador — convenientes, mas aqui vai o contraponto: uma extensão que consegue usar o conta-gotas em qualquer página geralmente pede permissão para ler todas as páginas que você visita. É muita confiança para um seletor de cor. Eu prefiro soltar um arquivo numa aba que não faz upload de nada a dar a uma extensão de fundo acesso de leitura geral.

Perguntas frequentes

Como pego o código hex de um print? Tire o print, solte-o num seletor de cor de navegador como o do ToolKoala e clique no pixel que você quer. Você recebe o hex e o RGB na hora, sem fazer upload da imagem.

Qual é a diferença entre hex e RGB? Eles descrevem a mesma cor. O hex (#3B82F6) é uma forma compacta de seis dígitos usada em CSS e ferramentas de design; o RGB (59, 130, 246) lista os canais vermelho/verde/azul como números. A maioria das ferramentas, inclusive esta, te dá os dois.

Posso pegar uma cor de um site ao vivo em vez de um arquivo? Sim — use o conta-gotas do Chrome DevTools ou a API nativa EyeDropper do navegador para amostragem na tela. Para amostrar de um arquivo de imagem que você já tem, o seletor de cor sem upload é mais simples.

É preciso até o pixel exato? Sim, desde que você amostre a imagem original. Se a imagem foi comprimida (JPG pesado) ou redimensionada, a cor que você vê pode já estar levemente deslocada em relação à origem — isso é o arquivo, não o seletor.

— Milo 🐨