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

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

Eine Pipette liefert dir einen Pixel. Eine Palette braucht die Farben, an die du dich beim Bild erinnerst, im richtigen Verhältnis. So kommst du von einem zum anderen.

## The short version

- Eine gute Farbpalette aus einem Bild hat drei Arten von Farbe: dominante Farben aus den größten Flächen, unterstützende Farben und ein oder zwei kleine, lebhafte Akzente.
- Einzelne Pipettenwerte wirken oft matschig, weil Fotos voller Schatten, Rauschen und Kompression sind, also nimm mehrere Bereiche auf und mittle sie.
- Farben, an die du dich beim Foto erinnerst, sind meist sauberer und gesättigter als die Pixel, daher lässt eine leicht angehobene Buntheit eine Palette echt wirken.
- Automatische Extraktoren finden dominante Farben gut, übersehen aber oft kleine Akzente, die du von Hand ergänzen solltest.
- Um eine Fotopalette in einen Farbverlauf zu verwandeln, behalte die Farben in der Reihenfolge, in der sie in der Szene vorkommen, etwa Himmel über Wasser über Ufer.

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

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

- Hafenwasser: #1d2a44
- Schieferhimmel: #3e5c86
- Dunst: #8a9bb5
- Terrakotta-Dächer: #b8674e
- Natriumlicht: #f2a65a
- Letztes Leuchten: #f6dcc0

Eine Palette aus einem Hafen in der Dämmerung. Zwei dominante Blautöne, ein blasser Dunst, ein unterstützendes Terrakotta und zwei warme Akzente, die klein bleiben sollten.

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](https://gradiently.design/de/guide/60-30-10-rule) eignet sich gut, um sie festzuhalten.

## So liest du Farben von Hand aus einem Foto aus

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. **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. **Sammle mehr, als du brauchst** Nimm acht bis zwölf Proben aus verschiedenen Bereichen des Bildes, auch aus den kleinsten hellen Details.
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. **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. **Kontrast prüfen** Achte darauf, dass mindestens eine helle und eine dunkle Farbe der Palette für Text gut voneinander abheben. Siehe [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility).

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

### Matschige Werte

- Ein Klick auf einen einzelnen Pixel
- Proben aus Schatten und Kanten zwischen Objekten
- Aufnahme aus einem kleinen, komprimierten Bild
- Jede Farbe genau so behalten, wie sie aufgenommen wurde

### Saubere Werte

- Eine gemittelte Probe aus einer unscharfen Kopie
- Proben aus der Mitte heller, gleichmäßiger Flächen
- Die größte, am wenigsten komprimierte Version nutzen, die du hast
- Jede Farbe zu dem hin anpassen, woran du dich erinnerst

- Einzelpixel-Werte: graues Oliv: `linear-gradient(90deg, #6b6a5e 0%, #7d7866 100%)`
- Gemittelte, korrigierte Werte: `linear-gradient(90deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 65%, #f2a65a 100%)`

Zwei Verläufe aus demselben Hafenfoto. Rohe Pixelwerte von der Kante zwischen Himmel und Dächern driften ins Graue; saubere Werte, über Dunst und Leuchten verbunden, behalten ihr Blau und Orange.

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

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

Ein minimaler Extraktor im Browser. Das Bild muss auf derselben Website liegen oder Cross-Origin-Nutzung erlauben, sonst weigert sich das Canvas, es zu lesen.

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

- Hafen in der Dämmerung: `linear-gradient(180deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 50%, #b8674e 62%, #1d2a44 100%)`
- Zitronenhain: `linear-gradient(180deg, #fdf3c4 0%, #f4d03f 35%, #6f8f3a 70%, #2f4a2a 100%)`
- Wüstenmorgen: `linear-gradient(180deg, #f7d9c4 0%, #e8a87c 40%, #c1666b 75%, #4a2c3a 100%)`
- Gletschersee: `linear-gradient(180deg, #d8ecef 0%, #7fb7be 40%, #2e6f7e 75%, #13303a 100%)`

Vier Farbverläufe aus Fotopaletten, jeder mit seinen Farben in Szenenreihenfolge von oben nach unten.

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](https://gradiently.design/de/guide/muddy-gradients) erklärt die Regel.

In Gradiently erledigt [Bild abgleichen](/forge/match) 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.

## FAQ

### Wie bekomme ich eine Farbpalette aus einem Bild?

Weichzeichne das Bild, nimm die größten Farbflächen plus ein oder zwei kleine lebhafte Akzente auf, mittle jede Probe über mehrere Pixel und passe die Farben zu dem hin an, woran du dich erinnerst.

### Wie viele Farben sollte eine Palette aus einem Foto haben?

Fünf bis sieben fangen ein Foto meist ein: zwei oder drei dominante Farben, zwei unterstützende Farben und ein oder zwei Akzente.

### Warum sehen die Farben, die ich aus einem Foto aufnehme, matt aus?

Einzelne Pixel stammen oft aus Schatten, Kanten oder Kompressionsartefakten. Nimm gemittelte Flächen aus hellen, gleichmäßigen Bildteilen auf und hebe die Buntheit leicht an, wenn eine Farbe noch grau wirkt.

### Warum übersieht mein Palettengenerator die hellste Farbe?

Generatoren ordnen Farben danach, wie viel vom Bild sie abdecken, daher schaffen kleine Akzente es selten auf die Liste. Ergänze sie von Hand.