ximg.es

Paleta de cores de uma imagem

Carregue uma imagem, ou escolha uma fotografia aleatória, e obtenha as cores principais prontas para o CSS. Tudo é calculado no navegador.

Imagem da qual é extraída a paleta
Ou experimente uma fotografia aleatória de…

Formato

Como é calculada a paleta

A imagem é reduzida para cerca de 96 píxeis de lado e as cores são agrupadas com k-means: o algoritmo procura as N cores que melhor representam todos os píxeis. O agrupamento é feito no espaço OKLab, que mede as diferenças como o olho as perceciona; em RGB, dois verdes muito diferentes podem parecer «próximos» e dois cinzentos quase iguais, distantes. O ponto de partida não é aleatório, por isso a mesma imagem dá sempre a mesma paleta.

Cor média e cores dominantes

Não são a mesma coisa. As cores dominantes são as que ocupam mais superfície; a cor média é a mistura de todas, como se a imagem fosse reduzida a um píxel. A média costuma ser um tom apagado que não aparece tal e qual na fotografia, mas é o melhor fundo de carregamento: parece-se com a imagem no seu conjunto e não destoa quando a fotografia chega. É a mesma cor que o gerador ximg.es guarda para cada fotografia do seu banco.

Ideias para usar a paleta

Antes de colocar texto sobre alguma destas cores, verifique o contraste com o verificador WCAG.

Perguntas frequentes

Como se extraem as cores de uma imagem?

Carregue a imagem ou arraste-a para aqui. A ferramenta calcula as cores principais e apresenta-as em HEX, RGB ou HSL, com a percentagem da imagem que cada uma ocupa.

A imagem é carregada para algum servidor?

Não. Os píxeis são lidos com canvas no navegador; a imagem não sai do equipamento.

Qual é a diferença entre cor dominante e cor média?

A dominante é a que ocupa mais superfície; a média é a mistura de todos os píxeis. A média funciona melhor como fundo enquanto a imagem carrega.

Porque é que não sai exatamente a cor que se vê na fotografia?

Cada cor da paleta é a média de um grupo de píxeis parecidos, por isso suaviza os matizes. Para um píxel exato, use um conta-gotas.

Quantas cores convém extrair?

Entre cinco e seis chegam para uma paleta de site. Com mais, surgem variações do mesmo tom.

A paleta pode ser usada no Tailwind?

Sim: copie o JSON ou as variáveis CSS e use-os em theme.extend.colors ou como var(--color-1).

Mais ferramentas

Ver todas as ferramentas · Gerador de imagens placeholder