Identificar o código exato de uma cor é uma necessidade constante em design: replicar a cor de um logo de referência, extrair a paleta de uma foto de inspiração, manter consistência entre diferentes peças de uma identidade visual. Dependendo do contexto — se você tem acesso ao arquivo, se a cor está numa imagem online, num site ou numa foto tirada com o celular — o método mais eficiente varia.
Entendendo os formatos de código de cor
Antes de ir para os métodos, vale entender os três formatos mais usados para representar cores digitalmente:
| Formato | Exemplo | Onde é usado |
|---|---|---|
| HEX | #3ecf8e | CSS, HTML, design web, a maioria das ferramentas de design |
| RGB | rgb(62, 207, 142) | CSS, edição de imagem, impressão digital |
| HSL | hsl(152, 57%, 53%) | CSS, manipulação de cores em design, ajustes de tonalidade |
| CMYK | C:70 M:0 Y:31 K:19 | Impressão gráfica (panfletos, cartões, embalagens) |
HEX e RGB representam a mesma informação em formatos diferentes — é sempre possível converter de um para outro. HSL descreve a cor em termos de matiz, saturação e luminosidade, sendo mais intuitivo para ajustes manuais. CMYK é exclusivo para impressão.
Método 1: Extrator de Cores online (o mais rápido)
Para identificar as cores dominantes de uma imagem inteira — ou localizar um pixel específico com precisão — um extrator de cores online é a solução mais direta. Basta fazer upload da imagem e a ferramenta identifica automaticamente as cores mais presentes, com os códigos HEX prontos para copiar.
O Extrator de Cores do ImageTools analisa qualquer foto ou imagem e retorna as cores dominantes com seus respectivos códigos HEX. Tudo funciona diretamente no navegador — a imagem não sai do seu dispositivo.
- Acesse a ferramenta de extração de cores.
- Faça upload da imagem ou arraste o arquivo para a área indicada.
- A ferramenta identifica automaticamente as cores mais presentes na imagem.
- Clique em qualquer cor para copiar o código HEX.
🎨 Dica extra: depois de extrair as cores dominantes de uma imagem, use o Gerador de Paleta para criar harmonias complementares, análogas ou monocromáticas a partir de qualquer uma dessas cores — e expandir a paleta do seu projeto.
Extraia as cores de qualquer imagem agora
Faça upload de uma foto e obtenha os códigos HEX das cores dominantes em segundos. Gratuito, sem cadastro, processado no seu navegador.
Extrair cores da imagemMétodo 2: Usando o conta-gotas do navegador (Chrome DevTools)
Se a cor que você quer identificar está em um site — no fundo de uma página, num botão, num logo — o Chrome tem uma ferramenta embutida para isso.
- Abra o site no Google Chrome.
- Pressione F12 (ou clique com o botão direito e escolha "Inspecionar").
- No painel DevTools, clique no ícone de cursor no canto superior esquerdo (ou pressione Ctrl+Shift+C).
- Passe o mouse sobre qualquer elemento da página — o DevTools vai mostrar as propriedades CSS, incluindo as cores em HEX ou RGB.
- Para abrir o seletor de cor visual, clique no quadrado colorido ao lado de qualquer valor de cor no painel CSS.
O DevTools do Chrome também tem um Color Picker embutido: ao clicar no quadrado de cor no painel de estilos CSS, abre um seletor que permite navegar pelo espectro e ver os valores em HEX, RGB, HSL e HSLA simultaneamente.
Método 3: Conta-gotas no Canva
Se você está trabalhando no Canva e quer capturar uma cor de uma imagem que já está no seu projeto:
- Selecione o elemento cujo preenchimento você quer alterar (um texto, forma ou fundo).
- Clique na cor do elemento no painel lateral para abrir o seletor de cor.
- No seletor, clique no ícone de conta-gotas (eyedropper).
- Clique sobre qualquer ponto da imagem no canvas para capturar a cor exata daquele pixel.
- O código HEX será exibido no campo de texto do seletor.
Método 4: Conta-gotas no Photoshop e Illustrator
Photoshop
Com a imagem aberta, selecione a ferramenta Conta-gotas (atalho: tecla I). Clique em qualquer ponto da imagem — a cor capturada é exibida na caixa de cor no painel de ferramentas. Para ver o código HEX, dê duplo clique na caixa de cor (abre o Color Picker) e o valor HEX aparece no campo inferior direito.
Illustrator
Com o arquivo aberto, selecione um objeto e depois clique na cor de preenchimento ou contorno no painel de ferramentas. No Color Picker que se abre, o código HEX está no campo inferior. Alternativamente, use a ferramenta Conta-gotas (atalho: I) para coletar a cor de qualquer ponto do canvas.
Método 5: Extensão de navegador — ColorZilla
A extensão ColorZilla (disponível para Chrome e Firefox) adiciona um conta-gotas permanente ao seu navegador. Com ela instalada, você pode:
- Capturar a cor de qualquer pixel em qualquer site com um clique.
- Ver o código em HEX, RGB e HSL imediatamente.
- Copiar o valor com um clique.
- Acessar um histórico das últimas cores coletadas.
É a solução mais prática para quem precisa capturar cores de sites com frequência, sem precisar abrir o DevTools a cada vez.
Método 6: Aplicativo de captura de cor no celular
Para identificar cores de objetos físicos — a cor de uma parede, de um produto, de uma embalagem — ou de imagens no celular, existem aplicativos específicos:
- Color Grab (Android) — aponta a câmera para qualquer superfície e captura o código HEX em tempo real.
- Palette Cam (iOS/Android) — extrai a paleta completa de cores de fotos tiradas na hora ou da galeria.
- Canva (iOS/Android) — o conta-gotas do Canva mobile funciona para imagens importadas.
Como usar os códigos de cor extraídos
Depois de identificar o código HEX de uma cor, as aplicações mais comuns são:
No CSS / desenvolvimento web
Use diretamente no código: color: #3ecf8e; ou background-color: #3ecf8e;. Para variantes mais claras ou escuras, use HSL — é muito mais intuitivo ajustar luminosidade do que manipular valores HEX manualmente.
No Canva, Figma ou Adobe
Cole o código HEX no campo de cor de qualquer elemento. Todas as principais ferramentas de design aceitam HEX diretamente.
Para criar uma paleta completa
Com a cor base identificada, o Gerador de Paleta de Cores gera automaticamente combinações harmônicas — complementar, análoga, tríade e monocromática — com todos os códigos em HEX, RGB e HSL prontos para usar no projeto.
Para impressão
Converta o HEX para CMYK antes de enviar ao gráfico. As cores em tela (RGB/HEX) e em impressão (CMYK) têm gamuts diferentes — o que parece idêntico no monitor pode ter uma variação visível impresso. Ferramentas como o Adobe Illustrator e o Affinity Designer fazem essa conversão automaticamente ao exportar para impressão.
Por que a cor extraída pode não ser exatamente a que você queria
Um detalhe importante: imagens fotográficas raramente têm uma cor perfeitamente uniforme em uma área. O que parece ser um azul sólido numa foto pode ter dezenas de variações sutis de pixel a pixel, causadas por iluminação, compressão JPG e ruído da câmera. O conta-gotas captura a cor exata de um pixel específico — que pode ser ligeiramente diferente do "azul geral" que você está tentando identificar.
Para áreas fotográficas, o ideal é usar um extrator que calcula a cor dominante de uma região — como faz o Extrator de Cores — em vez de capturar um único pixel. O resultado é uma cor mais representativa e mais útil para uso no design.
Perguntas frequentes
#3ecf8e e RGB 62, 207, 142 são a mesma cor. Para design web e CSS use HEX (mais comum e mais curto). Para aplicações que pedem os três canais separados — algumas plataformas de impressão, apps de edição — use RGB. Qualquer ferramenta converte entre os dois em segundos.