Farbverlauf mit Körnung: warum etwas Rauschen Farbe edel wirken lässt

Ein Farbverlauf mit Körnung, oft Grainy Gradient genannt, ist ein Farbverlauf mit einer feinen Schicht zufälligen Rauschens darüber, sodass die Farbe eine sichtbare Textur hat statt einer perfekt glatten, digitalen Oberfläche. Beliebt wurde er aus einem praktischen und einem visuellen Grund: Körnung verbirgt die Streifen, die glatte Übergänge oft zeigen, und sie lässt Farbe auf einem Bildschirm wie etwas Gedrucktes, Gefilmtes oder Gemaltes aussehen. Gut gemacht bemerken die meisten Menschen die Körnung gar nicht. Sie finden nur, dass die Farbe besser aussieht.

Warum Körnung einen Farbverlauf besser aussehen lässt

Es gibt drei Gründe, und sie verstärken sich gegenseitig.

• Sie verbirgt Banding. Die meisten Bilder haben 256 Abstufungen pro Farbkanal. Ein sanfter Übergang über eine große Fläche muss zwischen ihnen springen, und dein Auge erkennt die Stufen als Streifen. Zufälliges Rauschen verteilt Pixel auf benachbarte Abstufungen, sodass die Kanten zwischen den Stufen verschwinden. Das ist dieselbe Idee wie Dithering. Siehe Banding bei Farbverläufen.
• Sie bringt Haptik. Physische Dinge sind nie perfekt glatt. Film hat Korn, Papier hat Struktur, und gedruckte Farbe liegt ungleichmäßig. Ein wenig Rauschen leiht sich diese Assoziationen, sodass ein flacher digitaler Übergang sich wie ein Material anfühlt.
• Sie übersteht Kompression besser. Social-Plattformen und Messenger komprimieren Bilder neu. Glatte Übergänge sind genau das, was starke Kompression zu Blöcken plattdrückt, und feine Körnung gibt dem Encoder Details, an denen er sich festhalten kann. Teste aber deinen Export: Sehr starke Kompression kann auch Körnung verschmieren.

Wie viel Körnung du hinzufügen solltest

Der häufigste Fehler ist zu viel. Starke Körnung sieht aus wie eine schmutzige Linse oder ein Handyfoto bei wenig Licht. Die richtige Menge hängt von der Größe der ruhigen Fläche ab, davon, wie dunkel der Verlauf ist, und davon, wo er gesehen wird. Betrachte die Zahlen unten als Startwerte für eine Rauschebene im Mischmodus Ineinanderkopieren oder Weiches Licht und urteile dann mit dem Auge in voller Größe.

Wohin die Körnung gehört

Körnung muss nicht gleichmäßig sein. Am natürlichsten wirkt sie auf großen, ruhigen Farbflächen und auf dunklen Tönen, wo Filmkorn auch im echten Leben am sichtbarsten ist. Halte sie hinter kleinem Text leichter, denn Rauschen an den Buchstabenkanten lässt sie weich wirken. Und halte Logo und Schrift über der Körnungsebene, nicht darunter, damit sie scharf bleiben.

So fügst du einem Farbverlauf in CSS Körnung hinzu

Die leichteste Methode ist ein SVG-Rauschfilter als Hintergrundbild. feTurbulence erzeugt zufälliges Rauschen, feColorMatrix entfernt seine Farbe, damit es nicht sprenkelt, und ein Mischmodus mischt es in den Verlauf darunter. Höhere Werte für baseFrequency ergeben feinere Körnung, stitchTiles lässt die Kachel ohne Nähte wiederholen.

.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}

Wenn du lieber ein Bild nimmst, funktioniert ein kleines, kachelbares Rauschbild als PNG genauso wie das SVG. Halte es verlustfrei: JPEG-Rauschkacheln bekommen Kompressionsartefakte. Weitere Muster und Texturtricks ohne Bilder findest du unter Rauschtextur in CSS.

So fügst du in Design-Tools Körnung hinzu

1. 1

   Bau zuerst den Farbverlauf

   Bring Farben, Farbstopps und Komposition auf einer sauberen Ebene in Ordnung. Körnung rettet keinen matschigen Übergang, siehe matschige Farbverläufe.

2. 2

   Füge eine eigene Rauschebene hinzu

   Nutze den Rauscheffekt des Tools oder eine Rauschtextur auf einer eigenen Ebene über dem Verlauf, damit du sie anpassen kannst, ohne die Farbe anzufassen.

3. 3

   Mach sie einfarbig

   Entsättige das Rauschen, damit es keine farbigen Sprenkel hinzufügt, und stell die Ebene dann auf Ineinanderkopieren oder Weiches Licht.

4. 4

   Senk die Deckkraft, bis sie verschwindet, dann geh ein Stück zurück

   Die richtige Menge liegt meist knapp über dem Punkt, an dem du sie nicht mehr bemerkst.

5. 5

   Exportiere in Endgröße, möglichst verlustfrei

   Wer ein körniges Bild hochskaliert, vergrößert die Körnung zu Flecken. Exportiere PNG in exakter Größe oder ein hochwertiges JPEG für Fotos.

Körnung im Druck

Körnung, die für einen Handybildschirm gestaltet ist, kann sich auf Papier anders verhalten. Bei 300 dpi kann sehr feines Rauschen ganz verschwinden, und grobes Rauschen kann wie ein Druckfehler aussehen. Für Poster und Flyer erzeuge die Körnung in Druckauflösung und prüf sie mit einem Proof auf dem echten Papier. Farbverläufe drucken behandelt den Rest des Ablaufs.

Körnung ist außerdem nur eines von mehreren Materialien. Papier, Glas und Seide verändern jeweils, was ein Farbverlauf aussagt, Farbverlauf-Texturen vergleicht sie. Jeder Mark trägt seine eigene Körnungseinstellung neben Farben und Materialien, die Balance steht also schon, wenn du mit dem Gestalten anfängst.