# 60 Farbverlauf-Kombinationen, die funktionieren, mit Codes

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

Sechzig Farbverläufe, sortiert nach dem Gefühl, das du willst, nicht nach Farbton. Jeder ist ein lebendiger CSS-Code zum Kopieren, und jede Gruppe erklärt die Regel, die ihre Mischungen funktionieren lässt.

## The short version

- Die besten Farbverlauf-Kombinationen nutzen entweder benachbarte Farbtöne, die sauber ineinander übergehen, oder überbrücken weit entfernte Farbtöne mit einer bewusst gewählten Mittelfarbe.
- Ruhige Verläufe halten Helligkeit und Farbton nah beieinander, kräftige Verläufe treiben Sättigung und Farbtonabstand hoch.
- Dunkle Verläufe wirken am besten als fast schwarzer Grund mit einer leuchtenden Farbe, Pastellverläufe als helle Nachbarn mit dunkler Schrift für Text.
- Wer einen Verlauf zuerst nach Stimmung und dann nach Farbton wählt, bekommt stimmigere Ergebnisse, als wenn er Farben einzeln nach Geschmack aussucht.
- Jede Kombination hier lässt sich mit einer dritten Farbe, einem anderen Winkel oder einer Schicht Körnung unverwechselbarer machen.

Die besten **Farbverlauf-Kombinationen** folgen einer von zwei Regeln: Sie nutzen Farbtöne, die auf dem Farbkreis nebeneinanderliegen, sodass die Mischung sauber bleibt, oder sie überbrücken entfernte Farbtöne mit einer gewählten Mittelfarbe, sodass nichts ins Graue kippt. Unten findest du 60 Kombinationen nach diesen Regeln, nach Stimmung gruppiert: ruhig, kräftig, warm, kühl, dunkel und pastell. Kopiere jedes Muster als CSS und lies die Anmerkung unter der Gruppe, um zu verstehen, warum sie funktionieren, damit du eigene bauen kannst.

Alles hier ist einfaches CSS mit Hex-Farben. Es läuft in jedem Browser, und dieselben Codes lassen sich in jedes Design-Tool eintippen. Falls dir ein Begriff neu ist, erklärt [Was ist ein Farbverlauf](https://gradiently.design/de/guide/what-is-a-gradient) Farbstopps und Winkel.

## Ruhige Farbverlauf-Kombinationen

Ruhige Verläufe halten ihre Farben in Farbton und Helligkeit nah beieinander. Nichts springt, das Auge ruht. Sie eignen sich als Hintergrund zum Lesen, für Wellness-Marken, Portfolios und alles, was leise wirken soll. Salbei und Stein zum Beispiel bewegt sich nur ein kleines Stück um den Kreis und verliert unterwegs etwas Helligkeit. Das liest sich wie Schatten an einer Wand und nicht wie ein Farbeffekt.

- Meerglas: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Morgennebel: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salbei und Stein: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Lavendeldämmerung: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Stilles Wasser: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Sandbank: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eukalyptus: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Schieferblau: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Hafermilch: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Mondstein: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Ruhig: eine Farbfamilie, kleine Helligkeitsschritte. Sie tragen dunkle Schrift mühelos.

## Kräftige Farbverlauf-Kombinationen

Kräftige Verläufe nutzen gesättigte Farben und mehr Abstand auf dem Kreis. Sie ziehen die Aufmerksamkeit in einem vollen Feed, auf einem Sale-Banner oder einer Launch-Seite auf sich. Der Trick ist, Paare zu wählen, deren gerade Mischung hell bleibt. Magenta zu Bernstein läuft durch Koralle, Kobalt zu Koralle durch Violett. Keins kommt in die Nähe von Grau, deshalb wirken sie auf der ganzen Strecke leuchtend.

- Elektrisches Violett: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Heiße Zitrusfrucht: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Tropischer Punsch: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Signal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Ultramarin-Flare: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta zu Bernstein: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Dschungel: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Kobalt und Koralle: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Traubenlimo: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Limette und Petrol: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Kräftig: hohe Sättigung, Paare so gewählt, dass die Mitte hell bleibt. Nimm weiße Schrift auf dem dunkleren Ende.

## Warme Farbverlauf-Kombinationen

Warme Verläufe liegen zwischen Rot und Gelb und wirken sonnig, appetitlich und menschlich. Sie passen zu Essen, Gastronomie, Lifestyle und allem Persönlichen. Die meisten bekommen ein dunkleres, röteres Ende, damit die Mischung Gewicht hat: Goldene Stunde läuft von blassem Honig zu gebranntem Bernstein, so wie spätes Licht eine Wand hinabwandert. Zur Psychologie der Temperatur siehe [warme und kalte Farben](https://gradiently.design/de/guide/warm-and-cool-colors).

- Goldene Stunde: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terrakotta: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Pfirsichsorbet: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Glut: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Wüstenrose: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Honig: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Zimt: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Sonnenuntergangsstreifen: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Aprikose und Pflaume: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Ziegel und Gold: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Warm: Nachbarn aus Rot, Orange und Gelb, meist mit dunklerem Ende für Tiefe. Mehr dazu unter [Sonnenuntergangs-Farbverläufe](https://gradiently.design/de/guide/sunset-gradient).

## Kühle Farbverlauf-Kombinationen

Kühle Verläufe liegen zwischen Grün und Violett und wirken sauber, ruhig und präzise. Sie sind das natürliche Zuhause von Technik, Gesundheit, Finanzen und Wasser. Blau ist der Anker der meisten von ihnen, deshalb wirken sie vertrauenswürdig, und deshalb braucht ein kühler Verlauf ein eigenes Detail, etwa ein violettes Ende oder eine Verschiebung Richtung Petrol, damit er nicht aussieht wie jede Bank. Weitere Blautöne findest du in [blaue Farbverläufe](https://gradiently.design/de/guide/blue-gradient).

- Gletscher: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Tiefe Lagune: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nordisch: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Indigonacht: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Mint zu Himmel: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Immergrün-Blau: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Arktisches Petrol: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Blaue Stunde: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Eisviolett: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Meerestiefe: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Kühl: Nachbarn aus Grün, Petrol, Blau und Violett. Eine leichte Farbtonverschiebung lässt sie weniger nach Konzern wirken.

## Dunkle Farbverlauf-Kombinationen

Dunkle Verläufe sind fast schwarze Gründe, aus denen eine leuchtende Farbe aufsteigt. Sie wirken hochwertig, nächtlich und filmisch, und weiße Schrift steht darauf scharf. Halte das dunkle Ende leicht getönt statt reinschwarz, damit die Mischung etwas hat, durch das sie wandern kann. Dunkle Verläufe zeigen schnell Banding, also füge vor der Veröffentlichung Körnung hinzu, siehe [dunkle Farbverlauf-Hintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds).

- Mitternachtsviolett: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Tiefsee: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Waldboden: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Ochsenblut: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Graphit: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Tinte und Glut: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Petrol: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Aubergine: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Nachtturkis: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Dunkle Kirsche: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Dunkel: ein getöntes Fast-Schwarz, eine tiefe Mitte und eine leuchtende Farbe am äußersten Ende.

## Pastell-Farbverlauf-Kombinationen

Pastelltöne sind blasse, sehr helle Farben mit etwas Sättigung. Sie wirken frisch, weich und freundlich und passen zu Beauty, Baby, Papeterie und Frühlingskampagnen. Weil sie alle so hell sind, können selbst entfernte Pastelltöne in ein weißliches Grau verlaufen, deshalb führen die letzten beiden hier über ein helles Lila. Setze Text auf Pastell in dunkler Schrift statt in Weiß. Mehr findest du unter [Pastell-Farbverläufe](https://gradiently.design/de/guide/pastel-gradients).

- Zuckerwatte: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Pfirsich und Lila: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistazie: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Babyblau: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Zitrone und Rouge: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Minze und Sahne: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Puderviolett: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Meerschaum und Rose: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Morgenhimmel: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastell: helle Nachbarn oder entfernte Pastelltöne, die Lila überbrückt, damit die Mitte getönt bleibt.

## So nutzt du diese Farbverlauf-Codes

Jeder Code ist ein vollständiger CSS-Wert für `background`. Füge ihn in ein beliebiges Element ein oder übertrage die Hex-Farben und Stopp-Positionen in ein Design-Tool. Im Web setzt du zuerst eine einfarbige Ersatzfarbe, entnommen dem dunkelsten oder wichtigsten Stopp.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Mitternachtsviolett auf einer Karte, mit Ersatzfarbe und weißer Schrift.

## So baust du deine eigene Kombination

1. **Wähle zuerst die Stimmung** Entscheide dich vor jeder Farbe für ruhig oder kräftig, warm oder kühl, dunkel oder hell. Das grenzt die Auswahl auf eine der Gruppen oben ein.
2. **Wähle eine Ankerfarbe** Meist deine Markenfarbe oder die Farbe dessen, was du verkaufst. Siehe [Markenfarben wählen](https://gradiently.design/de/guide/how-to-choose-brand-colors).
3. **Füge einen Nachbarn hinzu** Gehe 30 bis 60 Grad auf dem Farbkreis weiter, für eine saubere zweite Farbe. Verändere auch die Helligkeit ein wenig, für Tiefe.
4. **Überbrücke alles Entfernte** Wenn du einen weit entfernten Farbton willst, setze eine leuchtende Mittelfarbe dazwischen, damit die Mischung nicht grau wird. Siehe [schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients).
5. **Mach ihn zu deinem** Ändere den Winkel, verschiebe einen Stopp von 50 %, füge eine dritte Farbe oder eine Schicht Körnung hinzu. Kleine Änderungen sorgen dafür, dass eine Kombination nicht wie eine Voreinstellung aussieht.

Ein beliebter Code ist ein guter Anfang, aber Tausende andere Designs beginnen ebenfalls dort. Wenn du eine Verlaufs-Identität willst, die sonst niemand hält, kannst du ein Bild, das du liebst, mit seiner Palette und den ähnlichsten Marks abgleichen oder neue Marks in diesem Stil machen.

## FAQ

### Welche Farben passen in einem Farbverlauf gut zusammen?

Farben, die auf dem Farbkreis nebeneinanderliegen, etwa Blau und Violett oder Orange und Pink, gehen immer sauber ineinander über. Entfernte Farben funktionieren, wenn eine leuchtende Mittelfarbe sie überbrückt.

### Welche Farbverlauf-Kombination ist am beliebtesten?

Violett zu Pink und Blau zu Cyan gehören zu den am häufigsten genutzten. Genau deshalb wirken sie selten unverwechselbar.

### Wie viele Farben sollte ein Farbverlauf haben?

Zwei sind am einfachsten, drei geben Tiefe und Kontrolle über die Mitte, und mehr als fünf lassen sich kaum sauber halten.

### Welche Textfarbe funktioniert auf einem Farbverlauf?

Weiß oder fast Weiß auf dunklen und kräftigen Verläufen, dunkle Schrift auf pastellfarbenen und ruhigen. Prüfe den Kontrast an der hellsten Stelle hinter dem Text.

### Kann ich diese Farbverlauf-Codes in Figma oder Canva nutzen?

Ja. Kopiere die Hex-Farben samt Stopp-Positionen in die Verlaufsfüllung des Tools und gleiche den Winkel an.