# Warum manche Farbverläufe in der Mitte grau werden und was hilft

[Canonical HTML page](https://gradiently.design/de/guide/muddy-gradients)

Blau und Gelb sollten einen schönen Verlauf ergeben. Mischst du sie auf die Standardweise, bekommst du einen grauen Fleck in der Mitte. Hier steht genau, warum, und vier Wege, jeden Übergang sauber zu halten.

## The short version

- Ein matschiger Farbverlauf wird dort grau, braun oder stumpf, wo seine Farben sich treffen, statt auf ganzer Breite leuchtend zu bleiben.
- Die Ursache ist das Mischen im sRGB-Farbraum, in dem der Mittelpunkt zwischen zwei Gegenfarben wie Blau und Gelb ein flaches Grau ist.
- Mischen in OKLCH erhält die Farbintensität, weil es um den Farbkreis herum wandert statt geradewegs durchs Grau.
- Ein von Hand gewählter Mittelstopp, etwa Petrol zwischen Blau und Gelb, behebt Matsch in jedem Tool und jedem Format.
- Benachbarte Farbtöne auf dem Farbkreis werden fast nie matschig, deshalb sind analoge Verläufe am sichersten zu gestalten.

Ein **matschiger Farbverlauf** ist ein Übergang, der in der Mitte grau, braun oder stumpf wird, obwohl beide Farben leuchten. Das passiert, weil die meisten Tools Farben im sRGB-Farbraum mischen und dabei Rot-, Grün- und Blauwerte in geraden Linien verbinden. Liegen die zwei Farben auf entgegengesetzten Seiten des Farbkreises, treffen sich diese geraden Linien nahe Grau. Die Lösung ist, den Weg des Übergangs selbst zu wählen: eine Farbe in die Mitte setzen, in OKLCH mischen oder Farbtöne nutzen, die näher beieinanderliegen.

## Warum Gegenfarben grau werden

Schau auf die Zahlen. Reines Blau ist Rot 0, Grün 0, Blau 255. Reines Gelb ist Rot 255, Grün 255, Blau 0. Auf halbem Weg landet jeder Kanal bei etwa 128, also `#808080`: ein mittleres Grau. Dasselbe passiert bei Rot und Cyan, Orange und Azur oder jedem anderen Komplementärpaar. Mathematisch läuft die gerade Linie zwischen ihnen mitten durch die Grauachse.

- Blau zu Gelb in sRGB: `linear-gradient(90deg, #0000ff, #ffff00)`
- Rot zu Cyan in sRGB: `linear-gradient(90deg, #ff0000, #00ffff)`
- Orange zu Azur in sRGB: `linear-gradient(90deg, #ff8000, #0080ff)`

Drei Komplementärpaare, auf die Standardweise gemischt. Jedes läuft in der Mitte durch dasselbe flache Grau.

Ein zweites, feineres Problem ist die dunkle Senke. Blau zu Rot läuft in sRGB durch `#800080`, ein Lila, das dunkler ist als beide Enden, und so sieht die Mitte des Übergangs aus wie ein blauer Fleck. Die Farben sind keine Gegenfarben, aber der Übergang verliert trotzdem an Helligkeit, wo sie sich treffen.

## Lösung 1: einen Mittelstopp setzen

Die einfachste Lösung funktioniert in jedem Tool und jedem Format: Wähl die Farbe, die du in der Mitte willst, und setz sie selbst dorthin. Nimm eine helle, satte Farbe, die auf dem Farbkreis zwischen den beiden Enden liegt. Zwischen Blau und Gelb ist das Petrol oder Grün. Zwischen Orange und Blau nimmt ein Pink den warmen Weg, den die meisten Sonnenuntergangsverläufe gehen.

- Blau, Petrol, Gelb: `linear-gradient(90deg, #0000ff, #14b8a6 50%, #ffff00)`
- Orange, Pink, Azur: `linear-gradient(90deg, #ff8000, #ec4899 50%, #0080ff)`
- Rot, Violett, Cyan: `linear-gradient(90deg, #ff0000, #8b5cf6 50%, #00ffff)`

Dieselben drei Paare mit einem von Hand gewählten Mittelstopp. Nirgends Grau.

## Lösung 2: in OKLCH mischen

OKLCH beschreibt Farbe als Helligkeit, Chroma (Intensität) und Farbton und wurde so entworfen, dass gleiche Schritte für Menschen wie gleiche Veränderungen aussehen. Mischen in OKLCH hält das Chroma hoch und dreht sich um den Farbkreis, statt ihn geradewegs zu durchqueren, sodass der Übergang nie ins Grau zusammenfällt. In CSS forderst du das mit einem Ausdruck an. Du kannst auch wählen, in welche Richtung es um den Kreis geht.

```css
/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }
```

Interpolations-Schlüsselwörter gehören zu CSS Color Level 4 und funktionieren in aktuellen Versionen der großen Browser.

- OKLCH: über Petrol: `linear-gradient(90deg in oklch, #0000ff, #ffff00)`
- OKLCH, längerer Weg: über Magenta: `linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00)`
- OKLab: gleichmäßig, aber weich: `linear-gradient(90deg in oklab, #0000ff, #ffff00)`

Blau zu Gelb auf drei weitere Arten. OKLab gleicht die Helligkeit aus, zieht Gegenfarben aber noch Richtung Grau; OKLCH erhält die Farbe.

Auch OKLab solltest du kennen. Es ist der Standard der modernen CSS-Farbsyntax und ergibt weiche, gleichmäßige Übergänge, doch weil es weiter in einer geraden Linie läuft, verlieren echte Gegenfarben in der Mitte an Intensität. Nutze OKLab für Farben, die schon nah beieinanderliegen, und OKLCH oder einen Mittelstopp für weit entfernte Farben. Die vollständige Syntax findest du unter [OKLCH-Verläufe in CSS](https://gradiently.design/de/guide/css-gradient-oklch), oder erkunde den Farbraum auf [oklch.com](https://oklch.com).

## Lösung 3: nähere Farbtöne wählen

Der verlässlichste Weg, Matsch zu vermeiden, ist, ihn gar nicht erst herauszufordern. Farben, die auf dem Kreis nebeneinanderliegen, wie Blau und Violett oder Orange und Pink, mischen sich in jedem Farbraum sauber, weil ihre gerade Linie nie in die Nähe von Grau kommt. Deshalb ergeben [analoge Farben](https://gradiently.design/de/guide/analogous-colors) die sichersten Verläufe, und deshalb brauchen Komplementärpaare Sorgfalt; siehe [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors).

| Paar | Standardergebnis | Saubere Brücke |
| --- | --- | --- |
| Blau und Gelb | Flaches Grau | Petrol `#14b8a6` oder Grün `#22c55e` |
| Orange und Blau | Graubraun | Pink `#ec4899` oder Violett `#8b5cf6` |
| Lila und Grün | Stumpfes Graublau | Blau `#0ea5e9` |
| Rot und Cyan | Flaches Grau | Violett `#8b5cf6` |
| Pink und Grün | Matschiges Beige | Blassgelb `#fde68a` oder Lavendel `#c4b5fd` |
| Blau und Rot | Dunkle lila Senke | Helles Magenta `#d946ef` |

Häufige Paare, die standardmäßig matschig werden, und eine Mittelfarbe, die sie sauber hält.

## Lösung 4: auf die Helligkeit achten

Matsch ist nicht nur Grau. Ein Übergang kann auch stumpf wirken, wenn seine Helligkeit in der Mitte absackt oder wenn ein Ende viel dunkler ist als das andere und der Wechsel in einem schmalen Band passiert. Halte die Helligkeit deiner Stopps ungefähr gleich oder ändere sie gleichmäßig in eine Richtung, und gib dem Übergang Raum. Eine Stopp-Position von 40 % oder 60 % wirkt oft natürlicher als mechanische 50 %.

### Wird matschig

- Gegenfarben ohne etwas dazwischen
- Ein helles und ein dunkles Ende, die sich in einem schmalen Band treffen
- Viele unverwandte Farben in einem Übergang
- Bei Komplementärpaaren dem Standardübergang vertrauen

### Bleibt sauber

- Eine gewählte helle Farbe am Mittelpunkt
- Mischen in OKLCH für weit entfernte Farbtöne
- Benachbarte Farbtöne plus ein Akzent
- Den Mittelpunkt vor der Veröffentlichung einzeln prüfen

In [Mesh-Verläufen](https://gradiently.design/de/guide/mesh-gradients), wo mehrere Farben zugleich aufeinandertreffen, wird Matsch noch schlimmer. Für jede Überlagerung gelten dieselben Regeln: Halte Nachbarn nah beieinander und setz eine Brücke zwischen Gegenfarben.

Wenn du lieber mit einem Übergang startest, der schon ausgewogen ist, durchsuch den Markt nach Farbworten wie „Blau und Gelb“ oder „tiefes Petrol“ und gestalte mit jedem Mark, den du findest.

## FAQ

### Warum sieht mein Farbverlauf in der Mitte grau aus?

Deine Farben liegen auf dem Farbkreis fast gegenüber und werden in sRGB gemischt, wo der Mittelpunkt zwischen Gegenfarben grau ist.

### Wie behebe ich einen matschigen Farbverlauf?

Setz einen hellen Mittelstopp zwischen die beiden Farben, misch in OKLCH statt in sRGB oder wähl Farben, die auf dem Farbkreis näher beieinanderliegen.

### Was bedeutet in oklch in einem CSS-Verlauf?

Es sagt dem Browser, die Farben im OKLCH-Farbraum zu mischen, der die Farbintensität erhält und sich um den Farbkreis dreht, statt durchs Grau zu laufen.

### Ist OKLab oder OKLCH besser für Farbverläufe?

OKLab ergibt gleichmäßige, weiche Übergänge für Farben, die nah beieinanderliegen. OKLCH ist besser für weit entfernte Farbtöne, weil es ihre Intensität erhält.

### Welche Farbkombinationen werden nie matschig?

Benachbarte Farbtöne wie Blau und Violett oder Orange und Pink mischen sich in fast jedem Farbraum sauber.