# So baust du eine Verlaufspalette für eine Marke

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

Ein guter Verlauf ist leicht. Sechs, die klar zusammengehören, jede Aufgabe einer Marke abdecken und nebeneinander stimmig wirken, sind ein System. So baust du es.

## The short version

- Eine Verlaufspalette ist eine kleine, benannte Familie von Verläufen aus einer Grundpalette und ein paar gemeinsamen Regeln.
- Die meisten Marken brauchen vier bis sechs Verläufe: einen Hero, eine tiefe Version, eine ruhige helle Version, ein radiales Leuchten, einen Akzent und einen ruhigen für Text.
- Verläufe wirken wie eine Familie, wenn sie Grundfarbe, Richtung, einheitliche Stopp-Positionen und dieselben Helligkeitsschritte teilen.
- Verläufe als benannte CSS Custom Properties zu speichern hält sie über Website, App und Designdateien hinweg identisch.
- Eine Verlaufspalette sollte an echten Formaten mit echten Worten getestet werden, bevor sie in die Markenrichtlinien wandert.

Eine **Verlaufspalette** ist eine kleine, benannte Familie von Verläufen, gebaut aus einer Farbpalette und einer Handvoll gemeinsamer Regeln, damit jeder Verlauf einer Marke verwandt aussieht. Fang mit fünf oder sechs Grundfarben an, gib jedem Verlauf eine Aufgabe (Hero, tief, ruhig, Leuchten, Akzent, Text) und leg dann fest, was sie zu Geschwistern macht: dieselbe Grundfarbe, derselbe Winkel, passende Stopp-Positionen und gleichmäßige Helligkeitsschritte. Schreib sie als Tokens auf und teste sie an echten Designs, bevor andere sie nutzen.

## Warum eine Marke mehr als einen Verlauf braucht

Ein einzelner Verlauf wird über Aufgaben gedehnt, die er nicht kann. Der helle Hero-Übergang, der auf einem Launch-Post großartig aussieht, ist hinter einem Absatz zu laut, für einen hellen Website-Bereich zu dunkel und für eine Folie voller Zahlen zu unruhig. Teams improvisieren dann, jemand nimmt ein ähnliches Blau, und nach einem Jahr hat die Marke fünfzehn Verläufe, die fast passen. Eine Palette verhindert das, indem sie die Varianten vorab festlegt.

### Ein Haufen Verläufe

- Jeder einzeln gemacht, für ein Design
- Andere Winkel auf jeder Seite
- Farben, die fast zur Marke passen
- Kein Name, also kann niemand danach fragen
- Per Auge aus alten Dateien kopiert

### Eine Verlaufspalette

- Aus einer Grundpalette gebaut
- Eine Richtung, überall genutzt
- Exakte Hex-Codes und Stopp-Positionen
- Nach Aufgabe benannt: Hero, tief, ruhig
- Als Tokens in Code und Dateien gespeichert

## Mit einer Grundpalette anfangen

Jeder Verlauf der Familie sollte nur aus diesen Farben bestehen oder aus ihren Aufhellungen und Abdunklungen. Wenn deine Markenfarben noch nicht feststehen, kläre das zuerst mit [Markenfarben wählen](https://gradiently.design/de/guide/how-to-choose-brand-colors). Eine nützliche Basis hat einen dunklen Grund, zwei oder drei Stufen des Haupttons, ein fast Weiß und einen Akzent von woanders auf dem Farbkreis.

- Tinte: #14112b
- Nachtpflaume: #2e1065
- Pflaume: #4c1d95
- Violett: #7c3aed
- Orchidee: #c084fc
- Muschel: #faf5ff
- Glut: #f97316

Eine durchgespielte Basis: ein dunkler Grund, vier Violettstufen, ein fast Weiß und ein einzelner warmer Akzent. Jeder Verlauf unten ist aus diesen sieben Codes gebaut.

## Jedem Verlauf eine Aufgabe geben

Benenne Verläufe nach dem, was sie tun, nicht danach, wie sie aussehen. „Hero“ übersteht eine Farbauffrischung; „Lila Sonnenuntergang“ nicht. Sechs Rollen decken fast jede Marke ab.

| Rolle | Wofür sie da ist | Wie sie sich unterscheidet |
| --- | --- | --- |
| Hero | Launches, Cover, der Moment, an den man sich erinnert | Volle Bandbreite, dunkel bis hell |
| Tief | Dunkle Bereiche, Folien, Abendkampagnen | Nur die dunkelsten zwei oder drei Farben |
| Ruhig | Helle Seiten, Dokumente, langes Lesen | Muschel und die blasseste Tönung, kaum Bewegung |
| Leuchten | Produktbilder und einzelne Worte | Radial, Licht in einer Ecke |
| Akzent | Buttons, Badges, ein Highlight pro Design | Hauptton in die Akzentfarbe |
| Text | Hinter Absätzen und Bildunterschriften | Wenig Kontrast in sich, viel gegenüber Schrift |

Sechs Rollen für die Verlaufspalette einer Marke. Kleine Marken können mit Hero, tief und ruhig anfangen.

- Hero: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Tief: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Ruhig: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Leuchten: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Akzent: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Text: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

Die Familie, gebaut aus der Basis oben. Derselbe Grund, derselbe Winkel von 135 Grad, dieselben Farben: Sie könnten auf einer Seite nebeneinanderstehen, ohne sich zu streiten.

## Die Regeln, die Verläufe zur Familie machen

- **Ein Grund.** Jeder dunkle Verlauf endet in derselben Tinte, jeder helle in derselben Muschel. Am Grund gruppiert das Auge sie.
- **Eine Richtung.** Wähl einen Winkel, 135 oder 160 Grad, und bleib dabei. Gemischte Winkel lassen eine Seite zufällig wirken. [Winkel von Farbverläufen](https://gradiently.design/de/guide/gradient-angle) erklärt die Wahl.
- **Passende Stopps.** Nutz dieselben Positionen wieder (zum Beispiel 0, 45, 75, 100 Prozent), damit die Übergänge denselben Rhythmus haben. [Farbstopps in Verläufen](https://gradiently.design/de/guide/gradient-stops) behandelt die Abstände.
- **Gleichmäßige Helligkeitsschritte.** Jede Farbe in einem Übergang sollte eine klare Stufe heller oder dunkler sein als ihre Nachbarin. Ungleiche Schritte erzeugen einen hellen Streifen in der Mitte.
- **Ein Akzent, rationiert.** Die Akzentfarbe taucht nur in einem Verlauf auf. Über alle verteilt, ist sie kein Akzent mehr.
- **Eine feste Interpolation im Code.** Mischt deine Website in oklch, sollten es alle Verläufe tun, sonst sehen dieselben Codes in verschiedenen Bereichen unterschiedlich aus.

## Die Verlaufspalette in Tokens verwandeln

Eine Palette, die nur in einem PDF lebt, wird abgetippt und driftet. Speichere jeden Verlauf einmal als benannte Custom Property und verweise überall darauf. Designer können dieselben Werte in ihre Dateien einfügen, und eine spätere Auffrischung ändert eine Zeile pro Verlauf. [Design Tokens](https://gradiently.design/de/guide/design-tokens) behandelt die Praxis im Größeren.

```css
:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }
```

Die ganze Familie als CSS Custom Properties. Farben werden einmal definiert, und jeder Verlauf wird daraus gebaut.

## An echten Formaten testen

Farbmuster lügen. Ein Verlauf, der als kleines Quadrat ausgewogen wirkt, kann sein hellstes Band genau hinter eine Überschrift legen, sobald er eine Story in 1080×1920 füllt. Bevor du die Palette veröffentlichst, mach drei echte Designs mit echten Worten: einen Hochformat-Post, eine Story und einen Website-Hero. Prüf, dass der Text-Verlauf Absätze lesbar hält, mit den Kontrastprüfungen aus [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility), und dass Hero und Tief nebeneinander verwandt aussehen.

Ein Launch-Post im Hochformat auf einem satten Verlaufshintergrund mit voller Bandbreite

Die Hero-Rolle auf einem Hochformat-Post in 1080×1350.

Eine vertikale Story mit derselben Überschrift auf einem verwandten Verlaufshintergrund derselben Familie

Dieselbe Familie auf einer Story in 1080×1920. Prüf, dass das hellste Band auch im höheren Format an der Überschrift vorbeigeht.

Mit Gradiently Pro hält das Markenkit deine Farbpaletten neben Logo und Schriften, und der Designer wendet sie an, wenn er neue Designs anlegt. Wenn dein Hero-Verlauf das sein soll, woran man dich erkennt, erklärt [Markenverläufe](https://gradiently.design/de/guide/brand-gradient-system), wie aus einem Verlauf ein Markenzeichen wird.

## FAQ

### Was ist eine Verlaufspalette?

Ein kleines, benanntes Set von Verläufen aus einer Farbpalette mit gemeinsamen Regeln, damit sie überall wie eine Familie aussehen.

### Wie viele Verläufe sollte eine Marke haben?

Vier bis sechs decken die meisten Bedürfnisse: ein Hero, eine tiefe und eine ruhige Version, ein radiales Leuchten, ein Akzent und einer, der ruhig genug für Text ist. Kleine Marken können mit drei anfangen.

### Wie sehen Verläufe aus, als gehörten sie zusammen?

Nutz über alle Verläufe hinweg dieselbe Grundfarbe, denselben Winkel, dieselben Stopp-Positionen und gleichmäßige Helligkeitsschritte.

### Wie speichere ich Markenverläufe für eine Website?

Definier die Farben und jeden Verlauf einmal als CSS Custom Properties und verweise dann in jeder Komponente auf diese Namen.