Palette de couleurs à partir d’une image ou d’une photo

Pour construire une palette de couleurs à partir d’une image, cherchez trois choses : les couleurs dominantes qui remplissent les plus grandes zones, quelques couleurs secondaires, et un ou deux petits accents vifs qui donnent son étincelle à l’image. Prélevez ensuite chacune sur une zone plutôt que sur un seul pixel, nettoyez-la pour qu’elle corresponde à ce dont vous vous souvenez, et vérifiez que les couleurs vont ensemble. Bien faite, la palette rappelle la photo même quand la photo n’est pas là.

Ce guide explique comment procéder à la main, ce que les outils automatiques réussissent ou ratent, et comment transformer le résultat en dégradé. Pour des palettes toutes faites tirées de vraies scènes, voyez les palettes de couleurs de la nature.

Couleurs dominantes, secondaires et d’accent

Chaque photo a une hiérarchie de couleurs. Imaginez un port au crépuscule : l’essentiel du cadre est une eau bleu profond et un ciel ardoise, une bande de toits terre cuite traverse le milieu, et quelques petits lampadaires au sodium brillent en orange. L’eau et le ciel sont dominants, les toits les soutiennent, et les lampes sont l’accent. Retirez les lampes et la palette perd sa chaleur ; rendez-les dominantes et c’est une autre image.

Notez les proportions à côté des couleurs. Une palette n’est pas qu’une liste de codes hex : les mêmes six couleurs en quantités égales ne ressembleront en rien à la photo. La règle des 60-30-10 est un bon moyen de les consigner.

Comment extraire les couleurs d’une photo à la main

1. 1

   Floutez d’abord la photo

   Appliquez un flou fort, ou plissez simplement les yeux. Le détail, la texture et le bruit disparaissent et les vraies zones de couleur apparaissent. Échantillonner une image floue donne des moyennes plutôt que des accidents.

2. 2

   Échantillonnez des zones, pas des pixels

   Utilisez une pipette avec une grande taille d’échantillon, par exemple 11 par 11 pixels, ou prélevez trois points dans chaque zone et faites la moyenne.

3. 3

   Récoltez plus qu’il ne faut

   Prenez de huit à douze échantillons dans différentes parties de l’image, y compris les plus petits détails vifs.

4. 4

   Regroupez et choisissez

   Regroupez les échantillons proches, gardez le plus net de chaque groupe et finissez avec cinq à sept couleurs : deux ou trois dominantes, deux secondaires, une ou deux d’accent.

5. 5

   Corrigez vers le souvenir

   Comparez chaque pastille avec la photo à taille normale. Si une couleur paraît terne ou grise à côté de ce dont vous vous souvenez, relevez un peu sa chroma ou décalez sa teinte.

6. 6

   Vérifiez le contraste

   Assurez-vous qu’au moins une couleur claire et une sombre de la palette se lisent l’une sur l’autre pour du texte. Voyez le contraste des couleurs.

Pourquoi les prélèvements à la pipette paraissent boueux

Une photo n’est pas faite de couleurs propres. Un ciel bleu, ce sont des milliers de bleus légèrement différents, les ombres se teintent de ce qui les entoure, et la compression JPEG ajoute des blocs de couleur moyennée. Cliquez une fois et vous tombez souvent sur un pixel gris-brun qui existe dans le fichier mais pas dans votre souvenir de la scène.

Utiliser un générateur de palette à partir d’une image

Les outils automatiques réduisent l’image, regroupent les pixels proches et renvoient les plus gros groupes. Cela trouve les couleurs dominantes de façon fiable. Leur faiblesse, c’est l’accent : une petite lumière orange peut couvrir un pour cent du cadre, donc elle n’entre jamais dans la liste. Voyez le résultat de tout générateur comme un premier jet et rajoutez les accents à la main.

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

Transformer une palette de photo en dégradé

La façon la plus simple de donner à un dégradé l’air d’une photo est de garder les couleurs dans l’ordre où elles apparaissent dans la scène. Ciel au-dessus de l’horizon au-dessus de l’eau. Feuilles au-dessus des fruits au-dessus de la terre. Le dégradé porte alors la structure de l’image autant que ses couleurs, et on sent le lien même sans pouvoir le nommer.

Surveillez les transitions entre voisines. Deux couleurs éloignées dans la photo, comme un toit chaud et un ciel froid, peuvent se rejoindre dans le gris quand on les mélange directement. Placez entre elles une couleur qui s’y trouve dans la scène, comme la lueur pâle ci-dessus, et le mélange reste propre. Les dégradés boueux expliquent la règle.

Dans Gradiently, Assortir une image fait tout cela d’un coup : déposez une image et l’outil renvoie la palette et les Marks existants les plus proches, ou crée de nouveaux Marks qui lui ressemblent. Vous pouvez ensuite créer avec n’importe lequel aussitôt.