Extrator de paleta de cores

O que é um extrator de paleta de imagem?#

Toda imagem carrega um pequeno conjunto de cores que fazem a maior parte do trabalho — o azul de marca de um logo, os neutros quentes de uma foto de produto, a paleta de duas cores de uma ilustração. Um extrator de paleta puxa essas cores representativas automaticamente para que você possa reutilizá-las: montar um tema de UI correspondente, escolher uma cor de botão que não brigue, gerar variáveis CSS, ou apenas entender quais amostras realmente dominam uma imagem em vez das que o seu olho assume como importantes.

Esta página roda quantização de cores por median-cut inteiramente no seu navegador. Você carrega uma imagem, ela é reduzida a um tamanho de amostra tratável, cada pixel é lido, e o algoritmo divide repetidamente o espaço de cores ao longo do seu canal mais largo até ter as N amostras principais que você pediu (2–16). Você recebe cada cor como uma amostra com a sua parcela da imagem, além da cor média direta, exportável como uma lista HEX, um arquivo de variáveis CSS ou um JSON estruturado.

Como usar#

1. Arraste uma imagem para a zona de soltar tracejada (ou clique nela para escolher um arquivo). PNG, JPEG e WebP funcionam; PNGs transparentes são tratados corretamente porque os pixels transparentes são ignorados antes da contagem.
2. Arraste o controle Número de cores (2–16) para escolher quantas cores representativas extrair. Seis é um bom padrão para uma paleta equilibrada; dois ou três isolam o par dominante.
3. Leia a lista de amostras à direita: cada linha mostra a cor, os seus valores HEX/RGB/HSL e o percentual de pixels amostrados que caíram naquele grupo, ordenados do mais dominante primeiro. Clique em qualquer valor para copiá-lo.
4. Veja o cartão Cor média na barra lateral para a média direta de cada pixel — útil quando você quer um tom geral de fundo em vez de uma paleta ranqueada.
5. Escolha um formato da paleta para download:
   • Lista HEX (.txt) — um #RRGGBB por linha, dominante primeiro. Cole direto numa ferramenta de design.
   • Variáveis CSS (.css) — um bloco :root { --palette-1: …; …; --palette-avg: …; } que você pode soltar num stylesheet.
   • JSON (.json) — amostras estruturadas com hex, rgb, count e share, além da média e dos metadados da amostra.
6. Clique em Baixar paleta para salvar o arquivo.

Principais funcionalidades#

• Quantização por median-cut, de autoria própria. A mesma família de algoritmo que ferramentas profissionais de imagem usam, rodando na sua aba: divide pelo canal mais largo na mediana, repete na caixa atualmente mais larga até que a contagem pedida seja alcançada.
• Números honestos de parcela. Cada amostra carrega a fração real de pixels amostrados que ela representa, então “dominante” significa dominante por área, não por palpite.
• Mantém a média separada da dominante. A média direta dos pixels é reportada ao lado da paleta ranqueada — duas perguntas diferentes respondidas numa única passagem.
• Pixels transparentes ignorados. Alfa abaixo de um pequeno limiar é excluído, então um PNG transparente reporta as cores que são de fato desenhadas, não uma lama misturada com a transparência.
• Três formatos de exportação. Lista HEX para ferramentas de design, variáveis CSS para um stylesheet, JSON para programas — todos gerados a partir exatamente das mesmas amostras que você vê.
• 100% local. A imagem é decodificada e amostrada pelo navegador. Não há envio.

Exemplo prático#

Solte um logo de marca que é um azul corporativo profundo sobre um fundo branco com um pequeno acento — digamos que o azul preenche cerca de 60% da tela. Com Número de cores definido como 4, uma extração típica se parece com:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

A amostra dominante é o azul de marca em cerca de 58%, com o branco em segundo. Repare nos dois azuis extras — um tom mais escuro e uma tonalização mais clara — que o algoritmo encontrou porque cruzam um limite de mediana; essas são exatamente as cores que você reutilizaria para estados de hover e sombras. Exporte como Variáveis CSS e você recebe um tema pronto para usar:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg é a média direta de cada pixel — um azul médio suave que funciona bem como fundo de página tingido para a marca.

FAQ#

As percentagens não somam exatamente 100%.#

Elas são arredondadas para exibição (os valores subjacentes são exatos até quatro casas decimais na exportação JSON). Um pequeno resíduo também vem dos pixels transparentes serem ignorados antes da contagem, então o total reflete apenas os pixels opacos que foram de fato amostrados.

Recebo menos amostras do que pedi.#

O median-cut para cedo quando toda caixa de cor restante é sólida (variação zero em todos os canais) — genuinamente não há mais nada para dividir. Pedir 8 cores numa imagem de 3 cores retorna 3, não 8 inventadas.

Por que a cor média é tão diferente da dominante?#

Elas respondem a perguntas diferentes. A cor dominante é o grupo único mais frequente; a média é a média aritmética de cada pixel, que algumas poucas regiões grandes mas coloridas de forma diferente podem afastar do valor mais frequente. Uma imagem metade vermelha, metade verde tem uma média acastanhada, mas nenhum marrom dominante — ambos os números estão corretos.

Funciona em fotos ou apenas em gráficos chapados?#

Ambos. Gráficos chapados dão amostras limpas e bem separadas; fotos dão um conjunto mais graduado porque tons reais se espalham por muitas cores próximas. Para uma foto, suba o Número de cores para 8–12 a fim de capturar a faixa mais rica.