# Farbpaletten-Generatoren: so bekommst du Paletten, die funktionieren

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

Generatoren erzeugen brillant fünf hübsche Farbfelder und sagen dir kaum, was du damit anfangen sollst. Der nützliche Teil passiert, nachdem du den Knopf gedrückt hast.

## The short version

- Ein Farbpaletten-Generator erzeugt eine Farbgruppe aus einer Regel, einem Zufallswert, einem Foto oder einem Textprompt, entscheidet aber nicht, welche Farbe welche Aufgabe hat.
- Die meisten generierten Paletten geben jeder Farbe gleiches Gewicht und ähnliche Sättigung, was als Farbfelder gut aussieht und in einem echten Design laut wirkt.
- Eine brauchbare Palette braucht einen hellen oder dunklen Grund, eine Schriftfarbe für Text, ein oder zwei Hauptfarben und einen kleinen Akzent.
- Prüfe, dass die Palette eine große Helligkeitsspanne abdeckt, denn Farben ähnlicher Helligkeit verschwimmen und fallen bei Kontrastprüfungen durch.
- Teste eine generierte Palette immer auf einem echten Layout mit echten Worten, bevor du dich festlegst.

Ein **Farbpaletten-Generator** ist ein Tool, das eine Gruppe von Farben vorschlägt, die gut zusammen aussehen, auf Basis von Farbtheorie, Zufall, einem Foto oder einem geschriebenen Prompt. Nutze einen, wenn du feststeckst, und bearbeite dann das Ergebnis: Ergänze einen neutralen Grund und eine Textfarbe, gib jeder Farbe eine Aufgabe und teste sie an einem echten Design. Die fünf Farbfelder des Generators sind ein Startpunkt. Die Palette, die funktioniert, ist die, die du daraus formst.

## Die wichtigsten Arten von Palettengeneratoren

Jeder Generator macht im Kern eines von vier Dingen. Wenn du weißt, welche Art du nutzt, weißt du, was sie gut kann und was du korrigieren musst.

| Art | So funktioniert er | Gut für | Achte auf |
| --- | --- | --- | --- |
| Harmoniekreis | Wählt Farben in festen Winkeln zu einem Basisfarbton: komplementär, analog, triadisch | Lernen und um eine vorhandene Farbe herum bauen | Fünf Farben gleicher Sättigung, was künstlich wirkt |
| Zufall mit Sperren | Mischt Farben; du sperrst die, die dir gefallen, und mischst neu | Entdecken und Gewohnheiten durchbrechen | Hübsche Kombinationen ohne Struktur dahinter |
| Aus einem Bild | Entnimmt die dominanten Farben eines Fotos | Ein Produkt, einen Ort oder ein Kampagnenfoto treffen | Trübe Mitteltöne und Farben, die für Text unbrauchbar sind |
| Aus einem Prompt | Ein KI-Modell schlägt Farben zu Worten wie ruhige Bäckerei vor | Schnelle Ideen für eine Stimmung oder ein Markenbriefing | Beliebte Klischees und Codes, deren Kontrast niemand geprüft hat |

Adobe Color ist ein bekannter Harmoniekreis; Coolors ist ein bekannter Zufallsgenerator mit Sperren. Die meisten Tools mischen mehrere Ansätze.

Wenn du die Regeln hinter Harmoniekreisen verstehen willst, lies [Farbharmonie](https://gradiently.design/de/guide/color-harmony). Für den Fotoweg erklärt [Farbpalette aus einem Bild](https://gradiently.design/de/guide/color-palette-from-image), wie du bessere Proben wählst, und [KI-Farbpaletten-Generatoren](https://gradiently.design/de/guide/ai-color-palette-generator) behandelt das Prompten.

## Warum generierte Paletten in echten Designs oft scheitern

Ein Generator zeigt Farben als fünf gleiche Streifen. Echte Designs sehen ganz anders aus: Eine Farbe bedeckt den größten Teil der Fläche, eine trägt die Worte, und der Rest erscheint in kleinen Mengen. Hier ein typisches Zufallsergebnis neben derselben Idee nach der Bearbeitung.

- Rot: #e63946
- Gelb: #f1c40f
- Grün: #2ecc71
- Blau: #3498db
- Lila: #9b59b6

So wie generiert: fünf gesättigte Farbtöne ähnlicher Stärke. Nichts, worauf man Text lesen kann, nichts Ruhiges und nichts, das führt.

- Grund #f7f3ec: #f7f3ec
- Schrift #1c2321: #1c2321
- Haupt-Petrol #2a6f68: #2a6f68
- Stütz-Salbei #a8c5b8: #a8c5b8
- Akzent-Koralle #e07a5f: #e07a5f

Nach der Bearbeitung: ein warmer gebrochen weißer Grund, eine fast schwarze Schrift (14,5:1 auf dem Grund), ein Petrol, das die Grundfarbe als Text mit 5,3:1 trägt, eine ruhige Stützfarbe und ein Akzent.

## Fünf Schritte, die jede generierte Palette brauchbar machen

1. **Behalte die eine Farbe, die dir wirklich gefällt** Sperre sie und behandle sie als Hauptfarbe. Alles andere existiert, um sie zu stützen. Sticht nichts heraus, generiere neu, statt dich zufriedenzugeben.
2. **Ergänze Grund und Schrift** Generatoren liefern sie selten mit. Wähle einen hellen Grund (ein warmes oder kühles gebrochenes Weiß) oder einen dunklen und eine Schriftfarbe, die stark dazu kontrastiert. Töne beide leicht in Richtung deiner Hauptfarbe, damit sie dazugehören.
3. **Spreize die Helligkeit** Stell dir die Farbfelder in Graustufen vor oder schalte sie am Bildschirm um. Du willst helle, mittlere und dunkle Werte, nicht fünfmal Mitte. Passe die Helligkeit an, bis jede Farbe klar getrennt ist.
4. **Senke die Sättigung aller außer einer** Lass den Akzent kräftig und beruhige die anderen. Eine Stützfarbe, die weicher ist als die Hauptfarbe, lässt die Hauptfarbe satter wirken.
5. **Verteile die Proportionen** Eine gute Startaufteilung ist die [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule): Grund etwa 60 %, Hauptfarbe etwa 30 %, Akzent etwa 10 %. Justiere nach Augenmaß, sobald du sie im Layout siehst.

Für präzise Anpassungen arbeite in einem Farbformat, das Helligkeit vom Farbton trennt. [HSL](https://gradiently.design/de/guide/hsl-colors) ist leicht zu lesen; [OKLCH](https://gradiently.design/de/guide/oklch-explained) hält die Helligkeit über verschiedene Farbtöne hinweg ehrlicher.

## Teste die Palette auf einem echten Layout

Farbfelder verbergen Probleme, die auftauchen, sobald Worte dazukommen. Leg deine Palette auf etwas, das du wirklich machen würdest, etwa einen Post, eine Speisekarte oder einen Hero-Bereich, und betrachte es in der Größe, in der Menschen es sehen. Prüfe dann jede Textkombination mit einem [Kontrastprüfer](https://gradiently.design/de/guide/color-contrast-accessibility).

Ein Instagram-Post im Hochformat, der eine neue Speisekarte ankündigt, in einer ruhigen Farbfamilie mit klarer, lesbarer Schrift

Eine Palette verdient ihren Platz in einem echten Format mit echten Worten. Wenn die Überschrift hier kämpft, ändere die Palette, nicht die Überschrift.

Ein Verlauf ist ein schneller Zusatztest. Mische Grund, Haupt- und Stützfarbe ineinander: Wird die Mischung in der Mitte grau, kämpfen zwei der Farben miteinander, was in [trüben Verläufen](https://gradiently.design/de/guide/muddy-gradients) erklärt wird.

Die bearbeitete Palette als Verlauf: `linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)`

Vom Grund über Salbei und Petrol zur Schrift, ohne grauen Fleck unterwegs. Die Koralle bleibt draußen, aufgehoben für kleine Akzente.

## Speichere sie als Tokens, nicht als Screenshot

Sobald die Palette funktioniert, benenne Farben nach ihrer Aufgabe statt nach ihrem Farbton, damit du das Petrol später ändern kannst, ohne alles umzubenennen. Im Code heißt das CSS-Variablen; in Designtools benannte Stile; in Gradiently das Markenkit, in dem Paletten, Schriften und Tonalität zusammenleben und der Designer sie auf alles anwendet, was er erstellt.

```css
:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}
```

Rollennamen überleben ein Rebranding. Eine Variable namens --teal nicht.

## Nach Farbe suchen statt generieren

Manchmal willst du eigentlich keine fünf Codes, sondern einen fertigen Hintergrund in einer Farbfamilie. Im Markt von Gradiently suchst du Marks mit Farbwörtern wie „tiefes Petrol“ oder „warmer Pfirsich“ und filterst nach Look. Jeder Mark ist ein lebendiger Hintergrund aus Verlauf und Material mit eigener Palette und eigener Schrift, geprüft gegen alle anderen, damit keine zwei gleich aussehen, und du kannst mit jedem noch nicht gesicherten Mark kostenlos gestalten. Es ist ein anderer Weg zum selben Ziel: Farben, die zusammengehören und ihre Aufgaben schon erfüllen.

## FAQ

### Welcher Farbpaletten-Generator ist der beste?

Das hängt davon ab, wie du arbeitest: Harmoniekreise eignen sich, um um eine Farbe herum zu bauen, Zufallsgeneratoren mit Sperren zum Entdecken und Bildsampler, um ein Foto zu treffen. Alle brauchen danach Bearbeitung.

### Wie viele Farben sollte eine Palette haben?

Die meisten Marken kommen gut mit einem Grund, einer Schriftfarbe, ein oder zwei Hauptfarben und einem Akzent aus, also vier oder fünf insgesamt. Mehr ist schwer konsistent zu halten.

### Warum sieht meine generierte Palette in meinem Design schlecht aus?

Meist haben die Farben ähnliche Helligkeit und Sättigung und keine klaren Rollen. Ergänze einen neutralen Grund und eine Textfarbe, spreize die Helligkeit und behalte nur einen kräftigen Akzent.

### Wie prüfe ich eine Palette auf Barrierefreiheit?

Teste jede Kombination aus Text und Hintergrund mit einem Kontrastprüfer, mit mindestens 4,5:1 für Fließtext als Ziel, und betrachte die Palette in Graustufen, um sicherzugehen, dass die Farben unterscheidbar sind.