Von der Palette zum CSS-Verlauf: Farbharmonien richtig im Code einsetzen
Eine Komplementär- oder Triaden-Palette ist in Sekunden erzeugt — aber zwischen "drei hübsche Farben" und einem CSS-Verlauf, der im Layout auch wirklich gut aussieht und lesbar bleibt, liegt noch ein Schritt. Dieser Leitfaden zeigt, wie Verlaufsrichtung, Farbstopp-Anzahl und Kontrast zusammenspielen — anhand eines durchgängigen Beispiels.
Kurzantwort Eine Farbharmonie (Komplementär, Analog oder Triade) liefert zwei oder drei zusammenpassende Farbtöne im Kreis; ein CSS-Verlauf nutzt genau diese Töne als geordnete Stopps entlang einer Richtung, meist mit linear-gradient() oder radial-gradient().
Angenommen, ein Ausgangston ist ein kräftiges Indigo bei etwa H=245°. Eine Analog-Palette liefert dann benachbarte Töne rund um H±30°, eine Komplementär-Palette den gegenüberliegenden Ton bei H+180° (in diesem Beispiel Richtung Gelb-Orange). Für einen Hero-Hintergrund oder eine Karten-Kopfzeile wird daraus schnell ein Verlauf wie linear-gradient(135deg, #4338ca, #7c3aed) — zwei benachbarte Töne der Analog-Palette, die ruhig ineinander übergehen, statt hart zu wechseln.
FarbstoppEin einzelner Farbwert innerhalb eines CSS-Verlaufs, an einer bestimmten Position (in % oder als Längeneinheit) entlang der Verlaufsachse. Zwischen zwei Stopps interpoliert der Browser automatisch.
Ein häufiger Stolperstein: Wer eine Komplementär-Palette direkt eins zu eins als Verlauf verwendet, bekommt oft einen unruhigen Übergang, weil gegenüberliegende Farbtöne in der Mitte des Verlaufs durch ein trübes Grau oder Braun "durchlaufen" können. In der Praxis wirkt es meist ruhiger, die Komplementärfarbe nur als Akzent (etwa Rand oder Schatten) zu nutzen und den eigentlichen Verlauf aus zwei benachbarten, also analogen, Tönen zu bilden.
Winkel und Farbstopps richtig wählen
Kurzantwort Ein Winkel zwischen 120° und 145° wirkt in den meisten UI-Flächen natürlicher als 90° oder 180°; zwei Farbstopps reichen für die meisten Buttons und Karten, drei nur für großflächige, dekorative Hintergründe.
Der Grad-Wert in linear-gradient(135deg, …) bestimmt die Richtung: 0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten. Ein diagonaler Wert wie 135deg wird im Interface häufig verwendet, weil er wie einfallendes Licht von oben links wirkt statt wie eine harte, technische Trennung. Nachfolgend ein Beispiel, wie sich dieselbe Grundfarbe abhängig von Winkel und Stopp-Zahl unterschiedlich liest:
Beispielhafte Verlaufsvarianten (nur zur Veranschaulichung, keine feste Regel)
Verwendung
Beispiel-Code
Button, ruhig
linear-gradient(135deg,#4f46e5,#7c3aed)
Hero, weich
linear-gradient(120deg,#4338ca,#6d28d9,#a855f7)
Badge, Akzent
linear-gradient(90deg,#7c3aed,#e11d48)
Hinweis: Diese Tabelle zeigt Beispielwerte zur Veranschaulichung, keine gemessenen Vorher-Nachher-Werte. Jedes Layout, jede Bildschirmgröße und jede Markenfarbe verlangt eine eigene Feinjustierung.
Für ein reines Verlaufsexperiment reicht oft ein einfaches Werkzeug, das zwei bis drei Farbstopps, die Richtung (linear oder radial) sowie den fertigen CSS- und Tailwind-Arbitrary-Value-Code direkt ausgibt. Ein solches eigenständiges Mini-Modul ist als mögliche künftige Ergänzung neben dem bestehenden Palettengenerator denkbar — bis dahin lässt sich derselbe Verlauf manuell zusammensetzen, sobald die passenden HEX-Werte aus einer Harmonie-Palette feststehen.
Kontrast über den ganzen Verlauf prüfen
Kurzantwort Weil sich die Leuchtdichte an jedem Punkt eines Verlaufs ändert, muss Text-Kontrast getrennt am dunkelsten und am hellsten Ende geprüft werden — ein einzelner Durchschnittswert reicht nicht aus.
Angenommen, ein Verlauf reicht von einem dunklen Indigo zu einem helleren Violett. Weiße Schrift kann am dunklen Ende ein WCAG-AA-Verhältnis von 4,5:1 oder mehr erreichen, während dieselbe weiße Schrift am helleren Ende darunter fällt. Zwei praktikable Lösungswege: entweder die Textfläche auf den kontrastreicheren Teil des Verlaufs beschränken, oder eine leicht abgedunkelte, halbtransparente Fläche zwischen Verlauf und Text legen, damit der Kontrast über die gesamte Fläche stabil bleibt.
Wer eine Verlaufsfarbe ohnehin schon aus HEX-Werten zusammensetzt, kann Anfangs- und Endfarbe einzeln als Vordergrund- oder Hintergrundfarbe gegen die geplante Textfarbe prüfen und so beide Enden des Übergangs absichern, statt sich auf einen Mittelwert zu verlassen.
Verlaufsfarben als Tailwind- und CSS-Code
Kurzantwort Da Tailwind kein natives HSL-Arbitrary-Value für Verläufe kennt, werden Palettenfarben meist zuerst in HEX umgerechnet und dann in bg-gradient-to-br from-[#…] to-[#…] eingesetzt.
Ein Beispiel: Aus einer Analog-Palette rund um H=262° ergeben sich HEX-Werte wie #4f46e5 und #7c3aed. Als Tailwind-Utility wird daraus class="bg-gradient-to-br from-[#4f46e5] to-[#7c3aed]", als reines CSS background: linear-gradient(135deg, #4f46e5, #7c3aed);. Wer die Farben stattdessen dauerhaft im Tailwind-Theme registriert (etwa als brand-start / brand-end), vermeidet, dass dieselben HEX-Codes über viele Dateien verstreut kopiert werden müssen.
HEX, RGB, HSL synchron umrechnen, Kontrast prüfen und Komplementär-/Analog-/Triaden-Paletten erzeugen — direkt im Browser, ohne Anmeldung.
Welcher Verlaufswinkel eignet sich für einen Hero-Hintergrund?
Ein diagonaler Winkel zwischen 120° und 145° wirkt in den meisten Layouts natürlicher als ein reiner 90°- oder 180°-Verlauf, weil das Auge den Übergang eher als Lichteinfall statt als starre Trennlinie liest. Für Buttons und kleine Flächen reicht oft schon 135°. Zwei bis drei Farbstopps genügen meist; mehr Stopps erhöhen schnell die Unruhe im Bild.
Wie viele Farbstopps sollte ein CSS-Verlauf haben?
Zwei Stopps erzeugen den klassischen, ruhigen Verlauf und sind für die meisten UI-Flächen ausreichend. Drei Stopps erlauben einen sanften Zwischenton, etwa wenn eine Komplementärfarbe als Mittelpunkt dient, sollten aber sparsam eingesetzt werden. Vier oder mehr Stopps wirken auf kleinen UI-Elementen wie Buttons meist überladen und eignen sich eher für große, dekorative Hintergrundflächen.
Sollte ein Verlauf aus einer Komplementär- oder einer Analog-Palette gebaut werden?
Eine Analog-Palette (benachbarte Farbtöne, etwa H±30°) ergibt einen ruhigen, harmonischen Verlauf, weil sich die Farben im Farbkreis kaum widersprechen — gut für Hintergründe, die nicht ablenken sollen. Eine Komplementär-Palette (H+180°) erzeugt einen auffälligeren, energischeren Verlauf mit stärkerem Kontrast zwischen den Enden, was sich eher für Akzentflächen, Badges oder Call-to-Action-Buttons eignet als für ganzseitige Hintergründe.
Bleibt Text auf einem Farbverlauf automatisch lesbar?
Nein. Ein Verlauf hat an jedem Punkt eine andere Leuchtdichte, daher kann derselbe Textfarbton an einem Ende ausreichend Kontrast haben und am anderen Ende die WCAG-Schwelle unterschreiten. In der Praxis prüft man deshalb die dunkelste und die hellste Stelle des Verlaufs einzeln gegen die geplante Textfarbe, statt nur einen Durchschnittswert anzunehmen, oder legt eine leicht abgedunkelte Overlay-Schicht über den Verlauf, bevor Text platziert wird.
Wie überträgt man eine HSL-Palette in Tailwind-Farbcode?
Da Tailwind standardmäßig kein natives HSL-Utility für beliebige Werte kennt, wird jede Palettenfarbe meist zuerst in HEX umgerechnet und dann als Arbitrary-Value-Klasse verwendet, etwa bg-[#7c3aed] oder für einen Verlauf bg-gradient-to-br from-[#7c3aed] to-[#4f46e5]. Wer die Farben stattdessen als Custom-Properties im Tailwind-Theme registriert, kann sie unter einem sprechenden Namen wiederverwenden, statt HEX-Werte über die Codebasis zu verteilen.
Kurzer Methodik-Hinweis: Dieser Artikel erklärt allgemeine Prinzipien von Farbharmonie, Verlaufsrichtung und Kontrastprüfung im Zusammenhang mit CSS-Verläufen. Alle Beispielwerte und Code-Snippets dienen nur zur Veranschaulichung und wurden nicht aus einer verbindlichen Messreihe abgeleitet. Für barrierefreie Projekte gilt stets die aktuelle WCAG-Spezifikation als verbindliche Quelle.