# Leuchtende Farbverläufe: satte Codes, die nicht flimmern

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

Satte Farbe ist der schnellste Weg, aufzufallen, und der schnellste Weg zu müden Augen. Diese Codes sind absichtlich hell und so gebaut, dass ihre Kanten nie flimmern, mit den Gründen dafür, damit du eigene machen kannst.

## The short version

- Ein leuchtender Farbverlauf nutzt stark gesättigte Farben, bleibt aber nur dann angenehm fürs Auge, wenn benachbarte Farben im Farbton nah beieinander liegen und sich klar in der Helligkeit unterscheiden.
- Farben mit gegensätzlichem Farbton und ähnlicher Helligkeit, die direkt aneinanderstoßen, scheinen zu flimmern, ein Effekt, den man oft chromatische Vibration nennt.
- Satte Gegenfarben, direkt in sRGB gemischt, laufen durch eine gräuliche Mitte, was eine Interpolation in oklch weitgehend vermeidet.
- Ein dunkler oder neutraler Grund gibt dem Auge einen Ruhepunkt und lässt leuchtende Farbe heller wirken als auf Weiß.
- Text über einem leuchtenden Farbverlauf liest sich am besten in fast Schwarz oder Weiß, nie in einer anderen satten Farbe ähnlicher Helligkeit.

Ein **leuchtender Farbverlauf** ist hell und satt, ohne zu flimmern, wenn zwei Regeln gelten: Jede Farbe liegt auf dem Farbkreis nah an ihrer Nachbarin, und jeder Schritt ändert die Helligkeit deutlich. Brichst du die erste, wird die Mitte matschig; brichst du die zweite, indem du Gegenfarben gleicher Helligkeit nebeneinander setzt, scheint die Kante zu flimmern. Die zwölf Codes unten folgen beiden Regeln, sie sind also laut wie ein Plakat, nicht wie eine Migräne.

## Zwölf Codes für leuchtende Farbverläufe

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Elektrisches Violett: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagune: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Limettenlimo: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Kirschpop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Gletscher: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Pink auf Nacht: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Glut: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Kobaltaufstieg: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Koralle zu Gold, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Jeder Verlauf wandert durch benachbarte Farbtöne und wird dabei heller oder dunkler, und das hält ihn sauber. Der letzte ist in oklch geschrieben und braucht einen aktuellen Browser.

## Warum manche hellen Farbverläufe flimmern

Setz ein sattes Rot direkt an ein sattes Blau ähnlicher Helligkeit, und die Grenze scheint zu flackern, als könnten sich die beiden Farben nicht einigen, welche vorne liegt. Designer nennen das chromatische Vibration. Sie ist am stärksten an harten Kanten, in feinen Linien und in farbigem Text, und deshalb ist rote Schrift auf blauem Grund so anstrengend zu lesen. Die Farben selbst sind in Ordnung; die Kombination aus gegensätzlichem Farbton und gleicher Helligkeit, die sich berühren, verursacht es.

- Flimmert: harte Kante, gleich hell: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Ruhig: eine dunkle Stufe dazwischen: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Dasselbe Rot und Blau. Links berühren sie sich bei gleicher Helligkeit und die Kante flimmert; rechts trennt eine tiefe Stufe sie, und beide Farben wirken stärker.

Es gibt zwei Lösungen. Entweder hältst du die Farben mit einer dunkleren oder helleren Stufe auseinander, wie rechts, oder du wählst Nachbarn statt Gegensätze. [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors) erklärt, wann sich Gegensätze trotzdem lohnen.

## Regeln für deinen eigenen leuchtenden Farbverlauf

| Regel | Warum | Beispiel |
| --- | --- | --- |
| Bleib in einem Drittel des Farbkreises | Nachbarn mischen sich, ohne durch Grau zu laufen | Indigo, Violett, Magenta |
| Stufe die Helligkeit | Gibt Tiefe und verhindert flimmernde Kanten | Tiefes `#1d4ed8` bis helles `#38bdf8` |
| Nutze eine Hauptfarbe | Drei gleich laute Farben kämpfen | Magenta ist der Höhepunkt, der Rest stützt |
| Füge einen Grund hinzu | Eine dunkle oder neutrale Fläche lässt das Auge ruhen | Pink auf Nacht, Glut |
| Mische in oklch | Hält die Mitte gesättigt statt stumpf | Koralle zu Gold, oklch |

Fünf Regeln hinter jedem Code oben. Brich eine bewusst, nie aus Versehen.

Matsch ist die andere Art, wie helle Farbverläufe scheitern. Mischst du zwei satte Gegenfarben in einfachem sRGB, fällt die Mittelfarbe Richtung Grau ab; das behandeln [matschige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) und technischer [Interpolation von Farbverläufen](https://gradiently.design/de/guide/gradient-interpolation). Sättigung selbst ist ein Regler, kein Schalter; [Sättigung im Design](https://gradiently.design/de/guide/color-saturation) zeigt, wie du sie einstellst.

## Leuchtende Farbverläufe in CSS

Moderne Browser können in einem wahrnehmungsbasierten Farbraum mischen, wenn du `in oklch` zum Verlauf hinzufügst. So bleibt die Mitte eines weiten Verlaufs so lebendig wie seine Enden. Gib älteren Browsern vorher eine Hex-Version.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

Der Verlauf Ultra mit einem Fallback aus drei Stopps und einer oklch Version mit zwei Stopps, die ohne Hilfsstopp durch die Mitte lebendig bleibt.

## Wo leuchtende Farbverläufe am besten wirken

Leuchtende Farbe verdient sich Aufmerksamkeit, also setz sie dort ein, wo Aufmerksamkeit die ganze Aufgabe ist: ein scrollender Feed, ein Thumbnail unter zwanzig anderen, ein Plakat auf der anderen Straßenseite. Weniger gut wirkt sie dort, wo Leute lange lesen müssen, etwa in Dokumenten, Dashboards und langen Artikeln, denn eine satte Fläche ermüdet das Auge nach wenigen Absätzen. Dort beschränkst du den leuchtenden Verlauf auf einen Header oder einen einzelnen Button und lässt eine ruhige Fläche den Rest tragen.

| Einsatz | Probier | Größe |
| --- | --- | --- |
| Sale- oder Launch-Post | Mango, Flamingo | 1080×1350 |
| YouTube Thumbnail | Elektrisches Violett, Glut | 1280×720 |
| Hero für App oder Produkt | Lagune, Gletscher | 1920×1080 |
| Story- oder Reel-Cover | Limettenlimo, Kirschpop | 1080×1920 |
| Playlist-Cover | Pink auf Nacht, Ultra | 1080×1080 |
| A4 Eventplakat | Ultra, Kobaltaufstieg | 2480×3508 |

Sechs Orte, an denen leuchtende Farbverläufe ihren Job machen, mit Codes aus dem Raster oben und der Größe, in der du gestaltest.

Beim Druck solltest du mit einem Schreck rechnen. Die hellsten Bildschirmfarben, vor allem elektrische Blautöne, knallige Pinks und Säuregrün, liegen außerhalb dessen, was CMYK Farben wiedergeben können, und kommen auf Papier deutlich stumpfer zurück. [RGB oder CMYK](https://gradiently.design/de/guide/rgb-vs-cmyk) erklärt warum; wähl selbst etwas tiefere Varianten und bestell vor einer Auflage einen Proof.

## Wörter auf einem leuchtenden Farbverlauf

Satte Hintergründe schwanken von einem Ende zum anderen stark in der Helligkeit, sodass eine einzige Textfarbe, die am dunklen Ende lesbar ist, am hellen verschwinden kann. Nimm nur Weiß oder fast Schwarz, setz die Überschrift dorthin, wo der Verlauf am tiefsten oder hellsten ist, und prüfe den Kontrast an der schlechtesten Stelle, nicht im Durchschnitt. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) hat die Zielwerte.

Ein hochformatiger Sale-Post mit fetter Schrift über einem hellen, gesättigten Hintergrund

Ein lauter Hintergrund mit schlichter, kräftiger Schrift. Die Farbe verkauft, die Wörter müssen nur lesbar sein.

Hier hilft ein Gradiently Mark bei heller Farbe: Er weiß, wo die Wörter stehen, vertieft oder hebt die Farbe nahe den Buchstaben, und die **Automatische Farbe** wählt pro Zeile helle oder dunkle Schrift aus seiner eigenen Palette. Ein satter Look bleibt in jeder Größe lesbar, ohne Kasten oder Schatten hinter der Überschrift. Für Neon-Looks im Besonderen siehe [Neon-Farbverläufe](https://gradiently.design/de/guide/neon-gradients); für das andere Ende des Reglers [dezente Farbverläufe](https://gradiently.design/de/guide/subtle-gradients).

## FAQ

### Was lässt einen Farbverlauf leuchtend wirken?

Stark gesättigte Farben, die auf dem Farbkreis nah beieinander liegen, mit einer klaren Helligkeitsänderung von einem Ende zum anderen.

### Warum tun manche hellen Farbkombinationen beim Hinsehen weh?

Gegenfarben ähnlicher Helligkeit, die direkt aneinanderstoßen, scheinen zu flimmern. Trenn sie mit einer dunkleren oder helleren Stufe oder wähle benachbarte Farben.

### Wie verhindere ich, dass ein heller Farbverlauf in der Mitte grau wird?

Nutze benachbarte Farbtöne, füge einen Mittelstopp hinzu oder mische in oklch mit `linear-gradient(in oklch, ...)` in Browsern, die das unterstützen.

### Welche Textfarbe funktioniert auf einem leuchtenden Farbverlauf?

Weiß oder fast Schwarz. Prüfe den Kontrast an der hellsten und dunkelsten Stelle hinter den Wörtern, nicht nur in der Mitte.

### Was ist ein guter leuchtender Farbverlauf für einen Website-Hero?

Probier `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` mit weißer Schrift.