Paleta de cores de uma imagem (local)

Como funciona a extração de paleta de uma imagem

Extrair uma paleta de uma foto é um dos truques mais antigos das ferramentas de design — o Lens do Pinterest, o Color Theme da Adobe, o Color Discovery do Procreate, presets do Lightroom e inúmeros brand guides usam alguma variação do mesmo algoritmo: pegar uma imagem, reduzir seus milhões de pixels a um punhado de matizes representativos, ordenar por frequência ou importância percebida e apresentar como swatches. Os dois clássicos são o k-means clustering (usado aqui) e o median cut (o quantizador original do GIF); variantes modernas incluem o octree quantization e o algoritmo Palette do Material Design, que pondera vibrancy além da frequência.

O fluxo k-means em detalhe

• Escolha um número-alvo de cores K (5 é o ponto doce para moodboards).
• Inicialize K centroides aleatoriamente no espaço de cor — sementes melhores (k-means++) convergem mais rápido.
• Atribua cada pixel ao centroide mais próximo usando uma métrica de distância (geralmente euclidiana em RGB).
• Recompute cada centroide como a média dos pixels atribuídos a ele.
• Repita até os centroides pararem de se mover (ou um teto de iterações ser atingido).
• Retorne os centroides, opcionalmente ordenados por tamanho de cluster para uma ordem de "dominância".

Por que o espaço de cor importa

RGB é prático mas perceptualmente não uniforme: distâncias numéricas iguais não parecem igualmente diferentes ao olho humano. Clusterizar em CIE Lab ou no moderno OKLab produz paletas "mais limpas" porque o algoritmo respeita como realmente percebemos diferença de cor. Ferramentas premium convertem para Lab antes de clusterizar e voltam para sRGB para exibir. Para puro desempenho, fique em RGB e reduza a imagem primeiro — um thumbnail 100×100 produz paletas quase idênticas à imagem em resolução total.

Filtragem de vibrancy e o approach do Material

Análise pura de frequência costuma devolver beges e cinzas — a "média" da foto. A biblioteca Palette do Material Design resolve isso etiquetando cada cluster com categorias de vibrancy (Vibrant, Muted, LightVibrant, DarkMuted etc.) e descartando clusters com luminância extrema ou baixa croma. É assim que o Android extrai um accent color utilizável de qualquer capa de álbum automaticamente.

Bibliotecas e ferramentas na prática

• ColorThief — biblioteca JS popular, baseada em median cut, roda no navegador.
• Vibrant.js — port do Material Palette para JavaScript.
• Pillow (Python) — Image.quantize() com median cut.
• Colormind, Coolors.co, Adobe Color, Canva Color Picker — UIs hospedadas que embrulham as mesmas ideias.
• Web Workers — leve o k-means para fora da thread principal para manter a UI responsiva com imagens grandes.

Casos de uso

• Identidade de marca — extraia os matizes dominantes de um logo ou foto-herói para semear um design system.
• Data viz — gere escalas categóricas que pareçam nativas à imagem de fundo do gráfico.
• Moodboards — combine paletas de várias referências em um único swatch sheet.
• Auditorias de acessibilidade — confira as cores extraídas contra o WCAG para texto sobreposto.
• Edição fotográfica — case presets do Lightroom com a paleta tonal de uma imagem de referência.

Perguntas frequentes

Qual algoritmo é melhor? k-means produz as paletas mais perceptualmente precisas; median cut é mais rápido e foi o padrão GIF por décadas.

Quantas cores extrair? Entre 5 e 8 cobre a maioria das necessidades de design; acima de 12 começa a ficar barulhento.

Por que gradientes dão resultados estranhos? Um gradiente suave não tem clusters — o algoritmo tem de escolher pontos de corte arbitrários, então a precisão cai.

Minha imagem é enviada para algum servidor? Não. Tudo acontece no lado do cliente, no navegador — os pixels nunca saem da sua máquina.