Was ist ein Farbverlauf? Ein einfacher Leitfaden zu Farbübergängen

Was ist ein Farbverlauf? Im Design ist ein Farbverlauf ein weicher, allmählicher Wechsel von einer Farbe zur anderen über eine Fläche, etwa ein tiefes Blau, das auf einem Poster in Violett übergeht. Wo eine flache Füllung jedes Pixel gleich färbt, gibt ein Farbverlauf jedem Punkt seine eigene Farbe, errechnet aus ein paar Farben, die du wählst, und wo du sie platzierst. Diese kleine Änderung ist der Grund, warum ein Farbverlauf wie Licht, Luft oder Tiefe aussehen kann, und warum er auch leicht billig wirkt.

Diese Seite erklärt die Teile, aus denen jeder Farbverlauf besteht, die wichtigsten Arten, wo Farbverläufe eingesetzt werden und warum sie zurückgekehrt sind. Jeder Abschnitt verlinkt auf einen ausführlicheren Leitfaden, wenn du die Details willst.

Die Teile eines Farbverlaufs

Jeder Farbverlauf, ob in einem Designprogramm gezeichnet, in CSS geschrieben oder von einer Game-Engine gerendert, läuft auf dieselben wenigen Zutaten hinaus. Kannst du sie benennen, beschreibst du jeden Verlauf so genau, dass jemand anderes ihn nachbauen kann.

Stopp-Positionen zählen genauso viel wie Farben. Schieb den mittleren Stopp von 50 % auf 65 %, und dieselben drei Farben erzählen eine andere Geschichte: mehr Schatten, ein späterer Sonnenaufgang. Wenn du die Richtung im Detail verstehen willst, lies in welche Richtung ein Farbverlauf laufen sollte.

Weiche und gestufte Farbverläufe

Ein weicher Farbverlauf mischt stufenlos zwischen den Stopps. Ein gestufter Verlauf mit harten Stopps setzt zwei Stopps an dieselbe Position, sodass die Farbe springt, statt zu mischen. Harte Stopps ergeben Streifen, Flaggen, Fortschrittsbalken und Retro-Sonnenuntergänge; es sind trotzdem Farbverläufe, nur mit abgeschalteter Mischung an diesen Stellen.

Weiche Farbverläufe haben eine Schwäche: Bildschirme zeigen nur eine begrenzte Zahl an Abstufungen, deshalb kann eine sehr sanfte Mischung in sichtbare Streifen zerfallen. Dieses Problem hat einen eigenen Leitfaden: Banding bei Farbverläufen.

Die wichtigsten Arten von Farbverläufen

Die Art ist die Form, entlang der die Farbe wandert. Vier Arten decken fast alles ab, was dir begegnen wird, und Arten von Farbverläufen zeigt jede mit Live-Code.

• Linear: Die Farbe ändert sich entlang einer geraden Linie in einem Winkel. Das Arbeitspferd für Hintergründe, Buttons und Banner. Siehe lineare CSS-Farbverläufe.
• Radial: Die Farbe breitet sich von einem Punkt als Kreis oder Ellipse aus, wie ein Spotlight oder ein Leuchten. Siehe radiale Farbverläufe.
• Konisch: Die Farbe dreht sich um einen Mittelpunkt, wie der Zeiger einer Uhr. Gut für Farbkreise, Tortendiagramme und Schimmer. Siehe konische Farbverläufe.
• Mesh: Mehrere Farbpunkte mischen sich gleichzeitig in zwei Dimensionen, sodass das Ergebnis organisch und malerisch wirkt. Siehe Mesh-Farbverläufe.

Wie Farben sich mischen: der Teil, den viele überspringen

Zwischen zwei Stopps muss die Software jede Farbe dazwischen erfinden. Wie sie das tut, hängt vom Farbraum ab. Die meisten Werkzeuge und älteres CSS mischen in sRGB, das Rot-, Grün- und Blauwerte auf geraden Linien mischt. Das ist schnell, kann aber durch trübe Grautöne laufen, besonders zwischen gegensätzlichen Farben wie Blau und Gelb.

Neuere Farbräume wie OKLab und OKLCH sind danach aufgebaut, wie Menschen Helligkeit und Farbton wahrnehmen, sodass Mischungen heller und gleichmäßiger bleiben. In CSS kannst du sie direkt anfordern, und der Unterschied ist leicht zu sehen. Die ganze Geschichte und die Lösungen stehen in matschige Farbverläufe.

.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}

Wo Farbverläufe eingesetzt werden

Farbverläufe verdienen ihren Platz überall dort, wo eine Fläche beleuchtet oder lebendig wirken soll, ohne ein Foto hinzuzufügen. Die häufigsten Aufgaben sind Hintergründe für Social-Media-Beiträge und Websites, App-Icons, Buttons und Hervorhebungen in Oberflächen, Verpackungen, Poster und Markenidentitäten, die eine Mischung so nutzen wie andere Marken eine Farbe. Für die Identitätsseite siehe Branding mit Farbverläufen.

Warum Farbverläufe zurückkamen

Farbverläufe waren in den glänzenden Oberflächen der 2000er überall und gerieten dann aus der Mode, als Flat Design Anfang der 2010er die Bildschirme übernahm. Sie kehrten in leiserer Form zurück: weniger Abschrägungen und falsche Spiegelungen, mehr weiche Mischungen aus zwei oder drei Farben. Hochauflösende Displays halfen, weil weiche Farbe auf dichten Bildschirmen besser aussieht, und Marken, die etwas Unverwechselbareres als einen flachen Farbton suchten, fanden in Mischungen Raum. Den langen Blick zurück wirft die Geschichte der Farbverläufe.

Heute gehen die interessantesten Farbverläufe über Farbe hinaus. Körnung, Textur und langsame Bewegung lassen eine Mischung wie ein Material wirken statt wie eine Voreinstellung, darum geht es in körnige Farbverläufe und Farbverlauf-Textur.

Wenn du lieber mit einer fertigen Mischung beginnst, statt eine von Grund auf zu bauen, findest du im Markt Tausende Marks: vollständige Farbverlaufsrezepte mit Farbe, Material, Körnung und Licht, mit denen du kostenlos gestalten kannst.