# Neun Farbverlauf-Fehler, die Designs billig wirken lassen

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

Die meisten Farbverläufe, die billig aussehen, scheitern auf eine von neun vorhersehbaren Arten. Hier ist jeder Fehler, seine Ursache und die konkrete Änderung, die ihn behebt.

## The short version

- Die meisten Farbverlauf-Fehler haben wenige Ursachen: Farben, die durch Grau laufen, zu viele Stopps, sichtbares Banding, schwacher Textkontrast und unangetastete Voreinstellungen.
- Ein Verlauf zwischen zwei gegenüberliegenden Farbtönen wird in sRGB in der Mitte oft grau, was ein Zwischenstopp oder OKLCH-Interpolation behebt.
- Banding zeigt sich als sichtbare Streifen in langsamen, dunklen oder feinen Verläufen, und eine leichte Schicht Körnung oder Dithering verdeckt es meist.
- Bei Text auf einem Verlauf muss der Kontrast an der schlechtesten Stelle geprüft werden, nicht an der besten, weil sich der Hintergrund unter jedem Buchstaben ändert.
- Ein Verlauf wirkt hochwertig, wenn er eine klare Struktur, drei bis fünf verwandte Farben, eine konsistente Textur und einen Grund zu existieren hat.

Die häufigsten **Farbverlauf-Fehler** sind graue, schlammige Mitten, zu viele Farben, sichtbares Banding, Text, der verschwindet, harte Stopps, Regenbogen-Überladung, nicht passende Körnung, unangetastete Voreinstellungen und ein Look, der dem aller anderen gleicht. Jeder hat eine bestimmte Ursache und eine bestimmte Lösung. Keiner braucht ein neues Tool, nur einen genaueren Blick darauf, was die Mischung zwischen ihren Stopps tut.

Dieser Leitfaden geht die neun in der Reihenfolge durch, in der man ihnen meist begegnet, von der Farbmathematik bis zur Identität. Wenn du zuerst die Grundlagen willst, lies [Was ist ein Farbverlauf](https://gradiently.design/de/guide/what-is-a-gradient).

## Fehler 1: eine graue, schlammige Mitte

Mische zwei Farben von gegenüberliegenden Seiten des Farbkreises, etwa Blau und Orange, und der halbe Weg ist in sRGB ein stumpfes Graubraun. Der Browser mittelt die Kanäle Rot, Grün und Blau, und der Mittelwert zweier Komplementärfarben liegt nahe an Neutral. Das Ergebnis sieht aus wie ein Fleck zwischen zwei guten Farben.

- Vorher: direkt von Blau zu Bernstein: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Nachher: Magenta als Mitte: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Nachher: in OKLCH interpoliert: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

Dieselben zwei Enden, drei Ergebnisse. Ein Zwischenstopp oder OKLCH-Interpolation hält die Mitte gesättigt.

Behebe es, indem du die Mischung über eine Farbe führst, die auf dem Kreis zwischen beiden liegt, oder in einem wahrnehmungsbasierten Farbraum interpolierst. [Schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) behandelt beide Methoden, und [OKLCH in CSS](https://gradiently.design/de/guide/css-gradient-oklch) erklärt die Syntax.

## Fehler 2: zu viele Farben

Jede Farbe, die du hinzufügst, ist ein weiterer Übergang, den das Auge lesen muss. Ab vier oder fünf Stopps wirkt ein Verlauf nicht mehr wie Licht, das über eine Fläche fällt, sondern wie ein Streifendiagramm. Außerdem lässt er sich nicht zweimal auf dieselbe Weise nachbauen.

- Sieben Stopps: unruhig: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Drei verwandte Stopps: ruhig: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Drei verwandte Farben geben mehr Tiefe als sieben unverwandte.

Wähle eine Farbfamilie, füge einen helleren und einen dunkleren Verwandten hinzu und erlaube höchstens einen Akzent. Der Ansatz der [Analogfarben](https://gradiently.design/de/guide/analogous-colors) ist der sicherste Startpunkt.

## Fehler 3: Banding-Streifen

Banding ist die Treppe sichtbarer Stufen, die du in einem langsamen Verlauf siehst, besonders in einem dunklen. Ein 8-Bit-Kanal hat 256 Stufen, und wenn eine Mischung über eine breite Fläche nur einen kurzen Farbweg zurücklegt, wird jede Stufe zu einem mehrere Pixel breiten Streifen. Starke JPEG-Kompression verschlimmert es.

```css
.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Eine feine Rauschschicht bei etwa 8 % Deckkraft bricht die Streifen auf, ohne schmutzig zu wirken.

Körnung funktioniert, weil sie Pixel über benachbarte Stufen streut, sodass die Kante zwischen zwei Streifen verschwindet. Exportiere als PNG oder JPEG in hoher Qualität. [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) geht die Export-Einstellungen im Detail durch.

## Fehler 4: Text, der auf dem Verlauf verschwindet

Ein Verlauf verändert sich unter jedem Buchstaben. Weiße Schrift kann am dunklen Ende einer Mischung wunderbar lesbar sein und am hellen Ende derselben Zeile verschwinden. Designer prüfen die Überschrift dort, wo sie am besten aussieht, und Leser begegnen ihr dort, wo sie am schlechtesten aussieht.

Ein Post im Hochformat mit einer Überschrift direkt auf einem unruhigen Farbverlauf, einige Buchstaben verlieren Kontrast

Der Hintergrund läuft direkt durch die Worte, sodass manche Buchstaben auf heller Farbe sitzen.

Derselbe Post im Hochformat, bei dem der Verlauf hinter der Überschrift in eine ruhige, dunklere Fläche übergeht

Dasselbe Design, mit der ruhigen Stelle der Fläche hinter dem Text.

Prüfe den Kontrast an der hellsten Stelle hinter heller Schrift oder an der dunkelsten hinter dunkler Schrift. WCAG verlangt 4,5:1 für Fließtext und 3:1 für große Schrift. [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Zahlen, und [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) behandelt die Platzierung.

## Fehler 5: harte, zufällige Stopps

Wenn zwei Stopps nur wenige Prozent auseinanderliegen, springt die Mischung von einer Farbe zur nächsten und zeichnet eine Linie, die niemand bestellt hat. Harte Stopps sind mit Absicht nützlich, für Streifen und Diagramme, aber eine zufällige Naht wirkt wie ein Fehler.

- Stopps 8 % auseinander: sichtbare Naht: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Verteilte Stopps: weich fallendes Licht: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

Gib jedem Übergang echten Raum in der Fläche.

## Fehler 6: Regenbogen-Überladung

Ein volles Spektrum ist das Lauteste, was ein Verlauf tun kann, und sagt selten etwas über die Marke, die ihn nutzt. Es trägt außerdem die Assoziationen jedes Farbtons gleichzeitig. Wenn du einen Regenbogen willst, nimm einen kurzen Bogen davon und steuere die Helligkeit. [Regenbogen-Farbverläufe](https://gradiently.design/de/guide/rainbow-gradient) zeigt geschmackvolle Versionen.

## Fehler 7: Körnung, die nicht passt

### Vermeiden

- Grobe Körnung auf dem Post, feine auf der Story, keine auf den Folien
- Körnung über Text und Logos
- Körnung so stark, dass sie wie ein schmutziges Objektiv wirkt
- Eine Körnungstextur hochskalieren, sodass jedes Pünktchen zum Klecks wird

### Besser

- Eine Körnungsgröße und -stärke für jedes Format
- Körnung nur auf der Hintergrundebene
- Gerade genug, um Banding zu brechen und Struktur zu geben
- Körnung in der Exportgröße erzeugt, nicht gestreckt

Textur ist Teil eines Looks, deshalb lässt uneinheitliche Körnung eine Reihe von Designs so wirken, als kämen sie aus drei verschiedenen Quellen. [Körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) behandelt, wie viel du einsetzen solltest.

## Fehler 8: die Voreinstellung unverändert übernehmen

Die meisten Tools bieten dieselben Zweifarb-Mischungen bei 135 Grad. Sie sehen gut aus, deshalb sind sie überall. Eine Voreinstellung ist ein Startpunkt: Verschiebe eine Farbe, füge einen dritten Stopp hinzu, passe die Richtung dem Layout an und ergänze ein Material. [Einen Farbverlauf-Generator nutzen](https://gradiently.design/de/guide/gradient-generator) führt dich durch diese Änderungen.

## Fehler 9: aussehen wie alle anderen

Der letzte Fehler ist der teure. Ein Verlauf, der gut gemacht ist, aber im Geist dem jedes Mitbewerbers gleicht, leistet nichts für die Wiedererkennung. Die Lösung ist Konsistenz plus etwas, das schwer zu kopieren ist, etwa ein Material, eine Art der Bewegung oder die Art, Platz für Worte zu machen. [Farbverlauf-Branding](https://gradiently.design/de/guide/gradient-branding) erklärt, wie du einen besitzt.

| Fehler | Schnelle Lösung |
| --- | --- |
| Graue Mitte | Zwischenstopp oder OKLCH-Interpolation |
| Zu viele Farben | Eine Farbfamilie plus ein Akzent |
| Banding | Feine Körnung, Export als PNG oder in hoher Qualität |
| Unlesbarer Text | Kontrast an der schlechtesten Stelle prüfen |
| Harte Stopps | Stopps auseinanderziehen, außer die Kante ist gewollt |
| Regenbogen-Überladung | Einen kurzen Bogen des Spektrums nutzen |
| Nicht passende Körnung | Ein Körnungsrezept für jedes Format |
| Unangetastete Voreinstellung | Farbe, Stopps, Richtung und Textur ändern |
| Wie alle anderen | Ein Material ergänzen und konsistent halten |

Die neun Lösungen auf einer Seite.

## FAQ

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

Farben von gegenüberliegenden Seiten des Kreises mitteln sich in sRGB zu nahezu Neutral. Füge einen Zwischenstopp in einem Farbton zwischen ihnen hinzu oder interpoliere in OKLCH.

### Wie verhindere ich Banding in einem Farbverlauf?

Füge eine feine Rausch- oder Körnungsschicht mit geringer Deckkraft hinzu, vermeide starke JPEG-Kompression und gib dunklen Verläufen einen größeren Helligkeitsbereich zum Durchlaufen.

### Wie viele Farben sollte ein Farbverlauf haben?

Meist zwei bis vier verwandte Farben, höchstens mit einem Akzent. Ab fünf Stopps wirken die meisten Verläufe unruhig.

### Wie mache ich Text auf einem Farbverlauf lesbar?

Setze den Text auf die ruhigste Stelle der Fläche und prüfe den Kontrast dort, wo der Hintergrund deinem Text in der Helligkeit am nächsten kommt. Ziele auf 4,5:1 für Fließtext und 3:1 für große Schrift.

### Sind Farbverlauf-Voreinstellungen schlecht?

Nein, aber viele Menschen teilen sie sich. Behandle eine Voreinstellung als Startpunkt und ändere Farben, Stopps, Richtung und Textur, bevor du sie nutzt.