Verläufe, Banding und warum die Mitte matschig aussieht

Der Mittelwert wird in den falschen Einheiten gebildet

Ein linear-gradient in CSS tut das Naheliegende: Für jedes Pixel berechnet es eine Position t zwischen 0 und 1 und gibt die mit t gemischten Endfarben zurück. Die Feinheit ist, was es mischt. Ein Hex-Code ist keine Lichtmessung; er ist ein Codewort, und sRGB vergibt diese Codewörter absichtlich nichtlinear, damit die 256 verfügbaren Werte dort ausgegeben werden, wo das menschliche Sehen sie unterscheiden kann. Der gespeicherte Wert ist ungefähr das Licht hoch 1/2,2, nicht das Licht selbst.

Die sRGB-Übertragungsfunktion steht ausgeschrieben in der Norm und ist leicht zu implementieren. Zum Decodieren teile den 8-Bit-Wert durch 255, um c zu erhalten, und gib c ÷ 12,92 zurück, wenn c höchstens 0,04045 ist, sonst ((c + 0,055) ÷ 1,055) hoch 2,4. Zum Codieren kehre das um: unterhalb von 0,0031308 mit 12,92 multiplizieren, sonst 1,055 mal den Wert hoch 1/2,4, minus 0,055. Diese beiden Funktionen genügen, um zwischen Codewörtern und Licht zu wechseln.

Schick eine einzige Zahl hindurch, und das Ausmaß des Problems ist schon sichtbar. Halbes Licht — linear 0,5 — codiert zu 0,735357, das sind 8-Bit 188, also #bcbcbc. Die Farbe, die die meisten fünfzigprozentiges Grau nennen, #808080, decodiert zu 0,215861. Sie ist die Hälfte von gar nichts. Sie ist das Codewort in der Mitte des Codes, was etwas völlig anderes ist als die Mitte des Lichts.

Rot nach Grün, auf beide Arten gemessen

Nimm #ff0000 nach #00ff00 und berechne die Mitte zweimal. Der naive Weg mittelt die gespeicherten Werte: (255 + 0) ÷ 2 = 127,5 für Rot, ebenso für Grün, 0 für Blau. Das ergibt #808000, und durch die WCAG-Leuchtdichteberechnung geschickt: 0,1986. Der richtige Weg decodiert zuerst: Rot wird linear (1, 0, 0) und Grün (0, 1, 0), der Mittelwert ist (0,5, 0,5, 0), und das Zurückcodieren ergibt 187,5 in beiden Kanälen — #bcbc00, mit der Leuchtdichte 0,4639.

Die zweite Zahl lässt sich unabhängig prüfen: Die relative Leuchtdichte von #ff0000 ist 0,2126 und die von #00ff00 ist 0,7152, ihr Mittel 0,4639 — genau das, was die lineare Mitte misst. Das ist die Definition von halbwegs im Licht, und die lineare Methode reproduziert sie bis zur letzten Stelle. Die sRGB-Mitte liefert stattdessen 0,1986, also 57,2 % weniger. Deutlich mehr als die Hälfte des Lichts, das in der Verlaufsmitte sein sollte, fehlt.

Dasselbe Defizit tritt überall dort auf, wo die beiden Enden im Coderaum weit auseinanderliegen. Schwarz nach Weiß: sRGB-Mitte #808080 bei Leuchtdichte 0,2140, lineare Mitte #bcbcbc bei 0,5000, dasselbe Defizit von 57,2 %. Weiß nach Blau: #8080ff bei 0,2708 gegen #bcbcff bei 0,5361, ein Defizit von 49,5 %. Es ist keine Eigenart bestimmter Farben, sondern die Form der Übertragungsfunktion — und sie gilt für jeden Standardverlauf im Web.

Blau nach Gelb wird grau — ein anderer Fehler mit einer anderen Abhilfe

Es liegt nahe, auch die graue Mitte eines Blau-Gelb-Verlaufs dem Gammaproblem anzulasten — und das erweist sich als falsch. Berechne beide Mitten für #0000ff nach #ffff00. Die sRGB-Mitte ist #808080 mit der Leuchtdichte 0,2140. Die Mitte im linearen Licht ist #bcbcbc mit 0,5000. Die lineare Fassung ist deutlich heller, genau wie der vorige Abschnitt vorhersagt — und sie ist immer noch vollkommen neutrales Grau. In OKLCH gemessen haben beide ein Chroma von 0,000. Das Rechnen im linearen Licht hat die Dunkelheit behoben und gegen das Grau gar nichts ausgerichtet.

Der Grund: Blau und Gelb liegen im RGB-Würfel nahezu gegenüber, das Mitteln ihrer Kanäle löscht die Farbe also aus, in welchen Einheiten auch immer. Jede rechtwinklige Interpolation — sRGB, lineares sRGB, selbst OKLab, das trotz seiner Wahrnehmungsbezogenheit rechtwinklig ist — läuft auf einer Geraden durch die Mitte des Farbraums, und die Mitte des Farbraums ist neutral. Nur eine polare Interpolation, die Chroma mitführt und den Farbton dreht, statt gegenläufige Kanäle zu mitteln, geht außen herum.

Eine sauberere Demonstration nimmt ein Paar, das im sRGB-Gamut bleibt: #007bff nach #ff6b00, ein Blau und ein Orange mit den OKLCH-Farbtönen 257,2° und 45,1°. In schlichtem sRGB ist die Mitte #807380, ein matschiges Graumauve mit einem OKLCH-Chroma von 0,024 — die Farbe ist praktisch tot. In linearem sRGB ist es #bc73bc, Chroma 0,131. In OKLab #a285a5, Chroma 0,058. In OKLCH über den kürzeren Farbtonbogen #d454c9, Chroma 0,208: ein kräftiges Magenta, und das Chroma entspricht nun ungefähr dem Mittel der Endwerte statt einem Bruchteil davon. Dieselben zwei Stopps, fünf verschiedene Mitten.

Banding: 256 Werte über 2560 Pixel gestreckt

Banding hat nichts mit dem Interpolationsraum zu tun. Es ist ein Zählproblem. Ein 8-Bit-Kanal hat 256 mögliche Werte, ein Verlauf kann also nie mehr verschiedene Farben enthalten, als seine Endpunkte überspannen. Wird eine Rampe über mehr Pixel gezeichnet, als sie verschiedene Werte hat, müssen sich Werte wiederholen, und jeder wiederholte Lauf ist ein flacher Streifen.

Rastert man die Rampen pixelweise und zählt, ergeben sich die echten Zahlen. Ein voller Schwarz-Weiß-Verlauf enthält 256 verschiedene Farben, egal wie breit er gezeichnet wird. Über 320 Pixel beträgt das mittlere Band 1,3 Pixel und der längste flache Lauf 2 Pixel — das sieht niemand. Über 1920 Pixel steigt das Mittel auf 7,5 Pixel und der längste Lauf auf 8. Über 2560 Pixel sind es 10,0 und 11 — ein sichtbarer Streifen, auf dem größtmöglichen Tonumfang.

Echte Verläufe sind weit schlimmer, denn Designer schöpfen den Bereich selten aus. Ein modisches dunkles Hero von #1a1a2e nach #16213e enthält gerade 28 verschiedene Farben. Über 1920 Pixel ergibt das ein mittleres Band von 68,6 Pixeln, der längste flache Lauf erreicht 120 Pixel. Über 2560 Pixel liegt das Mittel bei 91,4 Pixeln. Eine dezente Weiß-auf-Weiß-Fläche von #ffffff nach #f5f5f5 enthält 11 Farben: Bei 1920 Pixeln ist das mittlere Band 174,5 Pixel breit. Das sind keine Artefakte, die ein Besucher vielleicht bemerkt, sondern Streifen breiter als ein Button.

Daraus fällt eine brauchbare Regel ab. Nimmt man 3 Pixel als die Breite, ab der ein flaches Band als Kante statt als weicher Ton gelesen wird, wird Banding sichtbar, sobald die gezeichnete Breite das Dreifache der Anzahl verschiedener Stufen übersteigt. Eine volle 256-Stufen-Rampe hält bis 768 Pixel. Eine 52-Stufen-Rampe hält bis 156. Das 28-Stufen-Hero hält bis 84 Pixel, die 11-Stufen-Fläche bis 33. Fast jeder dekorative Verlauf auf einer modernen Seite wird weit über seine Grenze hinaus gezeichnet.

Dithering, und was mehr Bits brächten

Dithering ist die Standardabhilfe und funktioniert, indem es eine Fehlerart gegen eine andere tauscht. Statt jedes Pixel auf den nächsten verfügbaren Wert zu runden, addiert man vor dem Runden etwas Rauschen, sodass Pixel nahe einer Grenze sich im Verhältnis ihrer Nähe auf die beiden Nachbarwerte verteilen. Der Mittelwert über jede kleine Fläche stimmt dann, obwohl kein einzelnes Pixel stimmt, und das Auge integriert die Fläche statt des Pixels. Der sichtbare Streifen weicht einer feinen Körnung.

Im Web kontrolliert man den Rasterisierer selten, Dithering wird daher meist von Hand aufgebracht: eine gekachelte, sehr kontrastarme Rauschtextur mit ein bis zwei Prozent Deckkraft über den Verlauf legen oder den Verlauf als SVG mit einer feTurbulence-Ebene erzeugen. Beides bricht die flachen Läufe auf. Der Kniff ist, das Rauschen unter der Schwelle zu halten, ab der es als Textur gelesen wird — siehst du die Körnung, hast du übertrieben und einen Streifen gegen eine schmutzige Fläche getauscht.

Mehr Bits würden den Bedarf ganz beseitigen. Bei 10 Bit je Kanal gibt es 1024 Stufen, und dieselbe Vollbereichsrampe über 1920 Pixel ergibt ein mittleres Band von 1,88 Pixeln — unterhalb der Sichtbarkeitsschwelle, also ohne Dithering. Weitgamut-Displays und HDR-Pipelines liefern diese Tiefe zunehmend, und CSS-Farben in oklch() oder mit der color()-Funktion können sie ausdrücken. Die Einschränkung ist die ganze Kette: Ein 10-Bit-Wert, der in einen 8-Bit-Puffer komponiert wird, ist wieder ein 8-Bit-Wert.

Die CSS-Schlüsselwörter: in oklch, in lab und die Farbtonrichtung

CSS Color 4 erlaubt es, den Interpolationsraum direkt in der Verlaufsfunktion zu benennen: linear-gradient(in oklch, #007bff, #ff6b00). Zu den zulässigen Räumen zählen srgb, srgb-linear, lab, oklab, lch, oklch, hsl, hwb und xyz. Die rechtwinkligen — srgb, srgb-linear, lab, oklab, xyz — interpolieren die Koordinaten komponentenweise. Die polaren — hsl, hwb, lch, oklch — interpolieren einen Farbtonwinkel, und dort wohnen die Überraschungen.

Bei einem polaren Raum darfst du eine Farbton-Interpolationsmethode anhängen: shorter, longer, increasing oder decreasing, jeweils gefolgt vom Wort hue. Shorter nimmt den Bogen von höchstens 180°, den Standardfall. Longer nimmt den Gegenbogen, also den langen Weg. Increasing zwingt den Winkel zu steigen, decreasing zu fallen. Durchgerechnetes Beispiel: Interpoliert man Farbton 20 nach Farbton 320, ergibt shorter einen Bogen von −60° und den Pfad 20, 5, 350, 335, 320, während longer einen Bogen von +300° und den Pfad 20, 95, 170, 245, 320 ergibt — durch Grün und Blau, ein völlig anderer Verlauf aus denselben zwei Stopps.

In polaren Räumen ist noch etwas zu beachten. OKLCH kann Farben außerhalb des sRGB-Gamuts beschreiben, und der polare Pfad wölbt sich nach außen: Die OKLCH-Mitte von Blau #0000ff und Gelb #ffff00 berechnet sich zu Koordinaten, die auf ein RGB-Tripel außerhalb des Bereichs abbilden, und muss vor der Anzeige gamut-gemappt werden. Browser erledigen das, doch das Ergebnis trägt weniger Chroma, als die Arithmetik verlangt hat — ein im Farbwähler strahlender Verlauf kann also merklich zahmer auf dem Bildschirm ankommen. Das oben verwendete Paar innerhalb des Gamuts vermeidet das Problem vollständig, und das ist die praktische Lehre: Prüfe die Mitte, nicht nur die Enden.

Auf Transparenz ausblenden und vormultipliziertes Alpha

Der letzte klassische Verlaufsfehler ist der graue Schleier am Ende einer Ausblendung auf Transparenz. Er tritt auf, wenn die Interpolation Farbe und Alpha als vier unabhängige Zahlen behandelt. Blende Weiß nach `transparent` aus: Da das CSS-weite Schlüsselwort `transparent` rgb(0 0 0 / 0) bedeutet — transparentes Schwarz —, wird der Farbkanal von Weiß Richtung Schwarz gezogen, während das Alpha fällt. In der Mitte ist die Farbe 50 % Grau und das Alpha 0,5, über einer weißen Seite rendert das Pixel also als #bfbfbf: ein sichtbares schmutziges Band dort, wo eine saubere Ausblendung sein sollte.

Vormultipliziertes Alpha beseitigt das Artefakt. Multipliziere vor dem Interpolieren jeden Farbkanal mit seinem eigenen Alpha; interpoliere die vormultiplizierten Kanäle und das Alpha gemeinsam; teile am Ende wieder heraus. Ein vollständig transparenter Stopp trägt nichts zur Farbe bei, denn seine vormultiplizierten Kanäle sind alle null, er kann die sichtbare Farbe also nirgendwohin ziehen. Dieselbe Ausblendung von Weiß nach transparentem Schwarz ergibt vormultipliziert in der Mitte #ffffff über weißem Grund statt #bfbfbf und #808080 über schwarzem statt #404040.

CSS-Verläufe sind so spezifiziert, dass sie im vormultiplizierten Raum interpolieren, moderne Browser machen das also richtig. Die manuelle Abhilfe — kennenswert, weil sie in Canvas-Code, SVG, Bildeditoren und älteren Engines fortlebt — besteht darin, den transparenten Stopp ausdrücklich in der Farbe zu benennen, aus der du ausblendest: rgb(255 255 255 / 0) statt des Schlüsselworts `transparent`. Berechne beide Mitten, und die Gleichheit ist exakt: Weiß auf transparentes Weiß auszublenden ergibt in beiden Methoden, vormultipliziert oder nicht, #ffffff über Weiß und #808080 über Schwarz.

Häufige Fragen

Warum hat mein Zweifarbverlauf ein dunkles Band in der Mitte?

Weil der Browser gammacodierte Zahlen gemittelt hat statt Licht. sRGB speichert einen Wert nahe dem Licht hoch 1/2,2, das arithmetische Mittel zweier gespeicherter Werte entspricht also weit weniger Licht als das Mittel der beiden Lichtmengen. Rot #ff0000 nach Grün #00ff00 macht es greifbar: Die schlichte sRGB-Mitte ist #808000 mit einer relativen Leuchtdichte von 0,1986, während die echte Halblicht-Mitte #bcbc00 bei 0,4639 liegt — genau das Mittel der Endleuchtdichten 0,2126 und 0,7152. Das Standardverhalten bleibt 57,2 % unter dem Licht, das es tragen sollte, und dieses Defizit ist das dunkle Band. Die Einzeiler-Abhilfe in CSS ist, einen besseren Interpolationsraum zu benennen: linear-gradient(in oklab, red, lime) oder linear-gradient(in srgb-linear, red, lime). Beide heben die Mitte an. Soll die Mitte außerdem farbig bleiben statt neutral zu werden, brauchst du einen polaren Raum — in oklch —, denn das ist ein eigenes Problem, beschrieben in der nächsten Antwort.

Warum läuft Blau nach Gelb selbst in einem besseren Farbraum durch Grau?

Weil Grauwerden und Dunkelwerden verschiedene Fehler sind. Blau und Gelb liegen nahezu gegenüber, das Mitteln ihrer Kanäle löscht die Farbe also in jeder Einheit aus. Die Zahlen bestätigen es: Die sRGB-Mitte von #0000ff und #ffff00 ist #808080 mit der Leuchtdichte 0,2140, die Mitte im linearen Licht #bcbcbc mit 0,5000. Die lineare Fassung ist weit heller, wie erwartet, und beide haben ein OKLCH-Chroma von 0,000 — vollkommen neutral. Selbst OKLab, obwohl wahrnehmungsbezogen, liefert #6cabc7 mit einem Chroma von nur 0,077, denn OKLab ist rechtwinklig, und eine Gerade zwischen zwei gegenüberliegenden Farben läuft durch die Neutralachse. Nur eine polare Interpolation vermeidet das, weil sie den Farbton dreht und Chroma mitführt, statt gegenläufige Kanäle zu mitteln. Nimm linear-gradient(in oklch, blue, yellow). Beachte, dass für dieses Paar die polare Mitte außerhalb des sRGB-Gamuts liegt und gamut-gemappt wird, du bekommst also weniger Chroma als versprochen. Willst du sicher eine kräftige Mitte, füge einen ausdrücklichen Mittelstopp in dem Farbton hinzu, den du wirklich willst.

Wie breit darf ein Verlauf sein, bevor Banding einsetzt?

Das hängt ganz davon ab, wie weit die Endpunkte auseinanderliegen, nicht von der Größe des Elements. Zähle die verschiedenen 8-Bit-Farben, die die Rampe enthalten kann, und multipliziere mit etwa drei: Nimmt man 3 Pixel als die Breite, ab der ein flaches Band als Kante gelesen wird, ist dieses Produkt die Breite, ab der Banding auftritt. Eine volle Schwarz-Weiß-Rampe fasst 256 Farben und hält bis rund 768 Pixel. Eine Rampe von #0f172a zu einem benachbarten Schiefer fasst 52 Farben und hält bis 156. Ein modisches dunkles Hero von #1a1a2e nach #16213e fasst nur 28 Farben und bandet jenseits von 84 Pixeln — es bandet also in jedem Layout, in dem es je erscheint. Eine fast weiße Fläche von #ffffff nach #f5f5f5 fasst 11 Farben und gibt bei 33 Pixeln auf; über 1920 gezeichnet ist ihr mittleres Band 174,5 Pixel breit. Drei praktische Züge: den tonalen Abstand zwischen den Stopps vergrößern, damit mehr Stufen zur Verfügung stehen; eine schwache Rauschebene mit ein bis zwei Prozent Deckkraft auflegen, um die Grenzen zu dithern; oder den Verlauf diagonal statt geradeaus führen, was die Rampe relativ zum Element verlängert und die Bandkanten aus der Flucht des Layouts bringt.

Was macht `longer hue` genau, und wann will man das?

Es zwingt den Farbton, den langen Weg um den Kreis zu nehmen statt den kurzen Bogen. Bei einer polaren Interpolation hat der Browser zwei Kandidatenpfade zwischen zwei Farbtonwinkeln und wählt standardmäßig den von höchstens 180°. Interpoliert man Farbton 20 nach Farbton 320, ergibt `shorter hue` einen Bogen von −60° und läuft über 5, 350 und 335 — ein kurzer Lauf durch Rottöne. `longer hue` ergibt einen Bogen von +300° und läuft über 95, 170 und 245 — Grün, Cyan und Blau, faktisch das ganze Spektrum. Dieselben zwei Stopps, völlig anderer Verlauf. Zu dem Schlüsselwort greift man, wenn man aus zwei Endpunkten einen Regenbogenverlauf will, ohne Zwischenstopps zu schreiben — üblich bei Fortschrittsanzeigen, Datenvisualisierungsrampen und dekorativen Rändern. Es gibt zwei weitere Schlüsselwörter: `increasing hue` zwingt den Winkel zu steigen und `decreasing hue` zu fallen, damit steuerst du die Richtung und nicht bloß die Länge. Achte auf den Grenzfall, in dem die beiden Farbtöne genau 180° auseinanderliegen: shorter und longer beschreiben dann dieselbe Bogenlänge, und du musst increasing oder decreasing verwenden, um die Richtung zu sagen.

Warum sieht meine Ausblendung auf Transparenz am Rand schmutzig aus?

Fast immer, weil der transparente Stopp transparentes Schwarz ist. Das CSS-weite Schlüsselwort `transparent` expandiert zu rgb(0 0 0 / 0), ein Verlauf von Weiß `to transparent` zieht den Farbkanal also von Weiß Richtung Schwarz, während das Alpha fällt. Werden Farbe und Alpha unabhängig interpoliert, ist die Mitte 50 % Grau bei Alpha 0,5, was über einer weißen Seite als #bfbfbf komponiert — ein sichtbarer grauer Schleier. Im vormultiplizierten Raum zu interpolieren behebt das: jede Farbe vor dem Mischen mit ihrem Alpha multiplizieren, mischen, danach wieder herausteilen; ein vollständig transparenter Stopp trägt dann nichts zur Farbe bei, weil seine vormultiplizierten Kanäle null sind. Dieselbe Mitte komponiert dann zu #ffffff über Weiß und #808080 über Schwarz. CSS-Verläufe sind vormultipliziert spezifiziert, aktuelle Browser liegen hier also richtig; der Fehler lebt in Canvas-Code, SVG, Bildeditoren und älteren Engines fort. Die portable Abhilfe ist, den Stopp in der Farbe zu schreiben, aus der du ausblendest — rgb(255 255 255 / 0) statt `transparent` —, was unter beiden Methoden identische Ergebnisse liefert und nichts kostet.