Paleta de cores a partir de imagem
Extraia as cores dominantes de uma foto com agrupamento k-means, veja a porcentagem que cada uma ocupa e copie códigos HEX, variáveis CSS ou JSON.
Executa totalmente no seu navegador. Seus dados nunca são enviados.
O que é Paleta de cores da imagem?
Esta ferramenta encontra as cores principais de uma imagem e as exibe como uma paleta, ordenada pelo quanto da imagem cada cor ocupa. Escolha entre 2 e 12 cores e copie-as como códigos HEX, propriedades personalizadas CSS ou JSON com valores RGB e porcentagens.
Como usar Paleta de cores da imagem
- Solte, escolha ou cole uma imagem.
- Selecione o Número de cores.
- Leia a barra da paleta e a lista com HEX, RGB e porcentagem de cada cor.
- Copie um único código HEX, ou use Copiar como variáveis CSS, Copiar como JSON ou Copiar lista HEX.
Exemplo
40×20 image split into red, green, blue and white quadrants, 4 colors
#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%
Quando usar Paleta de cores da imagem
Use-a para montar um esquema de cores a partir de uma foto ou obra de arte, combinar o tema de um site com uma imagem de destaque ou analisar as imagens de uma marca. As médias dos grupos podem diferir um pouco de qualquer pixel individual; para ler a cor exata de um pixel, use o Seletor de cores de imagem.
Como funciona Paleta de cores da imagem
A imagem é reduzida para no máximo 256 px no lado maior e os pixels totalmente transparentes são ignorados. Os pixels restantes são agrupados com k-means no espaço RGB: os centros iniciais são escolhidos de forma determinística (o pixel mais próximo da cor média e, depois, repetidamente o pixel mais distante de todos os centros já escolhidos), e até 12 iterações reatribuem os pixels e movem cada centro para a média do seu grupo. Cada cor da paleta é a média de um grupo; sua porcentagem é a fração de pixels naquele grupo.
Casos de Uso Comuns
- Criar o tema de cores de um site a partir de uma foto de cabeçalho.
- Extrair as cores da marca de um logo ou de uma foto de produto.
- Gerar variáveis CSS para o mood board de um design system.
- Comparar o equilíbrio de cores de imagens diferentes.
Nota de Segurança
As imagens são decodificadas, processadas e codificadas localmente no seu navegador com a Canvas API. Nada é enviado a um servidor.
Perguntas Frequentes
Por que as cores são um pouco diferentes da imagem?
Cada cor da paleta é a média de um grupo de pixels parecidos, então pode não coincidir exatamente com nenhum pixel, principalmente em fotos com gradientes.
Vou obter a mesma paleta toda vez?
Sim. O algoritmo usa uma inicialização determinística, então a mesma imagem e o mesmo número de cores sempre geram a mesma paleta.
Pixels transparentes são contados?
Não. Pixels com menos de 50% de opacidade são ignorados, então um logo sobre fundo transparente gera apenas as cores do logo.