Resposta direta
A extração de paletas de cores analisa a dispersão de pixels RGB na imagem através do algoritmo de quantização Median Cut, agrupando centróides cromáticos dominantes e gerando tokens HEX, RGB e HSL.
Como usar esta ferramenta
Envie uma fotografia ou peça gráfica
Arraste um arquivo de imagem (PNG, JPEG, WebP) para a área de extração.
Defina o número de cores desejadas
Escolha a quantidade de amostras da paleta (entre 5 e 8 cores principais) e configure o descarte de fundos transparentes.
Copie os tokens e variáveis de design
Consulte os tons dominantes e copie o código em variáveis CSS, tokens JSON ou classes Tailwind.
Como funciona a quantização cromática espacial por corte mediano (Median Cut)
O algoritmo Median Cut posiciona todos os pixels da imagem em um cubo tridimensional no espaço de cores RGB. O algoritmo localiza recursivamente o eixo de maior variabilidade de cor, ordena os pontos e divide a caixa pela mediana até atingir o número exato de cores configuradas.
- Descarte de transparência: Pixels transparentes são ignorados para que o canal alfa não distorça as amostras.
- Média ponderada de centróides: Cada grupo calcula o valor médio de seus pixels para produzir uma cor representativa de alta fidelidade.
- Variáveis CSS automáticas: As cores são preparadas diretamente como variáveis nativas (--color-palette-1 a --color-palette-N).
Exemplos práticos
Extração de paleta a partir de fotografia de paisagem
Entrada: Imagem: entardecer.jpg (1920x1080 pixels, foto natural ao pôr do sol)
Saída: Paleta identificada: 6 cores — #1e293b (Azul noite), #f97316 (Laranja vívido), #fbbf24 (Âmbar), #0284c7 (Azul céu), #cbd5e1 (Névoa), #475569 (Ardósia)
Extrai uma harmonia de cores pronta para estruturar os tokens de uma interface visual.
Limitações
- Em fotos com centenas de tonalidades muito parecidas, detalhes sutis podem ser mesclados em agrupamentos maiores.
- Imagens muito grandes (com mais de 20 megapixels) passam por amostragem em memória para manter o processamento fluido.
Perguntas frequentes
É possível exportar as cores diretamente como variáveis personalizadas do CSS?
Sim. Em um clique você copia a paleta completa em formato de variáveis CSS, códigos HEX ou estrutura de dados JSON.
Minhas imagens enviadas são analisadas em algum servidor remoto?
Não. Toda a leitura de pixels e cálculos de quantização ocorrem de maneira estritamente local na memória do seu navegador.
Referências e normas oficiais
- Manipulação de Pixels com HTML5 Canvas no MDN Web Docs ↗ — Referência oficial sobre buffers de pixels RGBA, extração de ImageData e renderização gráfica.