Neun Farbverlauf-Fehler, die Designs billig wirken lassen

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.

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.

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 behandelt beide Methoden, und OKLCH in CSS 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.

Wähle eine Farbfamilie, füge einen helleren und einen dunkleren Verwandten hinzu und erlaube höchstens einen Akzent. Der Ansatz der Analogfarben 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.

.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");
}

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 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.

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 erklärt die Zahlen, und Text auf einem Farbverlauf 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.

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 zeigt geschmackvolle Versionen.

Fehler 7: Körnung, die nicht passt

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 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 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 erklärt, wie du einen besitzt.