Leuchtende Farbverläufe: satte Codes, die nicht flimmern

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

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.

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 erklärt, wann sich Gegensätze trotzdem lohnen.

Regeln für deinen eigenen leuchtenden Farbverlauf

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 und technischer Interpolation von Farbverläufen. Sättigung selbst ist ein Regler, kein Schalter; Sättigung im Design 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.

.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 */
}

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.

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 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 hat die Zielwerte.

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; für das andere Ende des Reglers dezente Farbverläufe.