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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/color-palette-from-image)

Um conta-gotas dá-te um píxel. Uma paleta precisa das cores de que te lembras da imagem, nas proporções certas. Eis como passar de um para o outro.

## The short version

- Uma boa paleta de cores a partir de uma imagem tem três tipos de cor: cores dominantes das áreas maiores, cores de apoio e um ou dois destaques pequenos e vivos.
- As amostras únicas de conta-gotas costumam parecer turvas porque as fotos estão cheias de sombra, ruído e compressão, por isso recolhe várias áreas e faz a média.
- As cores de que te lembras de uma foto costumam ser mais limpas e mais saturadas do que os píxeis, por isso subir ligeiramente o croma faz a paleta parecer fiel.
- Os extratores automáticos encontram bem as cores dominantes mas tendem a falhar os pequenos destaques, que deves voltar a acrescentar à mão.
- Para transformar uma paleta de foto num gradiente, mantém as cores pela ordem em que aparecem na cena, como o céu por cima da água por cima da margem.

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](https://gradiently.design/pt-pt/guide/nature-color-palettes).

## 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.

- Água do porto: #1d2a44
- Céu de ardósia: #3e5c86
- Neblina: #8a9bb5
- Telhados de terracota: #b8674e
- Luz de sódio: #f2a65a
- Último brilho: #f6dcc0

Uma paleta de um porto ao entardecer. Dois azuis dominantes, uma neblina pálida, uma terracota de apoio e dois destaques quentes que devem ficar pequenos.

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](https://gradiently.design/pt-pt/guide/60-30-10-rule) é uma boa forma de as registar.

## Como extrair cores de uma foto à mão

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. **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. **Recolhe mais do que precisas** Tira oito a doze amostras de partes diferentes da imagem, incluindo os pormenores brilhantes mais pequenos.
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. **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. **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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

## 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.

### Amostras turvas

- Um clique num único píxel
- Recolher de sombras e de arestas entre objetos
- Escolher de uma imagem pequena e comprimida
- Manter cada cor exatamente como foi recolhida

### Amostras limpas

- Uma amostra média de uma cópia desfocada
- Recolher do meio de áreas iluminadas e lisas
- Usar a versão maior e menos comprimida que tiveres
- Ajustar cada cor em direção ao que te lembras de ter visto

- Um só píxel: verde-oliva acinzentado: `linear-gradient(90deg, #6b6a5e 0%, #7d7866 100%)`
- Amostras com média e corrigidas: `linear-gradient(90deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 65%, #f2a65a 100%)`

Duas misturas da mesma foto do porto. As amostras de píxeis em bruto da aresta entre o céu e os telhados resvalam para o cinzento; as amostras limpas, unidas pela neblina e pelo brilho, mantêm o azul e o laranja.

## 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.

```js
// 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)}`)
}
```

Um extrator mínimo no navegador. A imagem tem de estar no mesmo site ou permitir uso entre origens, ou a tela recusa lê-la.

## 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.

- Porto ao entardecer: `linear-gradient(180deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 50%, #b8674e 62%, #1d2a44 100%)`
- Limoal: `linear-gradient(180deg, #fdf3c4 0%, #f4d03f 35%, #6f8f3a 70%, #2f4a2a 100%)`
- Manhã no deserto: `linear-gradient(180deg, #f7d9c4 0%, #e8a87c 40%, #c1666b 75%, #4a2c3a 100%)`
- Lago glaciar: `linear-gradient(180deg, #d8ecef 0%, #7fb7be 40%, #2e6f7e 75%, #13303a 100%)`

Quatro gradientes construídos a partir de paletas de fotos, cada um a manter as suas cores pela ordem da cena, de cima para baixo.

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](https://gradiently.design/pt-pt/guide/muddy-gradients) explicam a regra.

Na Gradiently, o [Igualar uma imagem](/forge/match) 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.

## FAQ

### Como obtenho uma paleta de cores a partir de uma imagem?

Desfoca a imagem, recolhe as áreas de cor maiores mais um ou dois destaques pequenos e vivos, faz a média de cada amostra sobre vários píxeis e ajusta as cores em direção ao que te lembras de ter visto.

### Quantas cores deve ter uma paleta tirada de uma foto?

Cinco a sete costumam captar uma foto: duas ou três cores dominantes, duas de apoio e um ou dois destaques.

### Porque é que as cores que escolho numa foto parecem baças?

Os píxeis isolados vêm muitas vezes de sombras, arestas ou artefactos de compressão. Recolhe áreas com média de partes iluminadas e lisas da imagem e sobe ligeiramente o croma se uma cor ainda parecer cinzenta.

### Porque é que o meu gerador de paletas falha a cor mais brilhante?

Os geradores ordenam as cores pela parte da imagem que cobrem, por isso os destaques pequenos raramente entram na lista. Volta a acrescentá-los à mão.