Como extrair uma paleta útil de pixel art de uma imagem
Você quer que um novo personagem pareça pertencer ao mesmo conjunto de um já existente. Copiar uma única cor com o conta-gotas não resolve isso: o sprite original tem sombras, cores de base, brilhos e, muitas vezes, cores soltas nas bordas. Comece encontrando as cores reais e depois decida quais formam uma paleta utilizável.
Comece com o arquivo que ainda tem pixels limpos
Use o PNG original se o tiver. Uma captura em JPEG pode introduzir valores RGB ligeiramente diferentes ao redor de cada borda, então um personagem pintado com seis cores intencionais pode parecer conter centenas. Um WebP com perdas pode fazer o mesmo. O extrator de paletas conta exatamente as cores decodificadas; ele não finge que essas novas cores quase iguais são a mesma tinta.
Antes de adicionar a imagem, recorte interfaces sem relação com ela, bordas ou um grande fundo uniforme se quiser a paleta do personagem. Caso contrário, o fundo pode ficar em primeiro no ranking simplesmente por ocupar mais pixels. Para um sprite transparente, ajuste o limite mínimo de alfa para ignorar pixels quase invisíveis nas bordas.
Uma paleta prática de seis cores para personagens
Imagine um herói de 32 × 32 com uma jaqueta azul. A lista extraída inclui dois azuis, um realce claro, um contorno escuro, pele e um destaque quente. Não copie cegamente as seis entradas mais frequentes. Organize-as por função: contorno, sombra da jaqueta, base da jaqueta, realce da jaqueta, pele e destaque. A sequência sombra-base-realce é uma rampa de cores. Essa relação importa mais do que a ordem em que as cores aparecem na lista de frequência.
- Carregue o sprite limpo e examine a lista de frequência. Copie os códigos hexadecimais das cores que visivelmente pertencem ao personagem.
- Anote cada código ao lado da sua função: por exemplo, sombra da jaqueta, base da jaqueta, brilho da jaqueta. Se dois códigos parecerem indistinguíveis, amplie o original antes de decidir se ambos são intencionais.
- Desenhe um novo personagem usando a mesma lógica de contorno e gradação. Reutilize as cores exatas onde a consistência ajudar, mas altere as cores de destaque ou dos materiais quando o novo personagem precisar de outra identidade.
- Exporte CSS ou JSON para preservar os valores escolhidos. Trate essa exportação como uma lista de trabalho, não como prova de que toda cor contada deve estar na paleta final.

Por que uma fotografia produz um resultado pouco útil
Uma foto contém muitos gradientes e variações de compressão. A contagem exata mostra quais trios RGB aparecem mais, mas não agrupa cores semelhantes nem escolhe gradações agradáveis. Se seu objetivo é reduzir uma foto a doze cores estilizadas, você precisa de quantização ou criação manual de paleta, não apenas extração. A ferramenta do ImageMint informa intencionalmente o que está presente nos pixels; ela não recolore a imagem.
Para um projeto maior, mantenha uma folha de referência com amostras nomeadas. Analise novas artes para identificar tons acidentais. Ampliação por vizinho mais próximo pode facilitar a inspeção dos pixels existentes, mas não pode desfazer um desfoque já incorporado à origem. Recupere um original sem perdas quando possível.
Interprete corretamente o alfa e as porcentagens
Uma tela de 32 × 32 contém 1024 pixels. Suponha que apenas 600 atendam ao limite de alfa escolhido, e 150 deles usem a cor base da jaqueta. A frequência informada é 150 ÷ 600 = 25%, não 150 ÷ 1024. O preenchimento transparente não conta como uma cor, e reduzir o limite pode fazer cores sutis das bordas voltarem à lista.
O limiar padrão de 128 inclui pixels com aproximadamente metade da opacidade ou mais. Um valor de 255 inclui apenas pixels totalmente opacos. Comece em 255 para arte com bordas intencionalmente definidas e compare com 128 se o sprite tiver bordas suaves úteis. Mudar o Alfa mínimo apaga o resultado anterior; execute a análise novamente antes de comparar as contagens.
Exporte uma seleção sem perder cores de destaque raras
As 8, 16, 32 e 64 principais são limites de exibição e exportação. Elas não reduzem as cores da imagem. Se as oito principais cobrem 85% dos pixels válidos, os 15% restantes pertencem a cores ocultas. Aumente o limite para examinar um brilho no olho ou um pequeno destaque antes de decidir que a lista está completa.
O download CSS usa variáveis numeradas como --pixel-color-01. A posição no ranking pode mudar quando a pose do personagem muda, então não trate esse nome como uma função semântica estável, como “jacket-shadow”. Renomeie as variáveis escolhidas no seu próprio projeto depois de atribuir funções a elas. O JSON preserva as cores e contagens exibidas; ele não é uma imagem com paleta indexada nem uma instrução de recoloração.
Valide a paleta na arte real
- Desenhe uma pequena pose nova com o contorno escolhido e a gradação de três cores do material.
- Coloque-a ao lado da origem na escala original. Confira a legibilidade da silhueta e dos detalhes importantes.
- Analise o novo PNG e procure tons acidentais produzidos por um pincel suave ou uma operação de suavização.
- Mantenha uma referência de amostras nomeadas e um original limpo. Um relatório de contagem de cores complementa a avaliação visual, não a substitui.
Experimente o fluxo de trabalho
Carregue um PNG, veja contagens exatas de cores, copie valores hexadecimais e exporte CSS ou JSON.
Examine as cores da pixel art →