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.

Como leio as insígnias de contraste AA/AAA ao lado de cada amostra?

Cada cor extraída exibe uma insígnia de acessibilidade WCAG para você saber na hora se ela serve como texto. O número (por exemplo 4.7:1) é a melhor relação de contraste que aquela cor atinge contra preto puro ou branco puro, o que der mais contraste. A insígnia traduz essa relação em um veredito WCAG 2.1: AAA (verde) significa pelo menos 7:1, segura para texto normal no nível mais rígido; AA (azul) significa pelo menos 4.5:1, a aprovação padrão para texto normal; AA Grande (amarelo) significa pelo menos 3:1, que só passa para texto grande ou em negrito (18pt+/14pt negrito) e bordas de componentes de UI; Fail (vermelho) significa abaixo de 3:1: não use para texto. O rótulo hex impresso sobre cada amostra é colorido automaticamente em preto ou branco usando o limiar de luminância relativa 0.179 recomendado pela WCAG: se a luminância relativa passar de 0.179, a cor é clara e o texto preto se lê melhor; caso contrário, o texto branco vence. O resumo abaixo da paleta conta quantas cores ultrapassam a marca AA de 4.5:1, então você vê de relance quantas são seguras como texto ou fundo numa interface real. Isso transforma uma lista de amostras numa paleta pronta para acessibilidade em botões, rótulos e fundos, sem calcular o contraste à mão.

Como obtenho a paleta ou o tema de um logo ou captura de tela?

Arraste o logo ou uma captura da interface para a área de soltar (ou clique para escolher) e a ferramenta extrai a paleta assim que a imagem carrega: sem upload, tudo roda no navegador. Para uma paleta de marca enxuta, recorte primeiro só o logo e ajuste o número de cores para 3-5, para o algoritmo gastar o orçamento nas cores reais da marca em vez de ruído de fundo; ative Ignorar quase branco para remover margens brancas que esmaecem o resultado. Para a captura de um site ou app existente, deixe o número mais alto (8-12) para capturar de uma vez cor primária, de destaque, de superfície e de texto. Depois copie a lista HEX, as variáveis CSS prontas para colar ou o JSON (que agora inclui a luminância, as relações de contraste e a cor de texto recomendada de cada cor) direto para seus design tokens, sua config do Tailwind ou um script de build. As insígnias AA/AAA inline dizem na hora quais das cores recuperadas são seguras como texto ou fundo, para reconstruir um tema fiel à marca e acessível ao mesmo tempo.

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.