Cores dominantes em variáveis CSS

Importe uma imagem e gere diretamente um bloco de variáveis CSS (:root {}) com as cores dominantes dela, pronto para colar na sua folha de estilo.

Exemplo:
Arraste e solte uma imagem aqui ou clique para procurar (25 MB no máximo).

Como funciona

A ferramenta analisa a distribuição das cores da imagem por meio de um histograma e retém os tons mais frequentes, ordenados do mais dominante ao menos frequente. Cada cor é então formatada como uma variável CSS numerada (--color-1, --color-2 etc.) em um bloco :root que você pode copiar diretamente.

Posso renomear as variáveis geradas?

Sim, o nome genérico --color-N é um ponto de partida neutro: depois de colado na sua folha de estilo, renomeie cada variável conforme o uso real (por exemplo --color-primary, --color-accent) para um código mais legível.

Quantas cores devo extrair?

Para uma identidade visual simples, 3 a 5 cores geralmente bastam (uma dominante, um destaque e um ou dois tons neutros). Um número maior é útil se você quiser capturar toda a riqueza de uma foto para um uso mais decorativo.

Processamento 100% local: a extração da paleta acontece inteiramente no seu navegador — sua imagem nunca é enviada a um servidor.