Gerador de Paleta de Imagem

Extração de paleta de imagem: algoritmos, espaços de cor e o tradeoff dominante-vs-vibrante

"Tira as cores dessa foto" parece trivial — afinal a foto é feita de cor. Na prática, extrair paleta decente é um dos problemas aplicados de clustering mais interessantes da web moderna. A resposta ingênua (contar pixels, devolver os N mais comuns) entrega paletas chatas dominadas por azul-céu e tom de pele de fundo. A resposta interessante troca dominância pura por proeminência perceptiva: um detalhe pequeno e saturado costuma ganhar de um mar de pixels mortos no fundo. Material You do Google, auto-tint do Photos da Apple, o canvas de capa de álbum do Spotify e todo gerador de tema de IDE desde 2017 disputam o mesmo tradeoff.

Zoológico de algoritmos

• K-means — escolha K centroides aleatórios, atribua cada pixel ao mais próximo, recalcule a média, repita. Barato (~50 ms numa imagem 1000×1000), mas sensível à semente aleatória
• K-means++ — inicialização inteligente dos centroides (Arthur & Vassilvitskii 2007); paletas melhores para o mesmo K, mesmo runtime
• DBSCAN — clustering por densidade, você não fixa K; ótimo para fotos com número desconhecido de cores dominantes
• Mean shift — converge para os modos de densidade; produz menos cores, mas mais representativas
• Quantização Octree — usado por encoders GIF/PNG desde os anos 90; determinístico, muito rápido
• Median cut — algoritmo de Heckbert (1980), ainda base do color-thief e do node-vibrant

Por que o espaço de cor importa

A distância euclidiana em RGB é o padrão mas é perceptivamente errada — saltos numéricos iguais não parecem iguais para o olho. O CIELAB (1976) foi desenhado para uniformidade perceptiva: Delta E abaixo de 2,3 é praticamente a diferença mínima perceptível. O OKLab (Björn Ottosson, 2020) corrige artefatos de hue do CIELAB e é o que o CSS Color 4 usa em oklch(). Rodar k-means em OKLab em vez de RGB devolve paletas muito mais parecidas com o que um designer escolheria a olho — ao custo de duas conversões a mais por pixel. O Material You usa OKLab internamente; o node-vibrant ainda usa HSL por compatibilidade.

// Pseudocódigo: score de proeminência ponderado
score(pixel) = saturação(pixel) * 0.5
             + frequência(pixel) * 0.3
             + proximidadeCentro(pixel) * 0.2

Truques de pré-processamento que realmente importam

• Downsample antes — k-means num thumbnail 100×100 entrega essencialmente a mesma paleta que a imagem inteira a 1/100 do custo
• Blur gaussiano — mata o ruído de JPEG que geraria centroides fantasmas
• Peso por saturação — multiplique o peso de cada pixel pela saturação HSV para que cinzas de fundo percam para acentos vivos
• Viés de centro — produtos e sujeitos ficam no centro do quadro; pese pixels centrais mais alto
• Mascaramento de bordas — passe filtro Sobel e descarte pixels em bordas duras; remove artefatos de anti-aliasing

Onde isso roda em produção

O Material You (Android 12, 2021) lê o wallpaper do usuário e gera um tema de cinco paletas tonais via a biblioteca open-source material-color-utilities. O Spotify Canvas casa a cor dominante do vídeo em loop com a UI do player. O Apple Photos auto-tinta a tela now-playing do iOS usando extração de paleta. O ColorMind (2017) foi um pioneiro RNN que aprendeu paletas de designers — entrega resultado mais estético, mas mais lento que clustering puro. Na web, color-thief, node-vibrant e os extratores via Canvas API rodam tudo num Web Worker para a UI não travar nos 50–100 ms da extração.

Perguntas frequentes

Devolvo dominante ou vibrante? Depende do caso. Temização de UI quer vibrante (Material You escolhe o swatch mais saturado como primária). Reportar "a cor dessa foto de produto" quer dominante. Melhor prática: devolver os dois e deixar o consumidor escolher.

Quão rápida é a extração no navegador? Menos de 100 ms para uma imagem 1024×1024 com k-means num thumbnail 100×100. Extrair direto da imagem inteira leva 1–3 segundos e é desnecessário.

Extratores com IA são melhores que k-means? Produzem paletas mais estéticas, estilo designer (ColorMind, Khroma, Coolors), mas dependem de inferência em nuvem. Para resultado determinístico, offline e rápido, k-means++ em OKLab é o sweet spot moderno.

Por que minha paleta vem cheia de cinza? Porque o cinza de fundo domina o pixel-count sem dominar a percepção. Adicione peso por saturação (descarte pixels com saturação abaixo de 0,15) e o problema some.