Para que serve extrair cores de uma imagem
Uma foto bem escolhida já traz uma paleta pronta: a luz, os materiais e o cenário se combinam de um jeito que seria difícil inventar do zero. O extrator transforma essa combinação em códigos HEX que você pode usar em qualquer projeto. Os usos mais comuns são:
- Moodboards e direção de arte: reúna fotos de referência e extraia de cada uma as cores que se repetem. Fica mais fácil achar o fio condutor entre imagens diferentes.
- Identidade visual a partir de uma foto: a fachada de uma loja, um produto artesanal ou uma paisagem da região podem virar o ponto de partida da marca.
- E-commerce: descubra a cor predominante de um produto para preencher filtros de cor, montar banners que combinem com a foto ou padronizar o fundo das vitrines.
- Interfaces a partir de ilustrações: se o site tem uma ilustração principal, extrair as cores dela garante que botões, fundos e ícones conversem com a arte.
Se você precisa do código de um ponto específico da imagem, e não das cores dominantes, use o conta-gotas em imagem, que lê a cor exata do pixel clicado.
Como o k-means encontra as cores dominantes
Uma foto comum tem dezenas de milhares de tons diferentes, e muitos se distinguem por uma ou duas unidades de RGB. O extrator precisa agrupar esses tons em poucas cores representativas, e para isso usa o k-means, um algoritmo clássico de agrupamento. Em linguagem simples, ele funciona assim:
- Amostragem: a ferramenta lê até 20 mil pixels da imagem. Pixels transparentes são ignorados, então o fundo vazio de um PNG não vira uma cor falsa na paleta.
- Pontos de partida: o algoritmo escolhe tantos centros quanto o número de cores pedido. A inicialização k-means++ espalha esses centros por tons bem diferentes entre si, e como ela é determinística, a mesma imagem sempre gera a mesma paleta.
- Agrupamento: cada pixel é atribuído ao centro mais próximo, ou seja, à cor com que mais se parece.
- Ajuste: cada centro passa a ser a média das cores do seu grupo. Os passos 3 e 4 se repetem até que os grupos parem de mudar.
No fim, cada grupo vira uma cor da paleta, e a porcentagem mostrada é a fatia dos pixels amostrados que pertence a ele. A barra proporcional mostra isso visualmente: uma cor que ocupa 40% da imagem ocupa 40% da barra. Como cada cor é uma média, ela pode não existir exatamente em nenhum pixel da foto, mas representa bem a família de tons que resume.
Quantas cores escolher
O controle deslizante vai de 3 a 12 cores, e a escolha depende do que você quer obter:
| Quantidade | Resultado | Quando usar |
|---|---|---|
| 3 a 5 | Só as massas de cor principais | Identidade visual, paleta de site, cor de fundo de banner |
| 6 a 8 | Principais cores mais alguns acentos | Moodboards, ilustração, estampas |
| 9 a 12 | Tons de transição, sombras e detalhes pequenos | Análise da imagem, pintura digital, retoque |
Um bom método é começar com 5 e subir aos poucos. Se uma cor que você enxerga claramente na foto, como um detalhe vermelho pequeno, não aparece, aumente o número: com poucos grupos, áreas pequenas acabam absorvidas pela cor vizinha mais extensa. Se aparecem vários tons quase iguais, reduza.
Dicas para um resultado mais limpo
- Recorte antes de enviar. Se só o produto interessa, recorte a foto para eliminar a mesa, a parede e o chão. Caso contrário, o fundo pode dominar a paleta.
- Cuidado com sombras e reflexos. Sombras geram grupos escuros e acinzentados, e reflexos geram tons quase brancos. Eles fazem parte da imagem, mas raramente são cores que você quer na marca. Fotos com luz difusa dão cores mais fiéis ao objeto.
- Fotos JPEG muito comprimidas têm artefatos em blocos e bordas com tons intermediários. Prefira o arquivo original ou com menos compressão.
- Telas e câmeras alteram a cor. O balanço de branco da câmera e o perfil de cor do monitor influenciam o resultado. Para reproduzir a cor de um objeto físico com fidelidade, compare a paleta com o objeto real.
- Cole direto da área de transferência. Com uma captura de tela copiada, pressione Ctrl+V na página. Não é preciso salvar o arquivo.
Todo o processamento acontece no seu navegador: a imagem não é enviada para nenhum servidor. Depois de extrair, clique numa cor para copiar o HEX ou exporte a paleta como variáveis CSS, JSON ou imagem PNG. O PNG é útil para colar no moodboard ou mandar para o cliente. Para mais métodos de identificar cores em fotos, veja o guia como descobrir a cor de uma imagem.
Da paleta extraída a uma paleta de interface
As cores de uma foto raramente funcionam como estão numa interface. Uma paisagem pode render cinco tons médios, parecidos em luminosidade, e nenhum deles serve como fundo ou como cor de texto. Para transformar a extração numa paleta de UI:
- Escolha a cor de destaque. Normalmente é a cor mais saturada e com menor porcentagem, aquela que chama atenção na foto. Ela será a cor dos botões e links.
- Derive os neutros. Pegue a cor dominante e crie versões bem claras para fundos e bem escuras para texto. Um fundo creme puxado de uma foto quente, como off-white, costuma funcionar melhor que o branco puro.
- Complete com o gerador. Cole a cor de destaque como cor base no gerador de paletas, trave-a e teste regras de harmonia para as cores secundárias.
- Verifique o contraste. Texto normal precisa de pelo menos 4,5:1 sobre o fundo, segundo as WCAG. Teste cada combinação no verificador de contraste e escureça ou clareie os tons até passar.
O guia como montar a paleta de cores de um site detalha a divisão entre cor primária, neutros e cores de estado.