# Zweifarbige Farbverläufe: 30 Farbpaare, die immer passen [Canonical HTML page](https://gradiently.design/de/guide/two-color-gradients) Zwei Farben, eine Richtung, nichts kann schiefgehen. Fast. Hier sind die zwei Regeln, die entscheiden, ob ein Paar funktioniert, und dreißig Paare, die beide erfüllen, fertig zum Kopieren. ## The short version - 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. 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 | Je größer die Lücke, desto eher verliert die Mitte an Farbe. Die ganze Erklärung steht bei [matschigen Farbverläufen](https://gradiently.design/de/guide/muddy-gradients). Abstände aus der ersten Zeile sind [analoge Farben](https://gradiently.design/de/guide/analogous-colors). Abstände aus der letzten Zeile sind [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors), 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. - Blaubeere: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)` - Flamingo: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)` - Lagune: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)` - Ringelblume: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)` - Orchidee: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)` - Frisch gemäht: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)` - Rosenholz: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)` - Flut: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)` - Clementine: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Moos und Petrol: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Paare mit nahen Farbtönen: Nachbarn auf dem Farbkreis, daher ist die Mitte immer eine saubere Farbe. ## 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](https://gradiently.design/de/guide/monochromatic-color-scheme). - Denim: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)` - Pflaume: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)` - Wald: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)` - Rost: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)` - Anthrazit: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)` - Wein: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)` - Tiefes Petrol: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)` - Indigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)` - Kakao: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)` - Bernstein: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)` Paare von hell nach dunkel: eine Farbfamilie, ein großer Helligkeitssprung. Dunkle Schrift oben, weiße Schrift unten. ## 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. - Koralle und Indigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)` - Pfirsich und Violett: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)` - Limette und Blau: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)` - Pink und Himmelblau: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)` - Gelb und Pink: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)` - Cyan und Magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)` - Rot und Violett: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)` - Mint und Violett: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)` - Orange und Magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)` - Grün und Gold: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)` Kontrastpaare: mehr Farbtonabstand, trotzdem eine leuchtende Mitte. Prüfe den Textkontrast an beiden Enden. ## 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. ```css /* 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); } ``` Ein Farbhinweis verschiebt die Mitte, ohne eine Farbe hinzuzufügen. Das ist einer der schnellsten Wege, ein gängiges Paar weniger nach Standard aussehen zu lassen. ## 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](https://gradiently.design/de/guide/text-on-gradient) erklärt die Prüfungen im Detail. Ein Hochformat-Beitrag mit einer kurzen Überschrift am ruhigeren Ende eines Farbverlaufshintergrunds 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](https://gradiently.design/de/guide/gradient-angle)), 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](https://gradiently.design/de/guide/gradient-color-combinations) 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. ## FAQ ### 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.