Extrator de Cores Dominantes

Sobre o Extrator de Cores Dominantes

O Extrator de Cores Dominantes analisa a imagem enviada e devolve as cores mais predominantes como uma paleta compacta, ordenadas pela área ocupada por cada uma. O algoritmo primeiro amostra a imagem em baixa resolução para manter a extração rápida mesmo em fotos de vários megapixels e, em seguida, aplica quantização median-cut sobre os pixels amostrados: toda a nuvem de cor é dividida recursivamente pelo eixo de maior dispersão, formando caixas com número parecido de pixels cujas médias se tornam as entradas da paleta. Cada cor sai com seu código HEX, sua tripla RGB e o percentual de pixels amostrados que mapearam para ela, então você vê de relance qual cor realmente domina a imagem. A saída é exportada em quatro formatos amigáveis para desenvolvimento: listas HEX e RGB separadas por linha, variáveis CSS prontas para colar e um array JSON. Tudo roda no navegador via Canvas API; nenhuma imagem é enviada para servidor.

O que é "cor dominante" de uma imagem, na prática?

Cor dominante é aquela que ocupa a maior área visível depois que os tons levemente diferentes são agrupados. Uma foto de céu azul não tem só um azul: tem centenas de azuis ligeiramente distintos. A quantização resolve isso fundindo tons parecidos em uma cor representativa, e o balde com mais pixels é a cor dominante. Isso difere da cor média (média por canal de toda a imagem, que costuma virar um cinza-bege sem graça) e da cor mais saturada (ótima para acentos, mas raramente representa a imagem como um todo). Este extrator coloca a dominante primeiro nas amostras e ordena o resto por cobertura decrescente.

Por que median-cut em vez de k-means?

Median cut é um algoritmo determinístico de passada única, introduzido por Paul Heckbert em 1982 para converter imagens 24-bit em 8-bit indexado. Ele monta a paleta dividindo recursivamente o cubo de cor pelo eixo mais longo na mediana, então cada cor da paleta tem aproximadamente o mesmo número de pixels por trás. K-means pode produzir paletas marginalmente mais fiéis em fotos com distribuições bimodais fortes, mas requer várias iterações, sementes aleatórias e às vezes cai em mínimo local. Median cut roda em tempo quase linear, dá saída reproduzível para a mesma entrada e coincide com o algoritmo usado por navegadores para codificar GIF, então as cores sobrevivem bem ao salvamento em formato quantizado. Para a maioria dos usos de extração de UI e tema, os dois algoritmos são visualmente indistinguíveis.

Por que minha cor dominante sai apagada em relação ao que vejo na imagem?

Dois efeitos se combinam. Primeiro, median-cut tira média dos pixels dentro de cada caixa; se a sua camisa vermelha viva está cercada por vermelhos mais escuros nas sombras, a média esmaece o tom. Segundo, o sistema visual humano dá peso desproporcional às regiões mais saturadas, então um logo vermelho num fundo bege parece a cor principal mesmo ocupando menos área. Para uma paleta mais vibrante, diminua o número de cores pedidas (o algoritmo gasta o orçamento nas regiões mais saturadas), ative Ignorar quase branco (remove fundos brancos que esmaecem a média) ou recorte a imagem antes para focar no sujeito saturado. Para extrair cores de marca, recortar até o logo é um truque robusto.

Como uso a paleta em CSS ou Tailwind?

A ferramenta já gera um bloco de variáveis CSS na forma `--color-1: #RRGGBB;`. Cole no seu seletor :root e use cada cor com `var(--color-1)`. Para Tailwind, copie a lista HEX e cole em tailwind.config.js sob theme.extend.colors com nomes descritivos: `primary: '#1a73e8'`, `accent: '#fbbc04'`, etc. A saída JSON também serve para alimentar scripts de build: cada entrada tem hex, rgb e count, dá para ordenar e filtrar via código. Se quiser uma escala clara-escura bem espaçada a partir de uma cor extraída, passe o HEX pelo Color Shades Generator para gerar uma paleta estilo Material 50-900.

Por que o extrator ignora pixels com alfa abaixo de 128?

Pixels com alfa baixo são quase transparentes e mal contribuem para a imagem renderizada sobre qualquer fundo. Mantê-los faria com que grandes regiões transparentes de PNGs (sobretudo logos e adesivos) poluíssem a paleta com o fantasma do fundo usado no cálculo do alfa. O limiar 128 (meio transparente ou mais opaco) é conservador: preserva bordas anti-alias de formas sólidas (que carregam a cor real do sujeito) e exclui halos muito transparentes. Se você precisa extrair cores de uma região opaca pequena num fundo transparente, o algoritmo continua funcionando: basta haver algumas centenas de pixels opacos.

A imagem é enviada para algum servidor?

Não. A imagem é lida com FileReader, desenhada num Canvas offscreen e analisada totalmente dentro da aba do navegador. Nenhuma requisição de rede leva dados de imagem; dá para conferir abrindo a aba Network do DevTools. Isso torna a ferramenta segura para designs confidenciais, fotos de clientes, capturas de UI não publicada e outras imagens sensíveis. Também significa que ela funciona offline depois que a página é cacheada. Apenas os recursos da página passam pela rede; sua imagem, nunca.