Paleta de cores a partir de imagem

Como extrair uma paleta de cores de uma imagem

1. Larga uma imagem na zona de carregamento, ou clica nela para escolher um ficheiro. Funcionam JPG, PNG, WebP, GIF e qualquer outro formato que o teu navegador consiga mostrar.
2. A ferramenta analisa a imagem de imediato e mostra as Cores dominantes, ordenadas da mais presente para a menos presente.
3. Ajusta o Número de cores (de 3 a 12) para obteres uma paleta mais ampla ou mais concentrada. Desmarca Ignorar píxeis brancos e quase brancos se o branco for uma cor importante da tua imagem, por exemplo num produto branco ou numa paisagem com neve.
4. Copia uma cor com o botão Copiar por baixo da amostra, ou escolhe um formato em Exportar como (Lista HEX, Variáveis CSS, Variáveis SCSS, Array JSON ou Cores Tailwind) e clica em Copiar ou Transferir para a paleta completa. Extrair cores volta a fazer a análise.

A tua imagem é lida localmente pelo navegador. Nunca é enviada para um servidor.

Como são encontradas as cores dominantes

A imagem é primeiro desenhada num canvas invisível, reduzida para que o lado maior tenha no máximo 512 píxeis. Isto mantém a análise rápida sem alterar as cores gerais. Os píxeis são depois agrupados com um algoritmo de quantização (o median cut modificado da biblioteca open source Color Thief) que trabalha no espaço de cor OKLCH, para que as cores que parecem semelhantes aos olhos acabem no mesmo grupo.

Cada grupo dá origem a uma cor da paleta, e a percentagem por baixo de cada amostra é a sua parte dos píxeis analisados. A barra por cima das amostras mostra essas proporções de relance. Os píxeis transparentes são ignorados, tal como os brancos e quase brancos enquanto a opção estiver marcada, porque de outra forma os fundos brancos dominariam a maioria das fotografias de produto e das capturas de ecrã.

Cada amostra mostra o seu código HEX a preto ou a branco, consoante o que se lê melhor, para que o rótulo continue legível tanto em cores claras como escuras.

Ideias para usar uma paleta extraída de uma imagem

• Identidade de marca e web design: cria o tema de um site a partir de uma fotografia de destaque ou de um logótipo, para que a interface condiga com a imagem.
• Apresentações e redes sociais: escolhe cores de texto e de fundo que combinem com uma imagem de capa.
• Decoração de interiores, moda e arte: capta o ambiente de uma fotografia, de uma pintura ou de uma amostra de tecido.
• Visualização de dados: tira as cores dos gráficos de uma ilustração usada no mesmo relatório.

As cores extraídas são médias de muitos píxeis, por isso podem parecer um pouco menos vivas do que o ponto mais saturado da fotografia. Se precisares da cor exata de um píxel específico, usa antes um seletor de cores de imagem.