Farbpalette aus einem Bild erstellen: so holst du sie aus einem Foto

Um eine Farbpalette aus einem Bild zu bauen, suchst du drei Dinge: die dominanten Farben, die die größten Flächen füllen, ein paar unterstützende Farben und ein oder zwei kleine, lebhafte Akzente, die dem Bild seinen Funken geben. Dann nimmst du jede aus einer Fläche statt aus einem einzelnen Pixel auf, bereinigst sie, bis sie zu dem passt, woran du dich erinnerst, und prüfst, ob die Farben zusammenspielen. Gut gemacht wirkt die Palette wie das Foto, auch wenn das Foto nicht da ist.

Dieser Leitfaden zeigt, wie du es von Hand machst, was automatische Tools richtig und falsch machen und wie du das Ergebnis in einen Farbverlauf verwandelst. Fertige Paletten aus echten Szenen findest du unter Farbpaletten aus der Natur.

Dominante, unterstützende und Akzentfarben

Jedes Foto hat eine Farbhierarchie. Stell dir einen Hafen in der Dämmerung vor: Der größte Teil des Bildes ist tiefblaues Wasser und ein schieferfarbener Himmel, ein Band warmer Terrakotta-Dächer zieht sich durch die Mitte, und ein paar kleine Natriumdampf-Straßenlaternen glühen orange. Wasser und Himmel sind dominant, die Dächer unterstützen sie, und die Lichter sind der Akzent. Nimmst du die Lichter weg, verliert die Palette ihre Wärme; machst du sie dominant, wird es ein anderes Bild.

Schreibe die Anteile neben die Farben. Eine Palette ist nicht nur eine Liste von Hex-Codes: Dieselben sechs Farben zu gleichen Teilen eingesetzt sehen dem Foto überhaupt nicht ähnlich. Die 60-30-10-Regel eignet sich gut, um sie festzuhalten.

So liest du Farben von Hand aus einem Foto aus

1. 1

   Weichzeichne das Foto zuerst

   Wende eine starke Unschärfe an oder kneife einfach die Augen zusammen. Details, Struktur und Rauschen verschwinden, und die echten Farbflächen treten hervor. Aus einem unscharfen Bild bekommst du Durchschnitte statt Zufälle.

2. 2

   Nimm Flächen auf, keine Pixel

   Nutze eine Pipette mit großer Aufnahmegröße, etwa 11 mal 11 Pixel, oder wähle drei Punkte in jeder Fläche und mittle sie.

3. 3

   Sammle mehr, als du brauchst

   Nimm acht bis zwölf Proben aus verschiedenen Bereichen des Bildes, auch aus den kleinsten hellen Details.

4. 4

   Gruppieren und auswählen

   Fasse ähnliche Proben zusammen, behalte aus jeder Gruppe die klarste und komm auf fünf bis sieben Farben: zwei oder drei dominante, zwei unterstützende, ein oder zwei Akzente.

5. 5

   Zur Erinnerung hin korrigieren

   Vergleiche jedes Farbfeld in normaler Größe mit dem Foto. Wirkt eine Farbe neben dem, woran du dich erinnerst, matt oder grau, hebe ihre Buntheit etwas an oder verschiebe ihren Farbton leicht.

6. 6

   Kontrast prüfen

   Achte darauf, dass mindestens eine helle und eine dunkle Farbe der Palette für Text gut voneinander abheben. Siehe Farbkontrast.

Warum Pipettenwerte matschig aussehen

Ein Foto besteht nicht aus sauberen Farben. Ein blauer Himmel sind tausende leicht verschiedene Blautöne, Schatten mischen die Farbe ihrer Umgebung ein, und die JPEG-Kompression fügt Blöcke gemittelter Farbe hinzu. Klickst du einmal, landest du oft auf einem graubraunen Pixel, der in der Datei existiert, aber nicht in deiner Erinnerung an die Szene.

Einen Palettengenerator für Bilder nutzen

Automatische Tools verkleinern das Bild, fassen ähnliche Pixel zusammen und liefern die größten Gruppen. Das findet dominante Farben zuverlässig. Die Schwäche ist der Akzent: Ein kleines orangefarbenes Licht deckt vielleicht ein Prozent des Bildes ab und schafft es nie auf die Liste. Sieh das Ergebnis jedes Generators als ersten Entwurf und ergänze die Akzente von Hand.

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

Eine Fotopalette in einen Farbverlauf verwandeln

Am einfachsten wirkt ein Farbverlauf wie ein Foto, wenn du die Farben in der Reihenfolge behältst, in der sie in der Szene vorkommen. Himmel über Horizont über Wasser. Blätter über Früchten über Erde. Der Verlauf trägt dann die Struktur des Bildes und nicht nur seine Farben, und Menschen spüren die Verbindung, auch wenn sie sie nicht benennen können.

Achte auf die Übergänge zwischen Nachbarn. Zwei Farben, die im Foto weit auseinanderliegen, etwa ein warmes Dach und ein kalter Himmel, können sich beim direkten Mischen in Grau treffen. Setze eine Farbe dazwischen, die in der Szene dazwischen liegt, wie das blasse Leuchten oben, und der Verlauf bleibt sauber. Trübe Farbverläufe erklärt die Regel.

In Gradiently erledigt Bild abgleichen das in einem Schritt: Ziehe ein Bild hinein, und du bekommst die Palette und die ähnlichsten vorhandenen Marks, oder es macht neue Marks, die sich wie das Bild anfühlen. Mit jedem davon kannst du sofort gestalten.