UI-Design

So baust du Verläufe, die nicht matschig wirken

Vom colorPaletteFinder-Team••6 Min. Lesezeit

Verläufe wechselten so oft von kitschig zu geschmackvoll und zurück, dass Designer ängstlich vor ihnen wurden. Aber ein guter Verlauf ist eine der günstigsten Methoden, um ein flaches Interface so wirken zu lassen, als hätte es Tiefe und Licht. Das Problem ist, dass die meisten Verläufe an genau einer Stelle versagen — in der Mitte — und dieses Versagen ist so verbreitet, dass es einer Generation von Designern beibrachte, das Werkzeug ganz zu meiden. Sobald du verstehst, warum der Mittelpunkt matschig wird, kannst du es gezielt beheben, und Verläufe werden zu einem zuverlässigen Teil des Werkzeugkastens statt zu einem Glücksspiel. Hier ist das mentale Modell und die Kniffe, die ich tatsächlich verwende.

Ein Verlauf ist ein Pfad, kein Paar

Der Fehler, der in jedem matschigen Verlauf steckt, ist, ihn als zwei Farben zu denken. Ist er nicht. Er ist ein Pfad zwischen zwei Farben, und die Frage, die entscheidet, ob er gut aussieht, lautet: Welche Route nimmt der Übergang, um von A nach B zu kommen?

Wenn du einen einfachen CSS-Verlauf wie linear-gradient(#3B82F6, #F59E0B) schreibst — ein Blau zu einem Bernstein — interpoliert der Browser standardmäßig in sRGB, indem er eine gerade Linie durch den Farbraum läuft. Stell dir den Farbkreis von oben vor. Blau sitzt auf einer Seite, Bernstein ungefähr gegenüber. Die gerade Linie zwischen ihnen folgt nicht dem farbenfrohen Rand; sie schneidet direkt durch das entsättigte graue Zentrum. Der Mittelpunkt dieses Verlaufs ist also ein trauriger, ausgewaschener Grauton. Das ist der Matsch. Es ist kein Rendering-Fehler — es ist Geometrie. Der kürzeste Pfad zwischen zwei gegenüberliegenden Farbtönen verläuft durch Grau.

Diese eine Erkenntnis stellt alles neu auf. Wenn die Matschigkeit vom Pfad kommt, dann bedeutet sie zu beheben, den Pfad zu steuern. Es gibt drei Haupthebel: wähle Farben, deren gerader Pfad bereits gut ist, leite den Pfad mit einem Zwischen-Stop um, oder ändere den Farbraum, sodass der Standardpfad um den Kreis herum kurvt statt durch ihn hindurch.

Hebel eins: Farben wählen, die zueinander freundlich sind

Der einfachste saubere Verlauf ist zwischen zwei Farben, die im Farbton nah beieinanderliegen — einem analogen Paar. Mische #3B82F6 (Blau) in #6366F1 (Indigo) und der geradlinige Pfad verlässt kaum die Blau-Violett-Nachbarschaft, sodass es keine graue Zone gibt, in die er fallen könnte. Das Ergebnis ist automatisch glatt und reichhaltig.

Deshalb sind so viele hochwertig wirkende Verläufe subtil: Blau zu Violett, Türkis zu Grün, Magenta zu Rot-Orange. Sie sind analog, oft innerhalb von 30–60 Grad Farbton, und sie variieren die Helligkeit mehr als den Farbton. Ein Verlauf, der hauptsächlich die Helligkeit ändert, während der Farbton nahezu konstant bleibt, ist fast unmöglich matschig zu machen. Wenn du einen sicheren Ausgangspunkt willst, baue zuerst ein monochromatisches oder analoges Set und mische dann darin.

Die Folgerung: Komplementäre Verläufe (Farben 180 Grad auseinander) sind die schwierigsten, um sie sauber zu halten, genau weil ihr gerader Pfad mitten durch das Zentrum verläuft. Sie können gemacht werden — aber sie brauchen einen der nächsten zwei Hebel.

Hebel zwei: einen Stop hinzufügen, um den Pfad zu lenken

Wenn du wirklich zwei weit entfernte Farben willst — ein Blau und ein warmes Orange, etwa weil beide Markenfarben sind — lass den Browser nicht den Mittelpunkt wählen. Wähle ihn selbst mit einem dritten Stop.

Statt linear-gradient(#3B82F6, #F59E0B) versuche, durch einen Farbton zu leiten, der sie überbrückt: linear-gradient(#3B82F6, #C084FC, #F59E0B). Dieser violette mittlere Stop zieht den Pfad um den Kreis herum durch Violett und Pink statt durch Grau. Jetzt bleibt der Übergang die ganze Strecke gesättigt. Du hast manuell die farbenfrohe Route gezeichnet, die die gerade Linie nicht nehmen wollte.

Die Wahl der Brückenfarbe ist der handwerkliche Teil. Frage dich, in welche Richtung um den Kreis du reisen willst — Blau zu Bernstein kann durch Violett/Magenta (die warme Route) oder durch Grün/Türkis (die kalte Route) gehen, und sie fühlen sich völlig unterschiedlich an. Die warme Route wirkt wie ein Sonnenuntergang; die kalte Route wirkt tropisch. Wähle bewusst. Du kannst Brückenfarben schnell ausprobieren, indem du eine Palette im Farbpaletten-Generator generierst und Kandidaten-Farbtöne zwischen deine Endpunkte fallen lässt.

Bleib bei einem, vielleicht zwei Zwischen-Stops. Jeder zusätzliche Stop ist eine weitere Stelle, an der der Verlauf eine sichtbare Naht oder ein Band entwickeln kann. Mehr Stops bedeuten nicht mehr Luxus — Zurückhaltung wirkt wie Luxus.

Hebel drei: in einem besseren Farbraum interpolieren

Die moderne Lösung, und zunehmend meine Standardwahl, ist, den Raum zu ändern, in dem der Übergang stattfindet. CSS lässt dich jetzt den Interpolations-Farbraum direkt angeben: linear-gradient(in oklch, #3B82F6, #F59E0B).

OKLCH (und sein Cousin LCH) ist perzeptuell uniform — gleiche numerische Schritte sehen für dein Auge wie gleiche visuelle Schritte aus — und entscheidend ist, dass es beim Interpolieren des Farbtons um den Farbtonkreis herum reist statt durch die kartesische Mitte. Der praktische Effekt ist, dass derselbe Zweifarben-Verlauf von Blau zu Bernstein aufhört, ins Grau abzutauchen, und stattdessen automatisch durch lebendige Zwischen-Farbtöne schwingt, ohne dass ein manueller Stop nötig ist. Die MDN-Dokumentation zur Farbinterpolation bei Verläufen behandelt die Syntax und die Optionen shorter hue / longer hue, mit denen du steuern kannst, in welche Richtung um den Kreis der Übergang verläuft.

Ein paar ehrliche Vorbehalte. Die Browserunterstützung für in oklch ist in aktuellen Browsern gut, aber nicht universell, also biete einen Standard-sRGB-Fallback an (background: linear-gradient(#3B82F6, #F59E0B); vor der OKLCH-Zeile). Und OKLCH kann gelegentlich einen zu lebendigen Mittelpunkt für subtile Hintergründe erzeugen — für einen kaum sichtbaren Hero-Wash ist einfaches sRGB zwischen nahen Farben weiterhin in Ordnung. Greif zu OKLCH, wenn die Endpunkte weit auseinanderliegen und du willst, dass sie gesättigt bleiben.

Winkel, Typen und wo Verläufe hingehören

Der Pfad ist der schwierige Teil; der Rest ist Geschmack, aber es gibt Konventionen, die man kennen sollte.

Für Tiefe halte die zwei Farben in Helligkeit und Farbton nah beieinander — ein subtiler Verlauf (#1E293B zu #0F172A) auf einer dunklen Oberfläche fügt eine Reichhaltigkeit hinzu, die keine flache Füllung kann. Für Wirkung lass den Verlauf das Hauptelement sein und gib ihm Raum.

Vergiss den Text nicht

Verläufe und Text haben eine angespannte Beziehung. Der Kontrast muss über die gesamte Spanne des Verlaufs halten, nicht nur dort, wo du die Überschrift zufällig hingesetzt hast. Ein Titel, der den WCAG-Kontrast über dem hellen oberen Teil eines Verlaufs besteht, kann über dem dunkleren unteren Teil leise durchfallen. Teste den ungünstigsten Punkt, stütze dich auf die WCAG-Kontrastverhältnisse (4,5:1 für Fließtext, gemäß der W3C-Anleitung), und lege im Zweifel eine halbtransparente volle Überlagerung hinter den Text, sodass sein Hintergrund vorhersehbar ist. Oder halte Verläufe einfach in dekorativen Zonen und setze Text auf volle Füllungen.

Die Kurzfassung

Hör auf, einen Verlauf als zwei Farben zu denken, und fang an, ihn als die Linie zwischen ihnen zu denken. Matschige Mitten kommen von einem geraden Pfad durch Grau; du behebst sie, indem du freundlichere Farben wählst, mit einem Zwischen-Stop lenkst oder in OKLCH interpolierst, sodass der Pfad um den Rand herum kurvt. Beherrsche das, und Verläufe sind kein Risiko mehr, sondern werden zu einer der effizientesten Methoden, um flacher Arbeit Licht, Tiefe und Persönlichkeit hinzuzufügen. Ziehe zwei Farben aus dem Farbpaletten-Generator, lass sie in einen linear-gradient(in oklch, …) fallen, und beobachte, wie ein Übergang, der grau geworden wäre, die ganze Strecke lebendig bleibt.

Häufig gestellte Fragen

Warum sieht die Mitte meines Verlaufs grau oder matschig aus?

Wenn du zwei Farben im Standard-sRGB-Raum mischst, schneidet die Interpolation geradlinig durch den Farbkreis statt um ihn herum. Wenn deine zwei Farben im Farbton weit auseinanderliegen — etwa ein Blau und ein Gelb — verläuft diese gerade Linie durch das niedrig gesättigte graue Zentrum, sodass der Mittelpunkt entsättigt und matschig aussieht. Die Lösung besteht entweder darin, Farben mit näherem Farbton zu wählen, einen Zwischen-Farb-Stop hinzuzufügen, um den Übergang um den Kreis herumzuleiten, oder einen Farbraum und eine Farbton-Interpolationsmethode zu verwenden, die am Rand entlangläuft statt durch die Mitte.

Welchen Farbraum sollte ich für CSS-Verläufe verwenden?

Für die meiste moderne Arbeit erzeugt die Interpolation in OKLCH oder LCH spürbar glattere, gleichmäßigere Verläufe als das Standard-sRGB, weil diese Räume perzeptuell uniform sind — gleiche numerische Schritte sehen aus wie gleiche visuelle Schritte. Du aktivierst es mit Syntax wie 'linear-gradient(in oklch, #3B82F6, #F59E0B)'. Das Standard-sRGB ist für Übergänge zwischen nahen, ähnlichen Farben in Ordnung, aber für lebendige Zweifarben-Verläufe vermeidet OKLCH den faden Mittelpunkt und tote Zonen. Prüfe immer die Browserunterstützung und biete einen Standard-Fallback für ältere Browser an.

Wie viele Farb-Stops sollte ein Verlauf haben?

Zwei Stops genügen für einen einfachen, subtilen Übergang, und dort leben die meisten sauberen UI-Verläufe. Füge einen dritten Zwischen-Stop hinzu, wenn deine zwei Endpunkte im Farbton weit auseinanderliegen und der automatische Mittelpunkt falsch aussieht — der mittlere Stop lässt dich den Weg durch eine schmeichelhafte Farbe statt durch Grau lenken. Über drei oder vier Stops hinaus erzeugst du meist Banding und visuelles Rauschen statt Reichhaltigkeit. Für Hintergründe sehen weniger Stops mit einem sanften Übergang fast immer hochwertiger aus als ein geschäftiger Regenbogen.

Welchen Winkel sollte ein linearer Verlauf haben?

Es gibt keinen einzigen richtigen Winkel, aber ein paar Konventionen wirken poliert: ein Verlauf von oben nach unten (180deg) wirkt wie natürliches Oberlicht, während eine Diagonale um 135deg ein Gefühl von Richtung und Energie hinzufügt, ohne chaotisch zu sein. Subtile vertikale Verläufe funktionieren gut für Buttons und Karten, weil sie nachahmen, wie Licht fällt. Steile oder ungewöhnliche Winkel lenken die Aufmerksamkeit auf den Verlauf selbst, was du nur willst, wenn der Verlauf das Hauptelement ist statt eines ruhigen Hintergrunds.

Sind Verläufe ein Problem für die Barrierefreiheit von Text?

Sie können es sein, denn der Textkontrast muss über die gesamte Fläche halten, die der Text bedeckt, nicht nur an einem Punkt. Eine Überschrift über einem Verlauf, der von hell zu dunkel läuft, könnte oben den Kontrast bestehen und unten durchfallen. Die sicheren Ansätze sind, Text nur über dem Bereich des Verlaufs zu halten, wo der Kontrast über der WCAG-Schwelle bleibt, eine volle oder halbtransparente Überlagerung hinter dem Text hinzuzufügen oder Verläufe auf nicht-textuelle dekorative Bereiche zu beschränken. Teste immer den ungünstigsten Punkt des Verlaufs, nicht den Durchschnitt.

Lust, mit Farben zu experimentieren?

Probiere unseren kostenlosen Farbpaletten-Generator aus und finde deine perfekte Harmonie — mit integriertem WCAG-Kontrastprüfer.

Generator öffnen