Extrair cores de uma imagem (extrator de cores dominantes)

Envie uma imagem para extrair automaticamente suas cores dominantes — as cores representativas usadas em uma foto ou ilustração. Todo o processamento ocorre inteiramente no seu navegador; a imagem nunca é enviada a um servidor.

Como extrair cores de uma imagem

Quando você quer saber quais cores predominam em uma foto, ilustração ou logotipo, escolhê-las uma a uma com uma ferramenta de conta-gotas é trabalhoso. Esta ferramenta faz esse trabalho por você: basta enviar uma imagem para que ela liste automaticamente as cores representativas — as chamadas cores dominantes — que ocupam as maiores áreas da imagem. Códigos HEX e valores RGB aparecem imediatamente, prontos para copiar direto para o CSS, Figma, Photoshop ou qualquer outra ferramenta de design que você esteja usando.

Nos bastidores, a ferramenta desenha a imagem em um elemento Canvas do navegador e lê seus dados de pixel. Cores semelhantes são agrupadas (quantizadas) em grupos mais amplos, conta-se quantas vezes cada grupo aparece e os grupos mais frequentes são escolhidos como cores representativas. Áreas transparentes de uma imagem PNG são automaticamente excluídas dessa contagem, de modo que mesmo um recorte com fundo transparente produz resultados centrados nas cores do próprio objeto, e não no fundo. Imagens grandes são reduzidas internamente antes da análise, para que até fotos de vários megapixels sejam processadas quase instantaneamente. Como todo o cálculo acontece localmente no seu navegador, os dados da imagem nunca saem do seu dispositivo, o que torna a ferramenta segura mesmo para fotos sensíveis ou privadas.

Passo a passo para extrair cores de uma imagem

  1. Envie uma imagem Arraste e solte um arquivo de imagem na área indicada, ou clique nela para escolher um arquivo pelo seletor.
  2. Escolha quantas cores extrair Selecione 4, 8 ou 12 na opção «Número de cores a extrair». O resultado é recalculado instantaneamente a cada mudança da seleção, sem necessidade de reenviar a imagem.
  3. Revise as amostras extraídas As amostras de cor aparecem ordenadas da mais para a menos frequente. Ao lado de cada amostra são exibidos seu código HEX e seus valores RGB.
  4. Copie um código HEX Clique no botão de copiar abaixo de qualquer amostra para enviar aquele código HEX diretamente para a área de transferência, pronto para colar no CSS ou em um aplicativo de design.

Dicas para aproveitar melhor

  • Clique no botão de copiar abaixo de cada amostra para copiar o código HEX para a área de transferência, pronto para colar no CSS ou na sua ferramenta de design.
  • Escolha 4, 8 ou 12 cores para extrair. Use 4 para uma paleta simples de logotipo, ou 12 para capturar as variações sutis de uma foto detalhada.
  • As áreas transparentes de imagens PNG são excluídas automaticamente, para que as cores extraídas foquem no assunto real e não no fundo.
  • Todo o processamento roda localmente no seu navegador usando a API Canvas; a imagem nunca é enviada a nenhum servidor, por isso é seguro usá-la mesmo com imagens sensíveis.
  • As cores são listadas da mais frequente para a menos frequente. As primeiras cores exibidas ocupam a maior área da imagem.

Formas de aproveitar esta ferramenta

Criar uma paleta a partir de um logotipo existente

Envie a imagem de um logotipo para obter, como códigos HEX, as cores exatas que ele utiliza, facilitando manter um site ou uma apresentação visualmente coerentes com a marca.

Encontrar candidatos de cor de marca em fotos de produto

Extrair as cores representativas de uma embalagem ou de uma foto de produto oferece material concreto para decidir uma cor corporativa ou uma cor de destaque para uma página de campanha.

Entender o equilíbrio cromático de uma foto ou ilustração

Alternar entre 4 e 12 cores extraídas permite perceber, num único olhar, o tom geral de uma imagem e, ao observar mais de perto, também as nuances mais sutis.

Transferir cores para o CSS ou para uma ferramenta de design

Copie um código HEX extraído e cole-o diretamente em uma variável CSS ou no seletor de cores do Figma ou Photoshop, evitando o trabalho manual de transcrever cores a olho nu.

Glossário

Cor dominante
A cor que ocupa a maior área de uma imagem, ou que aparece com maior frequência nela. As amostras listadas por esta ferramenta correspondem exatamente a essas cores dominantes, ordenadas conforme quanto da imagem cobrem.
Código HEX
Uma notação que representa os componentes vermelho, verde e azul de uma cor como um número hexadecimal de dois dígitos cada, por exemplo «#3366cc». Ao símbolo «#» seguem-se, em ordem, vermelho, verde e azul, formato amplamente usado em CSS e em softwares de design.
Valor RGB
Uma forma de especificar uma cor usando as três cores primárias da luz — vermelho, verde e azul —, cada uma expressa como um número de 0 a 255. Combinando esses três valores é possível reproduzir praticamente qualquer cor visível.
Quantização de cor
O processo de arredondar cores semelhantes, agrupando-as em um número menor de grupos. Esta ferramenta divide cada canal RGB em grupos de 32 unidades, de modo que pequenas variações de cor causadas, por exemplo, pela compressão JPEG sejam contadas como a mesma cor, em vez de tratadas como ruído.
Valor alfa (transparência)
Um valor que descreve a opacidade de cada pixel individual de uma imagem. Áreas transparentes de um PNG com transparência têm valor alfa baixo, e esta ferramenta exclui automaticamente esses pixels da contagem de cores.
API Canvas
Uma interface JavaScript do navegador para desenhar e analisar imagens e gráficos. Esta ferramenta a utiliza para ler uma imagem pixel a pixel e extrair suas cores inteiramente no seu dispositivo, sem nunca enviar os dados a um servidor.

Perguntas frequentes

Esta ferramenta usa um algoritmo simples que quantiza a imagem em grupos de cor e retorna a cor média do grupo mais frequente como cor representativa. Isso é suficiente para ter uma ideia rápida do tom geral de uma imagem, mas tenha em mente que não é tão preciso quanto métodos de agrupamento mais rigorosos (como k-means) usados em ferramentas profissionais de paleta de cores.

Não. Esta ferramenta usa a API Canvas para carregar a imagem e extrair as cores inteiramente dentro do seu navegador (no lado do cliente). Os dados da imagem nunca são enviados a um servidor, por isso é seguro usá-la mesmo com imagens sensíveis.

Qualquer formato de imagem comum que a tag de um navegador possa exibir — incluindo JPEG, PNG, WebP e GIF — deve funcionar, de acordo com os formatos aceitos pelo seletor de arquivos do seu navegador.

Sim. Cada cor é exibida como um código HEX (por exemplo, #3366cc) que você pode copiar para a área de transferência com um clique, para colar diretamente no Figma, Photoshop, CSS ou qualquer outra ferramenta que aceite valores de cor HEX.
Tool-kun

Curiosidade — O trabalho de encontrar cores de marca em fotografias

Extrair as cores usadas em uma foto ou embalagem de produto é uma tarefa rotineira no design web e gráfico. Ao criar as diretrizes visuais de uma marca, os designers costumam começar extraindo cores representativas de fotos ou logotipos existentes, e então as usam como candidatas para uma cor corporativa ou de destaque. O que antes era feito a olho nu com uma ferramenta de conta-gotas, uma cor de cada vez, agora pode ser automatizado com algoritmos como a extração de cores dominantes usada aqui.

Existem muitos algoritmos para extração de cores. O método de quantização por grupos e contagem de frequência usado por esta ferramenta arredonda o valor RGB de cada pixel para um grupo aproximado e conta quantas vezes cada grupo aparece — uma técnica simples, barata de calcular e rápida de executar. Métodos mais avançados, como o agrupamento k-means, agrupam cores com base na distância no espaço de cores e podem produzir agrupamentos mais naturais, ao custo de um cálculo mais pesado.

Um detalhe interessante é o quanto a mesma imagem pode parecer diferente dependendo de quantas cores você extrai. Extrair apenas 4 cores revela o tom geral de uma imagem — se ela tende para tons quentes ou frios — enquanto extrair 12 começa a capturar variações sutis causadas por sombras e reflexos de luz. Ajustar a quantidade permite obter diferentes níveis de detalhe da mesma imagem.

Ler curiosidades relacionadas

Ver todas as curiosidades

Pessoas que viram esta ferramenta também viram

Conversor de RGB para Hex (e de Hex para RGB) — Grátis, Sem Cadastro

Informe um valor RGB ou um código de cor hexadecimal para converter na hora, nos dois sentidos. Funciona tanto de RGB para hex quanto de hex para RGB, pronto para colar no seu CSS ou ferramenta de design — grátis, sem ne...

Conversor de modelos de cor (RGB, HSL, HSV, CMYK)

Digite um código de cor HEX ou escolha uma cor no seletor para converter instantaneamente seus valores equivalentes em RGB, HSL, HSV (HSB) e CMYK, todos exibidos ao mesmo tempo.

Verificador de contraste (conformidade com WCAG)

Informe duas cores para calcular a razão de contraste WCAG (Web Content Accessibility Guidelines) e verificar a conformidade com os níveis AA e AAA.

Simulador de daltonismo (deficiência de visão de cores)

Ferramenta gratuita que simula como uma cor é vista por pessoas com protanopia, deuteranopia ou tritanopia (deficiência de visão de cores).

Guia de paletas de cores — copie cores padrão da Web e do Material Design

Uma coleção de referência com as paletas de design mais consultadas: cores padrão da Web, o sistema de cores do Material Design e uma rampa de cinzas, cada uma com seu código HEX e um botão de cópia com um clique.

Conversor de RGBA para RGB (fusão com o fundo)

Informe uma cor de primeiro plano semitransparente (RGBA) e uma cor de fundo para calcular a cor RGB opaca resultante da mistura das duas por alpha blending, ideal como alternativa onde rgba() não é suportado.