Wie ein Farbverlauf gut aussieht: ein Check in sieben Punkten

Ob ein Farbverlauf gut aussieht, entscheiden sieben Prüfungen, der Reihe nach: Farben, die sich treffen, ohne grau zu werden, ungleichmäßig gesetzte Stopps, Licht aus einer Richtung, ein Grund, der die Stimmung setzt, ein Hauch Körnung, ein ruhiger Platz für Worte und ein Export, der alles weich hält. Jede ist ein schneller Test mit klarer Lösung. Fast jeder Verlauf, der billig aussieht, fällt bei mindestens zwei davon durch, und diese zwei zu beheben bringt meist mehr, als die Farben komplett zu tauschen.

1. Farben, die sich sauber treffen

Wenn zwei Farben, die sich auf dem Farbkreis gegenüberliegen, direkt ineinander übergehen, fällt die Mitte ins Grau. Blau zu Orange und Grün zu Pink sind die üblichen Verdächtigen. Füg entweder eine Brückenfarbe dazwischen ein, damit der Übergang um den Kreis wandert statt durch die Mitte, oder misch in einem wahrnehmungsbasierten Farbraum. Matschige Verläufe und Interpolation von Farbverläufen erklären beides.

2. Ungleichmäßig gesetzte Stopps

Gleichmäßig verteilte Farben wirken wie eine Rampe aus einer Voreinstellung. In der Natur dominiert meist eine Farbe, und der Wechsel passiert auf kurzer Strecke: Ein Himmel ist größtenteils blau mit einem schmalen warmen Band am Horizont. Gib deiner Hauptfarbe 60 bis 70 Prozent des Bildes und lass die anderen spät kommen. Farbstopps in Verläufen geht tiefer auf Platzierung und Übergangshinweise ein.

3. Licht aus einer Richtung

Ein guter Verlauf wirkt beleuchtet. Leg fest, woher das Licht kommt, meist aus einer oberen Ecke, und mach diesen Bereich zum hellsten und gesättigtsten. Alles andere fällt davon ab. Kannst du nicht auf die Lichtquelle zeigen, wirkt der Verlauf flach, egal welche Farben du nutzt. Ein weicher radialer Verlauf über einem linearen ist der schnellste Weg dahin.

4. Ein Grund, der die Stimmung setzt

Entscheide, ob das Design dunkel oder hell ist, und bleib dabei. Ein Verlauf, der von mittlerem Violett zu mittlerem Pink wandert, hat keinen Grund und wirkt unentschlossen. Eine fast schwarze Basis lässt Farben leuchten; ein warmes Off-White lässt sie gedruckt wirken. Zieh die Basis weiter, als es sich bequem anfühlt, und nimm dann einen Schritt zurück.

5. Körnung: das richtige Rauschverhältnis

Perfekt glatte digitale Verläufe zeigen auf vielen Bildschirmen Streifen, und sie sehen nach Software-Standard aus. Eine feine Rauschschicht löst beides. Der nützliche Bereich ist schmal: Unter etwa 2 Prozent Deckkraft siehst du es nicht, über etwa 8 Prozent wirkt es wie eine bewusste Textur statt wie ein Finish. Für dunkle Verläufe fang bei 3 Prozent an, für blasse bei 5 Prozent, weil Rauschen auf hellen Farben schwerer zu sehen ist.

.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

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

Weitere Rezepte für Körnung findest du in körnige Farbverläufe und Rauschtextur mit CSS.

6. Ein ruhiger Platz für Worte

Die meisten Verläufe sollen eine Botschaft tragen. Finde heraus, wo die Worte hinkommen, und sorg dafür, dass dieser Bereich der ruhigste und tonal gleichmäßigste ist, damit jede Zeile denselben Kontrast hat. Der hellste, unruhigste Teil des Verlaufs gehört woandershin. Behebe schlechten Kontrast nie mit einem Leuchten hinter den Buchstaben: Verschieb stattdessen das Licht.

Diese Prüfung übernimmt Gradiently für dich. Ein Mark weiß, wo deine Worte stehen: Sein ruhigster Bereich wandert hinter den Text, Farben nahe den Buchstaben werden tiefer oder heller, und die automatische Schriftfarbe wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Marks.

7. Ein Export, der alles weich hält

• Standbilder: als PNG exportieren. JPEG-Kompression macht aus langen Übergängen Stufen, und Social Apps komprimieren beim Upload noch einmal.
• Video: ein MP4 mit hoher Bitrate in exakter Plattformgröße nutzen, damit nichts neu skaliert wird.
• Größe: in den Maßen der Plattform exportieren, etwa 1080×1350 für einen Instagram-Post, statt die App zuschneiden zu lassen.
• Auf dem Handy prüfen: die hochgeladene Version ansehen, in einem dunklen Raum, bei voller Helligkeit. Dort versteckt sich Banding.

Wenn Streifen all das überleben, hat Banding bei Farbverläufen die tieferen Lösungen.