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.

Dicas de uso

  • 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.

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.
ツールくん

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.

Mais ferramentas nesta categoria