Warum dein Farbverlauf Streifen hat und wie du Banding behebst

Banding im Farbverlauf heißt, dass ein sanfter Farbverlauf sichtbare Streifen oder Stufen statt eines kontinuierlichen Übergangs zeigt. Es passiert, weil digitale Bilder pro Farbe nur eine begrenzte Anzahl an Tönen speichern können, meist 256 pro Kanal, und wenn sich ein Farbverlauf langsam über eine breite Fläche ändert, muss jeder Ton ein Band aus Pixeln abdecken. Dein Auge erkennt Kanten sehr gut und hebt diese Bänder heraus. Die Lösung ist meist, feine Körnung hinzuzufügen, mit weniger Kompression zu exportieren oder dem Übergang mehr Farbe zum Arbeiten zu geben.

Was Banding im Farbverlauf verursacht

Die meisten Bilder nutzen 8 Bit pro Kanal: je 256 mögliche Werte für Rot, Grün und Blau. Das klingt nach reichlich, und für einen kräftigen Farbverlauf ist es das auch. Das Problem beginnt, wenn die Farben an beiden Enden nah beieinanderliegen.

Nimm einen grauen Farbverlauf von #202020 zu #303030 über einen Bildschirm mit 1920 Pixeln Breite. Jeder Kanal bewegt sich nur von 32 bis 48, das sind 16 Stufen. Der Farbverlauf enthält also 16 verschiedene Töne, jeder etwa 120 Pixel breit. Keine Software kann ihn glatter machen, weil es keine Töne dazwischen gibt.

Wo Banding am häufigsten auftritt

Deshalb brauchen dunkle Farbverlauf-Hintergründe und Aurora-Farbverläufe die meiste Sorgfalt. Ihre Schönheit hängt von langen, sanften Verläufen durch dunkle Töne ab, genau das Rezept für Banding.

So behebst du Banding im Farbverlauf

1. 1

   Körnung oder Dithering hinzufügen

   Eine feine Schicht zufälligen Rauschens verstreut Pixel zwischen benachbarten Tönen, sodass das Auge die Kanten nicht mehr findet. Es ist die verlässlichste Lösung und lässt die Oberfläche außerdem reicher wirken. Siehe körnige Farbverläufe.

2. 2

   Dem Übergang mehr Spanne geben

   Größere Unterschiede in Helligkeit oder Farbton zwischen den Endfarben bedeuten mehr verfügbare Stufen und schmalere Bänder. Ein Farbverlauf, der auch den Farbton etwas verschiebt, nutzt mehr Kombinationen aus Rot, Grün und Blau als eine reine Helligkeitsrampe.

3. 3

   Wo möglich in 16 Bit arbeiten

   Bildeditoren, die 16 Bit pro Kanal unterstützen, behalten beim Arbeiten weit mehr Stufen. Wandle erst beim Export in 8 Bit um, mit eingeschaltetem Dithering.

4. 4

   In hoher Qualität exportieren

   Nutze PNG für flache Grafiken oder JPEG mit hoher Qualitätseinstellung für fotografische Bilder. Meide GIF und PNG-8, die insgesamt nur 256 Farben behalten.

5. 5

   In der endgültigen Größe exportieren

   Ein kleines Farbverlaufsbild hochzuskalieren streckt seine Bänder. Rendere oder exportiere in der exakten Größe oder größer, statt hochzuskalieren.

Banding in CSS-Farbverläufen beheben

Browser rendern CSS-Farbverläufe live, es gibt also keine Exporteinstellung zu ändern. Zwei Dinge helfen. Erstens: die Rampe verbreitern oder eine Farbtonverschiebung hinzufügen. Zweitens: eine dezente Rauschschicht über den Farbverlauf legen, die genau wie Körnung in einem Bild wirkt. CSS-Rauschtextur zeigt leichte Wege, diese Schicht ohne große Bilddateien zu machen.

Banding in Video und Social-Uploads beheben

Soziale Plattformen komprimieren hochgeladene Inhalte neu, und Video-Codecs sind dafür gebaut, genau die Art feiner Details wegzuwerfen, die Farbverläufe glatt hält. Körnung hilft hier doppelt: Sie verbirgt Stufen und gibt dem Encoder echte Details zum Behalten. Lade in der empfohlenen Größe der Plattform hoch, damit nicht nochmals skaliert wird, und exportiere Video mit großzügiger Qualitätseinstellung. Kodierst du mit ffmpeg, hat x264 eine Einstellung, die darauf abgestimmt ist, Körnung zu erhalten.

# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4

Loop-Videohintergründe sind dafür besonders anfällig, weil sie meist dunkel und langsam sind. Nahtlose Loop-Videos behandelt den Rest des Exports.

Banding von Anfang an verhindern

• Wähle Farbverläufe mit genug Helligkeits- oder Farbtonänderung für ihre Größe
• Plane Körnung von Anfang an ein, statt sie als Rettung nachzurüsten
• Halte dunkle Farbverläufe etwas angehoben, statt bis zu reinem Schwarz zu rutschen
• Prüfe nach dem Hochladen auf einem Handy, nicht nur auf deinem Design-Monitor

Jeder Mark in Gradiently wird live in der Größe gerendert, in der du gestaltest, mit seiner Körnung als Teil des Rezepts, und Designs mit einem gesicherten Mark lassen sich als PNG oder JPEG bis zur dreifachen Größe des Designs exportieren, sodass ein Farbverlauf nie aus einem kleinen Bild gestreckt werden muss.