Imagem Pronta por Pronto no Clique

Extrair paleta de cores de uma foto

Descubra as cores principais de uma imagem para usar no seu material.

As cores são agrupadas pelo corte na mediana: o grupo com a maior variação num canal (vermelho, verde ou azul) é dividido ao meio até chegar ao número de cores pedido, e cada cor é a média do grupo. A porcentagem é a parte dos pixels visíveis que ficou com ela; áreas transparentes não contam.

Imagem

Foto, logo ou ilustração (JPG, PNG, WebP, HEIC…).

O arquivo é lido no seu navegador e não é enviado a nenhum servidor.

Número de cores

Paleta

Escolha a imagem. As cores principais, para copiar, aparecem aqui.

Calculando…

Como funciona

A imagem é reduzida para até 512 px no lado maior (o bastante para as cores, e rápido no celular), e pixels com menos de 50% de opacidade ficam de fora. Então vem o corte na mediana (Heckbert, 1982): todos os pixels começam num grupo só; o grupo com a maior variação num canal (vermelho, verde ou azul) é dividido na mediana desse canal, e assim por diante até ter o número de cores pedido. Cada cor da paleta é a média do seu grupo.

A porcentagem é a parte dos pixels visíveis mais próxima de cada cor. Cores com menos de 0,5% dos pixels saem da lista (são bordas e ruído); por isso a paleta pode ter menos cores que o pedido, como numa imagem que só tem quatro.

Exemplo para conferir

O exemplo cria uma imagem de 500 × 250 px com quatro faixas: azul-petróleo #1F5F7A em 40% da largura, amarelo #FFD166 em 30%, vermelho #C82828 em 20% e cinza-claro #F0F0F0 em 10%. Pedindo 5 cores, a paleta traz só essas quatro, nessa ordem e com essas porcentagens, porque a imagem não tem uma quinta cor.

Limitações

A paleta mostra as cores que mais aparecem, não as mais marcantes: um detalhe pequeno e vivo pode não entrar. Nesse caso, aumente o número de cores ou use o conta-gotas. Os nomes das cores não são dados, só os códigos.

Seu arquivo é processado no seu navegador e não é enviado para nenhum servidor.

Fontes e revisão

Conteúdo revisado em . A data muda só quando as regras e os textos são conferidos de novo, não a cada atualização técnica do site.

Perguntas frequentes

Como tirar a paleta de cores de uma foto?

Escolha a foto, o número de cores e toque em "Extrair a paleta". As cores aparecem da mais presente para a menos presente, com o código HEX, o RGB e a porcentagem da imagem que cada uma ocupa. "Copiar" leva a lista inteira.

Quantas cores escolher?

Para identidade visual e logos, de 3 a 5 costumam bastar. Para fotos, 8 a 12 mostram melhor as variações (céu, pele, sombras). Com poucas cores, tons parecidos se juntam numa cor média.

Por que a cor da paleta não é exatamente a de um pixel?

Cada cor da paleta é a média de um grupo de pixels parecidos. Para o código exato de um ponto, use o conta-gotas, que lê o pixel (ou a média de poucos pixels) onde você tocar.

Como uso as cores no site?

O resultado traz as variáveis CSS prontas (--cor-1, --cor-2…) para colar na folha de estilo, e cada amostra mostra o código em preto ou branco, o que tiver mais contraste sobre ela.

A imagem é enviada para algum servidor?

Não. As cores são calculadas pelo navegador, no seu aparelho.

Relacionadas

Imagem Pronta

Comprimir PNG

PNG menor com paleta de até 256 cores, mantendo a transparência.

Ver todas as ferramentas de Imagem Pronta · Catálogo completo