Paleta de cores a partir de uma imagem: como a tirar de uma foto

Para construir uma paleta de cores a partir de uma imagem, procuras três coisas: as cores dominantes que enchem as áreas maiores, algumas cores de apoio e um ou dois destaques pequenos e vivos que dão faísca à imagem. Depois recolhes cada uma a partir de uma área e não de um único píxel, limpas-a para que corresponda ao que te lembras de ter visto e verificas se as cores funcionam em conjunto. Bem feita, a paleta parece a foto mesmo quando a foto não está lá.

Este guia percorre o processo à mão, o que as ferramentas automáticas fazem bem e mal, e como transformar o resultado num gradiente. Para paletas prontas de cenas reais, vê as paletas de cores da natureza.

Cores dominantes, de apoio e de destaque

Cada foto tem uma hierarquia de cor. Imagina um porto ao entardecer: a maior parte do quadro é água azul profunda e um céu de ardósia, uma faixa de telhados quentes de terracota atravessa o meio e alguns pequenos candeeiros de sódio brilham em laranja. A água e o céu são dominantes, os telhados apoiam-nos e as luzes são o destaque. Tira as luzes e a paleta perde o calor; torna-as dominantes e passa a ser outra imagem.

Escreve as proporções ao lado das cores. Uma paleta não é só uma lista de códigos hexadecimais: as mesmas seis cores usadas em quantidades iguais não se parecerão nada com a foto. A regra 60-30-10 é uma boa forma de as registar.

Como extrair cores de uma foto à mão

1. 1

   Desfoca primeiro a foto

   Aplica um desfocado forte ou simplesmente semicerra os olhos. O pormenor, a textura e o ruído desaparecem e as áreas de cor reais aparecem. Recolher amostras de uma imagem desfocada dá-te médias em vez de acasos.

2. 2

   Recolhe áreas, não píxeis

   Usa um conta-gotas com um tamanho de amostra grande, como 11 por 11 píxeis, ou escolhe três pontos em cada área e faz a média.

3. 3

   Recolhe mais do que precisas

   Tira oito a doze amostras de partes diferentes da imagem, incluindo os pormenores brilhantes mais pequenos.

4. 4

   Agrupa e escolhe

   Agrupa as amostras parecidas, guarda a mais clara de cada grupo e termina com cinco a sete cores: duas ou três dominantes, duas de apoio, um ou dois destaques.

5. 5

   Corrige em direção à memória

   Compara cada amostra com a foto em tamanho normal. Se uma cor parecer baça ou cinzenta ao lado do que te lembras, sobe-lhe um pouco o croma ou desloca-lhe o matiz.

6. 6

   Verifica o contraste

   Confirma que pelo menos uma cor clara e uma escura da paleta se leem uma contra a outra para texto. Vê o contraste de cor.

Porque é que as amostras do conta-gotas parecem turvas

Uma foto não é feita de cores limpas. Um céu azul são milhares de azuis ligeiramente diferentes, as sombras misturam a cor do que estiver perto e a compressão JPEG acrescenta blocos de cor média. Clica uma vez e muitas vezes acabas num píxel castanho-acinzentado que existe no ficheiro mas não na tua memória da cena.

Usar um gerador de paletas a partir de uma imagem

As ferramentas automáticas reduzem a imagem, agrupam píxeis parecidos e devolvem os maiores grupos. Isso encontra as cores dominantes de forma fiável. A fraqueza é o destaque: uma pequena luz laranja pode cobrir um por cento do quadro, por isso nunca entra na lista. Trata o resultado de qualquer gerador como um primeiro rascunho e volta a acrescentar os destaques à mão.

// Most common colours in an image, grouped into coarse buckets.
// Finds dominant colours well; add small accents by hand.
async function paletteFromImage(url, count = 6) {
  const img = new Image()
  img.crossOrigin = 'anonymous'
  img.src = url
  await img.decode()
  const size = 64 // shrinking first averages away noise
  const canvas = new OffscreenCanvas(size, size)
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, size, size)
  const { data } = ctx.getImageData(0, 0, size, size)
  const buckets = new Map()
  for (let i = 0; i < data.length; i += 4) {
    const key = ((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4)
    const b = buckets.get(key) ?? { r: 0, g: 0, b: 0, n: 0 }
    b.r += data[i]; b.g += data[i + 1]; b.b += data[i + 2]; b.n++
    buckets.set(key, b)
  }
  const hex = (v) => Math.round(v).toString(16).padStart(2, '0')
  return [...buckets.values()]
    .sort((a, b) => b.n - a.n)
    .slice(0, count)
    .map((b) => `#${hex(b.r / b.n)}${hex(b.g / b.n)}${hex(b.b / b.n)}`)
}

Transformar uma paleta de foto num gradiente

A forma mais fácil de fazer um gradiente parecer uma foto é manter as cores pela ordem em que aparecem na cena. Céu por cima do horizonte por cima da água. Folhas por cima do fruto por cima da terra. O gradiente passa então a carregar a estrutura da imagem e as suas cores, e as pessoas sentem a ligação mesmo sem a saberem nomear.

Repara nas transições entre vizinhas. Duas cores que ficam afastadas na foto, como um telhado quente e um céu frio, podem encontrar-se em cinzento quando misturadas diretamente. Põe uma cor que fique entre elas na cena, como o brilho pálido acima, e a mistura mantém-se limpa. Os gradientes lamacentos explicam a regra.

Na Gradiently, o Igualar uma imagem faz isto num só passo: larga uma imagem e devolve a paleta e os Marks existentes mais próximos, ou cria novos Marks com a mesma sensação. Podes depois criar com qualquer um deles logo de seguida.