Montar uma paleta a partir de uma foto

Para tirar uma paleta de uma foto, escolha de três a cinco pontos da imagem que cumpram papéis diferentes: uma cor escura, uma clara, uma dominante e uma ou duas de destaque. Use o conta-gotas de um editor de imagem ou de um site que extrai cores, anote o código HEX de cada ponto e depois ajuste o resultado. A foto dá as cores que combinam entre si. O ajuste dá as cores que funcionam em um site, um cartaz ou um perfil.

O que uma foto traz de graça para a paleta

Uma foto de verdade já traz combinações que o olho aceita. O pôr do sol, uma banca de feira, uma parede de azulejo: as cores aparecem em proporções naturais, com luz e sombra. Quem monta paleta do zero costuma errar nas proporções e na intensidade. Quem parte de uma foto herda o equilíbrio.

O ponto fraco é que a foto não foi feita para texto. Os tons médios, que dominam a maioria das fotos, ficam parecidos entre si e dão pouco contraste. Por isso o trabalho tem duas fases: extrair e depois corrigir.

Que tipo de foto rende uma boa paleta

Nem toda foto rende uma boa paleta. Prefira uma imagem com poucas áreas bem definidas de cor. Uma foto de multidão colorida dá dez tons que brigam. Uma foto de uma banca de frutas ao fim da tarde dá três ou quatro tons claros.

Boas fotos para começar:

• paisagens com céu, terra e vegetação bem separados;
• natureza-morta (objetos sobre uma mesa) com luz suave;
• uma foto do próprio produto do negócio, como um bolo, uma cerâmica ou um tecido.

Use fotos que você tem direito de usar. Para extrair só as cores, o código HEX que você anota não é a foto, mas ao publicar a imagem em algum lugar, confira de onde ela veio.

Da banca de feira à paleta: cinco passos

Imagine uma foto de uma banca de feira no fim do dia: tomates, folhas verdes, caixotes de madeira escura e uma luz dourada. Vamos tirar a paleta “Feira ao entardecer”.

1. Abra a foto e procure os grupos de cor. Não pegue o primeiro tom que vir. Observe: há um vermelho-alaranjado dos tomates, um verde de folha, um dourado da luz, um marrom da madeira e um bege do papel de embrulho.
2. Pegue um ponto de cada grupo. Com o conta-gotas, clique numa parte de cor firme, não numa borda nem num brilho. Brilhos e sombras profundas enganam. Anote o HEX, o código de seis caracteres que identifica a cor.
3. Dê um papel a cada cor. Aqui ficou assim:
   • #3B2F2F, marrom bem escuro, para texto e contornos;
   • #F3E9DC, bege claro, para fundo;
   • #B5532F, terracota dos tomates, como cor dominante;
   • #E8B04B, dourado da luz, para destaque;
   • #8A9A5B, verde de folha, como apoio.
4. Corrija o que a foto não resolve. Veja a próxima seção.
5. Teste com texto de verdade. Escreva o título e um parágrafo no editor e confira a leitura.

Três ajustes que a cor da foto pede

As cores tiradas direto da imagem raramente servem sem ajuste. Três correções resolvem quase tudo:

Escureça o texto. O ponto mais escuro de uma foto costuma ser um cinza-marrom. Se for usar como letra, deixe mais escuro e mais neutro, até a leitura ficar firme.

Clareie o fundo. O fundo nunca deve ser a cor tal como saiu da foto. Pegue a cor de papel de embrulho, clareie e reduza a saturação (a intensidade da cor, o quanto ela é “viva” ou “apagada”). O resultado vira um bege suave.

Limite os destaques. Um destaque só funciona se for raro. Se você escolheu duas cores fortes, uma delas vira destaque e a outra apoio.

Para entender o que mexer em cada ajuste, ajuda ver o artigo sobre matiz, saturação e luminosidade. Matiz é a “cor pura” (vermelho, verde…), saturação é a intensidade, luminosidade é o quanto é claro ou escuro.

Contraste da paleta da feira, medido

Com a paleta ajustada, calculei as razões de contraste pela fórmula da WCAG, as diretrizes de acessibilidade do W3C (a versão 2.2, de outubro de 2023, manteve os valores). Para texto normal o mínimo é 4,5:1, e para texto grande, 3:1:

Combinação	Razão	Leitura
#3B2F2F sobre #F3E9DC	10,71:1	ótima para texto
#E8B04B sobre #3B2F2F	6,58:1	boa para destaque sobre fundo escuro
#B5532F sobre #F3E9DC	4,12:1	só para texto grande ou detalhes

A terracota ficou em 4,12:1. Isso quer dizer que ela serve para um título grande, mas não para um parágrafo pequeno. Se você precisa dela em texto pequeno, escureça um pouco até passar de 4,5:1 e confira de novo.

Um detalhe técnico, para quem tem curiosidade

Muitos sites que extraem paleta de uma foto fazem algo simples. Desenham a imagem num elemento de página chamado canvas e leem os pixels. Cada pixel vem com quatro valores: vermelho, verde, azul e transparência. A documentação do MDN descreve essa leitura de pixels no método getImageData. Depois o site agrupa os pixels parecidos e mostra os grupos maiores. Você não precisa saber disso para usar, mas explica por que essas ferramentas trazem muitos tons parecidos: elas contam pixels, não pensam em papéis.

Quatro armadilhas ao extrair cores de uma imagem

Pegar cores demais. Dez amostras viram dez cores sem função. Fique em cinco no máximo.

Confiar só na ferramenta automática. Ela entrega os tons mais frequentes da foto, e o mais frequente é muitas vezes um cinza sem graça. Olhe o resultado e escolha com critério.

Usar a cor direto do céu ou da pele. Essas áreas têm gradações suaves e a cor muda de um ponto para outro. Pegue vários pontos e fique com a média visual.

Esquecer a luz da foto. Uma foto tirada com luz amarela de lâmpada esquenta tudo. Se o seu site vai ter fundo branco, o dourado da foto pode ficar estranho lado a lado. Compare sempre com o fundo real.

Com as cinco cores na mão

Com as cinco cores prontas, o próximo passo é testar em uso real. O artigo como testar uma paleta antes de usar mostra um roteiro curto para isso. Se a paleta for para um site, o fluxo completo está em como montar a paleta de cores de um site.