CSS-Verlaufsfarben: Warum Verläufe in der Mitte grau werden und 3 Wege, das zu beheben
Blende Blau in Gelb über und die Mitte wird grau, weil Hex-Farben in RGB gemischt werden. Füge einen mittleren Stopp hinzu, mische in OKLCH oder wähle Nachbarn auf dem Farbkreis. Fünf fertige Verläufe inklusive.
Ein Verlauf wird in der Mitte grau, weil der Browser Hex-Farben in RGB mischt und zwei Farben, die sich gegenüberliegen, sich auf halbem Weg gegenseitig aufheben. Die Lösung: Gib der Mitte bewusst eine Farbe oder ändere, wie die Mischung berechnet wird. Hier sind drei Lösungen und fünf Verläufe zum Einfügen.
Warum die Mitte grau wird
Sieh dir einen Verlauf an, der matschig aussieht, und ignoriere die Enden. Die Enden sind in Ordnung. Du hast sie gewählt. Die Mitte ist der Teil, den niemand gewählt hat.
Ein Verlauf ist eine Mischung, und eine Mischung braucht Mathe. Hex-Farben sind RGB-Werte, also mischt der Browser sie standardmäßig Kanal für Kanal.
Halbwegs zwischen Blau und Gelb liegt Rot zwischen 0 und 255, Grün zwischen 0 und 255 und Blau zwischen 255 und 0. Jeder Kanal landet bei etwa 128. Gleiche Anteile an Rot, Grün und Blau sind die Definition von Grau.
#0000FF zu #FFFF00
Mit mittlerem Stopp #0EBAAE
Das liegt nicht an deinem Monitor und nicht an Kompression. Es ist Arithmetik, und sie zeigt sich immer dann, wenn die beiden Farben auf dem Farbkreis weit auseinanderliegen. Blau und Gelb sind fast exakte Gegensätze, der schlimmste Fall.
Lösung 1: einen mittleren Stopp hinzufügen
Die direkteste Lösung: Überlass die Mitte nicht dem Zufall. Füge bei 50% einen dritten Farbstopp hinzu, den du selbst gewählt hast.
background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00);
#0EBAAE ist ein Türkis, das in der wahrgenommenen Farbe zwischen Blau und Gelb liegt. Die Mischung läuft jetzt von Blau zu Türkis und dann von Türkis zu Gelb, und keine Hälfte kreuzt je Grau.
Das funktioniert in jedem Browser und braucht keine neue Syntax, ist also die sichere Wahl für ein Design, das überall gleich aussehen muss. Wähle die Mittelfarbe nach Augenmaß und prüfe sie neben beiden Enden. Der Preis: Du verwaltest jetzt drei Farben statt zwei.
Lösung 2: in OKLCH mischen
Die andere Lösung ändert die Mathematik, statt eine Farbe hinzuzufügen. CSS lässt dich den Farbraum wählen, in dem gemischt wird, und OKLCH beschreibt Farbe als Helligkeit, Chroma und Farbton. Chroma ist, wie farbig eine Farbe ist, also bleibt eine Mischung, die Chroma behält, farbig.
background: linear-gradient(in oklch, #0000FF, #FFFF00);
Mit in oklch reist der Browser um den Farbkreis herum, durch Grün- und Türkistöne, statt geradewegs durch das graue Zentrum. Du behältst zwei Farben und der Code bleibt kurz. MDN dokumentiert das als Farbinterpolationsmethode innerhalb der Verlaufsfunktion, und Legacy-Hex-Farben nutzen nur RGB, wenn du keine Methode wählst, um mit älteren Seiten kompatibel zu bleiben.
Zwei Dinge solltest du wissen. Manche Farben auf dieser Reise können außerhalb dessen liegen, was ein Bildschirm darstellen kann, deshalb kappen Browser sie auf den nächsten darstellbaren Wert. Und die Route führt den kurzen Weg um den Kreis, prüfe also, ob dir der gewählte Pfad gefällt. Unser Leitfaden zu OKLCH-Farbe im modernen CSS behandelt den Farbraum ausführlicher.
Lösung 3: Nachbarn wählen
Die dritte Lösung fasst den Code nicht an. Sie wählt Farben, die sich nicht gegenseitig auslöschen können.
#0066FF zu #FF8800
#6440E0 zu #E040A0
Gegensätzliche Farben mischen sich zu Grau. Nachbarn mischen sich zu etwas dazwischen, das noch eine Farbe ist. Wenn eine Marke zwei Gegensätze kombiniert, kannst du sie trotzdem in einem Verlauf nutzen: Setze einen mittleren Stopp dazwischen oder mische in OKLCH.
Blau zu Orange, Standardmischung
Blau zu Orange, in oklch
So prüfst du deinen eigenen Verlauf
- Sieh dir die Mitte an, nicht die Enden.
- Benenne die Farbe, die du dort siehst. Wenn der Name Grau, Braun oder Matsch lautet, wie bei #808080 oder #807780, ist das das Problem.
- Wähle eine der obigen Lösungen und vergleiche beide Versionen nebeneinander.
Ein Verlauf ist nur so gut wie sein schlechtester Punkt, und sein schlechtester Punkt ist fast immer die Mitte.
Fünf Verläufe zum Klauen
Jeder wurde darauf geprüft, dass die Mitte farbig bleibt. Der erste hat einen eingebauten mittleren Stopp. Die anderen vier nutzen benachbarte Farbtöne. Tippe auf einen Code, um ihn zu kopieren.
| Verlauf | Start | Mitte | Ende | Warum er funktioniert |
|---|---|---|---|---|
| Blau, Türkis, Gelb | #0000FF | #0EBAAE | #FFFF00 | Gegensätzliche Enden, gerettet durch einen echten mittleren Stopp |
| Violett zu Pink | #6440E0 | keine | #E040A0 | Nachbarn auf dem Farbkreis |
| Blau zu Türkis | #2F5BEA | keine | #14B8A6 | Nachbarn auf dem Farbkreis |
| Orange zu knalligem Pink | #FF7A00 | keine | #FF2E93 | Nachbarn auf dem Farbkreis |
| Grün zu Limette | #00A86B | keine | #C6F432 | Nachbarn auf dem Farbkreis |
Gib das deinem Entwickler
.gradient-sunrise { background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00); }
.gradient-violet { background: linear-gradient(90deg, #6440E0, #E040A0); }
.gradient-ocean { background: linear-gradient(90deg, #2F5BEA, #14B8A6); }
.gradient-sunset { background: linear-gradient(90deg, #FF7A00, #FF2E93); }
.gradient-meadow { background: linear-gradient(90deg, #00A86B, #C6F432); }
/* Two opposite colors, no middle stop: choose the blend space instead. */
.gradient-opposites { background: linear-gradient(in oklch, #0066FF, #FF8800); }
Wenn ein Browser in oklch nicht versteht, ignoriert er die gesamte Deklaration. Schreibe zuerst eine normale linear-gradient(...)-Zeile als Fallback, danach die OKLCH-Zeile.
FAQ
Warum wird mein Verlauf in der Mitte grau?
Hex-Farben werden in RGB gemischt, und zwei Farben, die auf dem Farbkreis weit auseinanderliegen, mitteln sich zu Grau. Blau #0000FF und Gelb #FFFF00 treffen sich bei #808080.
Wie verhindere ich, dass ein CSS-Verlauf matschig aussieht?
Füge einen mittleren Farbstopp mit echter Farbe hinzu, mische in OKLCH mit linear-gradient(in oklch, ...) oder wähle zwei Farben, die auf dem Farbkreis nebeneinander liegen.
Was bewirkt "in oklch" in einem CSS-Verlauf?
Es weist den Browser an, die Farben im OKLCH-Farbraum statt in RGB zu mischen, sodass die Mitte ihre Farbe behält, statt zu Grau abzusinken.
Welche Verlaufsfarben passen gut zusammen?
Nachbarn auf dem Farbkreis, etwa Violett #6440E0 zu Pink #E040A0 oder Grün #00A86B zu Limette #C6F432. Ihre Mischung bleibt auf ganzer Strecke leuchtend.
Unterstützen alle Browser Verläufe in OKLCH?
Moderne Browser tun das, aber ein Browser, der es nicht kann, verwirft die Deklaration. Füge davor eine normale Verlaufszeile als Fallback ein.
Warum wird Blau zu Gelb grau und nicht grün?
Weil die Mischung den geraden Weg durch RGB nimmt, wo der Durchschnitt beider Farben Grau ist. Eine grüne Mitte erscheint nur, wenn du sie als Stopp hinzufügst oder in OKLCH mischst.
Quellen
- CSS Color Module Level 4, interpolation: Legacy-sRGB-Farben wie Hex werden standardmäßig in sRGB interpoliert, andere Farbräume werden über die Farbinterpolationsmethode gewählt.
- MDN, linear-gradient(): die
<color-interpolation-method>-Syntax,in oklch. - MDN, OKLCH color: Helligkeit, Chroma und Farbton.
- Der Mittelpunkt von (0, 0, 255) und (255, 255, 0) ist (127,5, 127,5, 127,5), also #808080 mit OKLCH-Chroma 0. Die Mittelpunkte von #0066FF zu #FF8800 (#807780) und #6440E0 zu #E040A0 (#A240C0) haben wir in sRGB berechnet. Die Balken auf dieser Seite wurden aus diesen Berechnungen gerendert, und der OKLCH-Balken kappt Farben außerhalb des Bildschirmbereichs, wie es Browser tun.
- Zuerst veröffentlicht als Karussell auf UX Brainy.
Want gradients, color and every other detail designed as one system? Our team designs and builds product UI that holds up on every screen.
Get Started
