Die Kurzfassung
- Ein zweifarbiger Farbverlauf mischt eine Farbe in eine andere und ist der einfachste Verlauf, um ihn zu gestalten, umzufärben und einheitlich zu halten.
- Ob ein Paar funktioniert, hängt vor allem vom Farbtonabstand ab: Benachbarte Farbtöne mischen sich immer sauber, gegenüberliegende werden in der Mitte grau.
- Ein Helligkeitsunterschied zwischen den beiden Farben gibt einem Farbverlauf Richtung und Tiefe.
- Zwei Farben aus derselben Farbfamilie, eine hell und eine dunkel, ergeben den vielseitigsten Verlauf, weil an einem Ende Text funktioniert.
- Weil zweifarbige Verläufe so verbreitet sind, macht erst eine kleine Änderung einen wiedererkennbar, etwa ein ungewöhnlicher Winkel, eine verschobene Mitte oder eine Schicht Körnung.
Auf dieser Seite
Ein zweifarbiger Farbverlauf ist eine Mischung von einer Farbe zur anderen, und er ist der sicherste Verlauf, den du machen kannst: Zwei Farben sind leicht zu wählen, leicht umzufärben und leicht einheitlich zu halten. Ob ein Paar funktioniert, hängt an zwei Dingen: wie weit die Farbtöne auf dem Farbkreis auseinanderliegen und wie verschieden hell sie sind. Stimmen diese beiden, ergeben fast zwei beliebige Farben einen guten Verlauf. Unten stehen die Regeln, dann dreißig Paare, die ihnen folgen.
Regel 1: auf den Farbtonabstand achten
Der Farbtonabstand gibt an, wie weit zwei Farben auf dem Farbkreis auseinanderliegen, gemessen in Grad. Er sagt voraus, was in der Mitte der Mischung passiert, und genau dort gelingt oder scheitert ein zweifarbiger Verlauf.
| Farbtonabstand | Was in der Mitte passiert | Urteil |
|---|---|---|
| 0 bis 60 Grad | Eine saubere Zwischenfarbe, etwa Violett zwischen Blau und Pink | Immer sicher |
| 60 bis 120 Grad | Meist eine klare neue Farbe, manchmal etwas matt | Sicher; Mitte prüfen |
| 120 bis 150 Grad | Oft eine weichere, grauere Mitte | Sorgfältig testen |
| 150 bis 180 Grad | Grau oder Braun in der Mitte bei der Standardmischung | Braucht eine Brückenfarbe oder OKLCH |
Abstände aus der ersten Zeile sind analoge Farben. Abstände aus der letzten Zeile sind Komplementärfarben, die nebeneinander eindrucksvoll wirken, beim Mischen aber Hilfe brauchen.
Regel 2: einen Helligkeitsunterschied einbauen
Zwei gleich helle Farben ergeben einen Verlauf, der flach wirkt, als ginge er nirgendwohin. Ein deutlicher Helligkeitsunterschied gibt der Mischung eine Richtung, wie Licht, das von einer Seite einfällt. Das bringt auch einen praktischen Vorteil: Text kann am dunkleren Ende in Weiß stehen oder am helleren Ende in dunkler Schrift.
Wirkt flach
- Zwei mittlere Töne mit derselben Helligkeit
- Zwei voll gesättigte Farben ohne dunkles Ende
- Kein klarer Platz für Text
Wirkt beleuchtet
- Eine hellere und eine dunklere Farbe
- Eine gesättigte Farbe mit einem tieferen Nachbarn
- Ein klares helles und dunkles Ende für Schrift
Paare mit nahen Farbtönen
Diese Paare liegen höchstens etwa 60 Grad auseinander. Sie können gar nicht matschig werden und sehen auf fast allem gut aus, von Buttons bis zu bildschirmfüllenden Hintergründen. Blaubeere und Flut zum Beispiel sind beide Blau, das in Richtung Violett wandert, und wirken wie eine einzige Farbe, die das Licht einfängt.
Paare von hell nach dunkel
Diese Paare bleiben in einer Farbfamilie und wechseln die Helligkeit von blass zu tief. Sie sind die vielseitigsten zweifarbigen Verläufe: ruhig genug für eine ganze Seite und mit einem dunklen Ende, das für weiße Schrift bereitsteht. Sie ergeben auch hervorragende Markenverläufe, weil sie eine einzige Markenfarbe erweitern, statt eine neue hinzuzufügen. Die Theorie dazu steht bei monochromen Farbschemata.
Kontrastpaare, die sauber bleiben
Diese Paare liegen weiter auseinander, etwa zwischen 90 und 150 Grad, aber jedes hat bei der Standardmischung eine leuchtende Mitte. Pfirsich und Violett laufen durch Mauve, Cyan und Magenta durch Immergrünblau, Orange und Magenta durch knalliges Pink. Sie sind energischer als nahe Paare und passen zu Launches, Musik und allem, was auffallen soll.
Die Mitte verschieben
Standardmäßig ist ein zweifarbiger Verlauf halb und halb. Mit CSS kannst du den Punkt, an dem beide Farben gleich stark gemischt sind, mit einem Farbhinweis verschieben: einem bloßen Prozentwert zwischen den Stopps. Schiebst du ihn zu einem Ende, übernimmt die andere Farbe mehr von der Fläche, ohne dass eine dritte Farbe dazukommt.
/* Even blend: the mix point sits at 50% */
.even { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }
/* Colour hint at 75%: blue holds on for most of the box */
.blue { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }Wohin Text auf einem zweifarbigen Verlauf gehört
Ein zweifarbiger Verlauf bringt ein Layout schon mit: Ein Ende ist heller, das andere dunkler. Setze die Wörter an das Ende, das am stärksten mit deiner Schriftfarbe kontrastiert, und lass das andere Ende die Farbe tragen. Für weiße Schrift ist das das dunklere Ende, für dunkle Schrift das hellere. Zentriere kleinen Text nie über der Mitte eines Hell-dunkel-Paars, weil sich der Kontrast entlang der Zeile ändert. Text auf einem Farbverlauf erklärt die Prüfungen im Detail.
Wörter am ruhigen Ende der Mischung, Farbe am anderen: das einfachste Layout, das ein Farbverlauf bietet.
Einen zweifarbigen Verlauf zu deinem eigenen machen
Zweifarbige Verläufe sind gerade deshalb beliebt, weil sie sicher sind, und darum sind die beliebten Paare überall. Damit einer wiedererkennbar wird, ändere etwas, das Menschen bemerken, ohne darüber nachzudenken: einen steileren oder ungewöhnlichen Winkel (siehe Farbverlauf-Winkel), eine verschobene Mitte, eine feine Körnung oder eine dritte Farbe nur an einem Rand. Wenn du über zwei Farben hinausgehen willst, findest du die 60 Farbkombinationen für Farbverläufe nach Stimmung sortiert.
Wenn du die zwei Farben schon kennst, kannst du sie in die Suche im Markt eintippen, etwa „Blau und Violett“, und mit den Marks gestalten, die um sie herum gebaut sind.
Häufige Fragen
Welche zwei Farben ergeben den besten Farbverlauf?
Farben, die auf dem Farbkreis höchstens etwa 60 Grad auseinanderliegen und sich deutlich in der Helligkeit unterscheiden, ergeben die zuverlässigsten zweifarbigen Verläufe.
Warum sieht mein zweifarbiger Verlauf in der Mitte grau aus?
Die Farben liegen auf dem Farbkreis fast gegenüber. Füge in der Mitte eine leuchtende Brückenfarbe hinzu oder mische in OKLCH.
Ist ein zweifarbiger Verlauf besser als einer mit drei Farben?
Zwei Farben sind einfacher und sicherer. Drei geben mehr Tiefe und lassen dich die Mitte steuern, gehen aber leichter schief.
Wie ändere ich in einem CSS-Farbverlauf, wo sich zwei Farben treffen?
Füge einen Farbhinweis hinzu, einen bloßen Prozentwert zwischen den beiden Stopps, etwa linear-gradient(#3b82f6, 25%, #8b5cf6).
Wohin gehört Text auf einem zweifarbigen Verlauf?
An das Ende mit dem stärksten Kontrast zu deiner Schriftfarbe: Weiß auf das dunklere Ende, dunkle Schrift auf das hellere.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
