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

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

Um conta-gotas dá um pixel. Uma paleta precisa das cores de que você se lembra da imagem, nas proporções certas. Veja como ir de um ao outro.

## The short version

- Uma boa paleta de cores a partir de uma imagem tem três tipos de cor: as dominantes, das áreas maiores, as de apoio e uma ou duas de destaque, pequenas e vivas.
- Escolhas isoladas com o conta-gotas costumam sair turvas, porque as fotos estão cheias de sombra, ruído e compressão, então amostre várias áreas e tire a média.
- As cores de que você se lembra de uma foto costumam ser mais limpas e saturadas do que os pixels, então elevar um pouco o croma faz a paleta parecer fiel.
- Os extratores automáticos acham bem as cores dominantes, mas tendem a perder os destaques pequenos, que você deve devolver à mão.
- Para transformar uma paleta de foto em gradiente, mantenha as cores na ordem em que aparecem na cena, como céu acima da água acima da margem.

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

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

- Á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 clara, uma terracota de apoio e dois destaques quentes que devem ficar pequenos.

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

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

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. **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. **Colete mais do que precisa** Tire de oito a doze amostras de partes diferentes da imagem, incluindo os menores detalhes brilhantes.
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. **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. **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](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

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

### Escolhas turvas

- Um clique em um único pixel
- Amostrar sombras e bordas entre objetos
- Escolher em uma imagem pequena e comprimida
- Manter cada cor exatamente como foi amostrada

### Escolhas limpas

- Uma amostra média de uma cópia desfocada
- Amostrar o meio de áreas iluminadas e lisas
- Usar a versão maior e menos comprimida que você tiver
- Ajustar cada cor em direção ao que você lembra de ter visto

- Escolhas de um pixel: oliva acinzentado: `linear-gradient(90deg, #6b6a5e 0%, #7d7866 100%)`
- Escolhas médias e corrigidas: `linear-gradient(90deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 65%, #f2a65a 100%)`

Duas misturas da mesma foto do porto. Pixels crus da borda entre o céu e os telhados derivam para o cinza; escolhas limpas, ligadas pela neblina e pelo brilho, mantêm o azul e o laranja.

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

```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 precisa estar no mesmo site ou permitir uso entre origens, senão o canvas se recusará a lê-la.

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

- Porto ao entardecer: `linear-gradient(180deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 50%, #b8674e 62%, #1d2a44 100%)`
- Pomar de limões: `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 glacial: `linear-gradient(180deg, #d8ecef 0%, #7fb7be 40%, #2e6f7e 75%, #13303a 100%)`

Quatro gradientes feitos com paletas de fotos, cada um mantendo as cores na ordem da cena, de cima para baixo.

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

No Gradiently, [Combinar com uma imagem](/forge/match) 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.

## FAQ

### Como tiro uma paleta de cores de uma imagem?

Desfoque a imagem, amostre as maiores áreas de cor mais um ou dois destaques pequenos e vivos, tire a média de cada amostra em vários pixels e ajuste as cores em direção ao que você lembra de ter visto.

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

De cinco a sete costumam captar uma foto: duas ou três cores dominantes, duas de apoio e uma ou duas de destaque.

### Por que as cores que tiro de uma foto parecem sem vida?

Pixels isolados costumam vir de sombras, bordas ou artefatos de compressão. Amostre áreas médias de partes iluminadas e lisas da imagem e eleve um pouco o croma se a cor ainda parecer cinza.

### Por que meu gerador de paleta perde a cor mais brilhante?

Os geradores ordenam as cores pela parte da imagem que cobrem, então destaques pequenos raramente entram na lista. Devolva-os à mão.