Extrator de Paleta de Cores de Imagem

Extrator de Paleta de Cores de Imagem

Envie uma imagem e extraia suas cores dominantes instantaneamente. A ferramenta lê cada pixel, executa quantização de corte mediano para agrupar cores semelhantes e retorna uma paleta ordenada com códigos hex, valores RGB e porcentagens. Todo o processamento acontece no seu navegador.

O que é um extrator de paleta de cores?

Um extrator de paleta de cores analisa uma imagem e identifica suas cores dominantes, retornando uma lista ordenada de amostras com seus códigos hex, valores RGB e a porcentagem de pixels que cada cor representa. Isso é útil para combinar cores de marca a partir de um logotipo, criar temas de design coerentes a partir de fotografias, construir sistemas de cores UI a partir de imagens de referência e garantir acessibilidade. O algoritmo mais comum é a quantização de corte mediano, que agrupa pixels semelhantes no espaço de cores 3D e calcula cada grupo.

Como usar

1. Arraste e solte uma imagem ou clique para enviar (PNG, JPEG, WebP, GIF, BMP ou SVG)
2. Ajuste o controle deslizante de quantidade de cores (2-16 cores)
3. Clique em Copiar ao lado de qualquer amostra para copiar seu código hex
4. Exporte a paleta completa como variáveis CSS ou JSON

Como a quantização de corte mediano funciona

A cor de cada pixel é um ponto no espaço 3D onde vermelho, verde e azul são os eixos. Uma imagem de 800x800 produz 640.000 pontos. O corte mediano constrói uma caixa delimitadora ao redor de todos esses pontos e a divide na mediana ao longo do eixo mais longo, criando duas caixas menores. Cada caixa é recursivamente dividida até atingir o número alvo de caixas. Os pixels em cada caixa são calculados para produzir uma única cor de amostra.

Esta abordagem preserva o contraste de cores melhor do que o simples agrupamento. A divisão na mediana garante que cada caixa contenha aproximadamente o mesmo número de pixels, então a paleta representa a distribuição real de cores da imagem.

A ferramenta filtra pixels transparentes (alfa < 25), quase pretos (média < 15) e quase brancos (média > 240) antes da quantização.

Quando usar diferentes quantidades de cores

2-4 cores produzem paletas planas e posterizadas. Use-as para extração mínima de cores de logotipo ou paletas de marca simplificadas.

6-8 cores dão uma representação equilibrada da maioria das imagens. Fotografias com iluminação natural, paisagens e fotos de produtos funcionam bem nesta faixa.

10-16 cores capturam mudanças sutis de tom em degradês, pôr do sol, texturas de tecido e outras imagens com amplo alcance tonal.

Uso em fluxos de trabalho CSS e design

A exportação CSS produz variáveis nomeadas que mapeiam para cada amostra. Exemplo de saída para uma paleta de 8 cores:

:root {
  --color-palette-1: #1a365d;
  --color-palette-2: #2b6cb0;
  --color-palette-3: #63b3ed;
  --color-palette-4: #bee3f8;
}

A exportação JSON retorna dados estruturados com hex, RGB e porcentagem. Útil para tokens de design em sistemas de build.

Ferramentas relacionadas

Precisa converter uma única cor entre formatos? Use o Conversor de Cores. Gere degradês CSS a partir da sua paleta com o Gerador de Degradê CSS. Verifique o contraste de acessibilidade antes de usar cores extraídas com o Verificador de Contraste WCAG.