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

Para montar uma paleta de cores a partir de uma imagem, você procura três coisas: as cores dominantes que preenchem as áreas maiores, algumas cores de apoio e uma ou duas de destaque, pequenas e vivas, que dão faísca à imagem. Depois amostra cada uma a partir de uma área, e não de um único pixel, limpa a cor para que ela combine com o que você lembra de ter visto e confere se as cores funcionam juntas. Bem feita, a paleta lembra a foto mesmo quando a foto não está lá.

Este guia mostra como fazer à mão, o que as ferramentas automáticas fazem bem e mal e como transformar o resultado em gradiente. Para paletas prontas de cenas reais, veja paletas de cores da natureza.

Cores dominantes, de apoio e de destaque

Toda foto tem uma hierarquia de cores. Imagine um porto ao entardecer: a maior parte do quadro é água azul-profunda e um céu cor de ardósia, uma faixa de telhados quentes de terracota atravessa o meio e alguns postes de luz de sódio brilham em laranja. A água e o céu são dominantes, os telhados dão apoio e as luzes são o destaque. Tire as luzes e a paleta perde o calor; faça delas as dominantes e vira outra imagem.

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

Como extrair cores de uma foto à mão

1. 1

   Desfoque a foto primeiro

   Aplique um desfoque forte, ou simplesmente aperte os olhos. Detalhe, textura e ruído somem e as áreas de cor de verdade aparecem. Amostrar uma imagem desfocada dá médias em vez de acidentes.

2. 2

   Amostre áreas, não pixels

   Use um conta-gotas com tamanho de amostra grande, como 11 por 11 pixels, ou escolha três pontos em cada área e tire a média.

3. 3

   Colete mais do que precisa

   Tire de oito a doze amostras de partes diferentes da imagem, incluindo os menores detalhes brilhantes.

4. 4

   Agrupe e escolha

   Agrupe amostras parecidas, fique com a mais clara de cada grupo e termine com cinco a sete cores: duas ou três dominantes, duas de apoio, uma ou duas de destaque.

5. 5

   Corrija em direção à memória

   Compare cada amostra com a foto em tamanho normal. Se uma cor parecer sem vida ou acinzentada perto do que você lembra, eleve um pouco o croma ou ajuste o matiz.

6. 6

   Confira o contraste

   Garanta que pelo menos uma cor clara e uma escura da paleta se leiam uma contra a outra para texto. Veja contraste de cores.

Por que as cores do conta-gotas saem turvas

Uma foto não é feita de cores limpas. Um céu azul são milhares de azuis levemente diferentes, as sombras misturam a cor de tudo o que está por perto e a compressão JPEG adiciona blocos de cor média. Clique uma vez e você muitas vezes cai num pixel cinza-amarronzado que existe no arquivo, mas não na sua memória da cena.

Usando um gerador de paleta a partir de imagem

As ferramentas automáticas reduzem a imagem, agrupam pixels parecidos e devolvem os maiores grupos. Isso acha as cores dominantes com confiança. A fraqueza é o destaque: uma pequena luz laranja pode cobrir um por cento do quadro, então nunca entra na lista. Trate o resultado de qualquer gerador como um primeiro rascunho e devolva 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)}`)
}

Transformando uma paleta de foto em gradiente

O jeito mais fácil de fazer um gradiente parecer uma foto é manter as cores na ordem em que aparecem na cena. Céu acima do horizonte acima da água. Folhas acima de frutas acima da terra. O gradiente passa a carregar a estrutura da imagem além das cores, e as pessoas sentem a ligação mesmo sem saber nomeá-la.

Observe as transições entre vizinhas. Duas cores que ficam distantes na foto, como um telhado quente e um céu frio, podem se encontrar no cinza quando misturadas diretamente. Coloque no meio uma cor que fique entre elas na cena, como o brilho claro acima, e a mistura continua limpa. Gradientes turvos explica a regra.

No Gradiently, Combinar com uma imagem faz isso em um passo: solte uma imagem e ele devolve a paleta e os Marks existentes mais próximos, ou cria novos Marks com a mesma sensação. Depois você pode projetar com qualquer um deles na hora.