Pular para o conteúdo principal
DevTools by Decussi
  • Ferramentas
  • Dados
  • Segurança
  • Rede
  • Texto
  • Data
  • Web
  • Dev
  • SEO
  • Brasil
Ferramentas
  1. Início
  2. /Ferramentas
  3. /Web
  4. /Extrator de Cores de Imagem

Extrator de Cores de Imagem – Paleta dominante com % de área

Envie ou cole uma imagem e receba as cores dominantes em HEX, com a porcentagem de área de cada uma, mais um conta-gotas para qualquer pixel.

🔒Processado no navegador – nenhum dado enviado ao servidor

Até 20 MB. A imagem é lida no seu navegador e não é enviada a lugar nenhum.

Clique na imagem para pegar a cor do pixel

Conta-gotas

Clique em qualquer ponto da imagem. A cor aparece aqui e entra na lista abaixo.

Como usar esta ferramenta

  1. Envie a imagem, arraste para a página ou cole um print com Ctrl+V
  2. Ajuste no controle quantas cores dominantes quer extrair, de 4 a 12
  3. Clique em qualquer ponto da imagem para pegar a cor exata daquele pixel em HEX, RGB e OKLCH
  4. Copie cada cor ou exporte a lista inteira como variáveis CSS ou JSON

Sobre esta ferramenta

O que é

Cor dominante não é a cor mais frequente pixel a pixel: numa foto quase nenhum pixel se repete exatamente. O k-means agrupa tons próximos e devolve o centro de cada grupo, e o percentual mostra quanto da imagem ficou em cada grupo. O conta-gotas lê o pixel sem agrupar nada, para quando você precisa de um tom exato.

Quando usar

  • Montar o tema de um site a partir do logo ou de uma foto de marca
  • Descobrir o HEX exato de uma cor num print de tela
  • Criar paletas para apresentações e posts a partir de uma imagem de referência
  • Conferir quanto espaço cada cor ocupa numa arte antes de aprovar

Segurança

Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.

Perguntas frequentes

Por que a paleta não muda quando extraio de novo?
O k-means depende de onde os centros começam. Aqui a inicialização k-means++ usa semente fixa, então a mesma imagem com o mesmo número de cores sempre devolve a mesma paleta — dá para repetir o processo e copiar os mesmos valores.
O que significa a porcentagem de cada cor?
É a fração da área visível da imagem cujos pixels ficaram mais próximos daquela cor do que de qualquer outra da paleta. Pixels transparentes não entram na conta, então num logo em PNG os percentuais se referem só ao desenho.
A cor do conta-gotas é diferente da cor da paleta. Qual está certa?
As duas. O conta-gotas mostra o valor exato de um pixel; a paleta mostra a média de um grupo de tons parecidos. Em fotos e degradês a média é mais útil para tema, e o pixel exato é o que você quer para casar com um elemento específico.
A imagem é enviada para algum servidor?
Não. A imagem é desenhada num canvas no próprio navegador e o cálculo roda ali. Nada sai do seu computador.

Ferramentas relacionadas

  • 🎨Conversor de Cores
  • ◐Contraste WCAG
  • 🖼Conversor de Imagem
  • ⭐Gerador de Favicon
  • 🖼Imagem ↔ Base64
  • 🎨Gerador de Paleta Tailwind
DevTools

Ferramentas para desenvolvedores, em português. Sem cadastro e sem instalação.

Criado e mantido por Decussi

Ferramentas

  • Todas as ferramentas
  • Dados
  • Segurança
  • Rede
  • Texto
  • Data
  • Web
  • Dev
  • SEO
  • Brasil

Referência

  • Consulta rápida
  • Guias
  • Códigos HTTP
  • Cron
  • Checagens de SEO

Desenvolvedores

  • API e devs
  • llms.txt
  • ai.txt
  • Sitemap

Newsletter

Receba novidades e novas ferramentas no seu email.

Sugira uma ferramenta

Tem uma ideia? Envie sua sugestão.