Warum manche Farbverläufe in der Mitte grau werden und was hilft

Ein matschiger Farbverlauf ist ein Übergang, der in der Mitte grau, braun oder stumpf wird, obwohl beide Farben leuchten. Das passiert, weil die meisten Tools Farben im sRGB-Farbraum mischen und dabei Rot-, Grün- und Blauwerte in geraden Linien verbinden. Liegen die zwei Farben auf entgegengesetzten Seiten des Farbkreises, treffen sich diese geraden Linien nahe Grau. Die Lösung ist, den Weg des Übergangs selbst zu wählen: eine Farbe in die Mitte setzen, in OKLCH mischen oder Farbtöne nutzen, die näher beieinanderliegen.

Warum Gegenfarben grau werden

Schau auf die Zahlen. Reines Blau ist Rot 0, Grün 0, Blau 255. Reines Gelb ist Rot 255, Grün 255, Blau 0. Auf halbem Weg landet jeder Kanal bei etwa 128, also #808080: ein mittleres Grau. Dasselbe passiert bei Rot und Cyan, Orange und Azur oder jedem anderen Komplementärpaar. Mathematisch läuft die gerade Linie zwischen ihnen mitten durch die Grauachse.

Ein zweites, feineres Problem ist die dunkle Senke. Blau zu Rot läuft in sRGB durch #800080, ein Lila, das dunkler ist als beide Enden, und so sieht die Mitte des Übergangs aus wie ein blauer Fleck. Die Farben sind keine Gegenfarben, aber der Übergang verliert trotzdem an Helligkeit, wo sie sich treffen.

Lösung 1: einen Mittelstopp setzen

Die einfachste Lösung funktioniert in jedem Tool und jedem Format: Wähl die Farbe, die du in der Mitte willst, und setz sie selbst dorthin. Nimm eine helle, satte Farbe, die auf dem Farbkreis zwischen den beiden Enden liegt. Zwischen Blau und Gelb ist das Petrol oder Grün. Zwischen Orange und Blau nimmt ein Pink den warmen Weg, den die meisten Sonnenuntergangsverläufe gehen.

Lösung 2: in OKLCH mischen

OKLCH beschreibt Farbe als Helligkeit, Chroma (Intensität) und Farbton und wurde so entworfen, dass gleiche Schritte für Menschen wie gleiche Veränderungen aussehen. Mischen in OKLCH hält das Chroma hoch und dreht sich um den Farbkreis, statt ihn geradewegs zu durchqueren, sodass der Übergang nie ins Grau zusammenfällt. In CSS forderst du das mit einem Ausdruck an. Du kannst auch wählen, in welche Richtung es um den Kreis geht.

/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }

Auch OKLab solltest du kennen. Es ist der Standard der modernen CSS-Farbsyntax und ergibt weiche, gleichmäßige Übergänge, doch weil es weiter in einer geraden Linie läuft, verlieren echte Gegenfarben in der Mitte an Intensität. Nutze OKLab für Farben, die schon nah beieinanderliegen, und OKLCH oder einen Mittelstopp für weit entfernte Farben. Die vollständige Syntax findest du unter OKLCH-Verläufe in CSS, oder erkunde den Farbraum auf oklch.com.

Lösung 3: nähere Farbtöne wählen

Der verlässlichste Weg, Matsch zu vermeiden, ist, ihn gar nicht erst herauszufordern. Farben, die auf dem Kreis nebeneinanderliegen, wie Blau und Violett oder Orange und Pink, mischen sich in jedem Farbraum sauber, weil ihre gerade Linie nie in die Nähe von Grau kommt. Deshalb ergeben analoge Farben die sichersten Verläufe, und deshalb brauchen Komplementärpaare Sorgfalt; siehe Komplementärfarben.

Lösung 4: auf die Helligkeit achten

Matsch ist nicht nur Grau. Ein Übergang kann auch stumpf wirken, wenn seine Helligkeit in der Mitte absackt oder wenn ein Ende viel dunkler ist als das andere und der Wechsel in einem schmalen Band passiert. Halte die Helligkeit deiner Stopps ungefähr gleich oder ändere sie gleichmäßig in eine Richtung, und gib dem Übergang Raum. Eine Stopp-Position von 40 % oder 60 % wirkt oft natürlicher als mechanische 50 %.

In Mesh-Verläufen, wo mehrere Farben zugleich aufeinandertreffen, wird Matsch noch schlimmer. Für jede Überlagerung gelten dieselben Regeln: Halte Nachbarn nah beieinander und setz eine Brücke zwischen Gegenfarben.

Wenn du lieber mit einem Übergang startest, der schon ausgewogen ist, durchsuch den Markt nach Farbworten wie „Blau und Gelb“ oder „tiefes Petrol“ und gestalte mit jedem Mark, den du findest.