Como obter uma paleta de cores de uma imagem

Passo a passo

1. Abra o Gerador de paleta de cores e solte uma imagem.
2. As cores principais aparecem na hora. Use o controle deslizante para pedir menos ou mais, de 2 a 12.
3. Clique em uma amostra para copiar o código HEX dela.
4. Ou copie a paleta inteira como lista ou como variáveis CSS.

Como as cores são escolhidas

Pixels parecidos são agrupados e cada grupo vira uma cor pela média, então a cor que preenche a maior parte da imagem vem primeiro. A porcentagem em uma amostra é quanto da imagem aquele grupo cobre.

Pixels totalmente ou quase totalmente transparentes são ignorados, então um logotipo sobre fundo transparente dá as cores do logotipo, e não uma cor escura vazia.

Como usar a paleta

Copiar como variáveis CSS gera propriedades personalizadas como --colour-1 que você pode colar direto em uma folha de estilo. A lista simples é útil para anotações ou para uma ferramenta de design.

Se a imagem tiver menos cores distintas do que você pediu, você recebe só as cores que ela tem. Um logotipo de três cores dá três amostras, não doze. Para uma cor exata, use o seletor de cores.

Dicas

Use uma imagem com o clima que você quer. Uma paleta é só tão boa quanto a imagem de onde vem, e uma foto de pôr do sol dá cores bem diferentes das de uma foto de produto.

Escolha duas ou três cores da paleta em vez de todas. A maioria dos designs funciona melhor com uma cor principal, um destaque e um neutro, e as porcentagens mostram quais cores são as maiores candidatas.