Dezente Farbverläufe: leise Farbwechsel für klare Interfaces

Ein dezenter Farbverlauf wechselt zwischen zwei Farben, die so nah beieinander liegen, dass du den Wechsel eher spürst als siehst: Weiß zu einem kühlen Gebrochenweiß, Fast-Schwarz zu einem etwas weicheren Fast-Schwarz. Diese kleine Verschiebung lässt eine Fläche beleuchtet wirken, deshalb nutzen klare Interfaces sie für Seitenhintergründe, Karten und Panels im Dark Mode. Die Codes unten halten den Helligkeitsunterschied bei wenigen Prozent; wird er größer, wird der Verlauf zum Gestaltungselement statt zur Fläche.

Helle Codes für dezente Verläufe

Jeder davon beginnt nah an Weiß und driftet zu einer zarten Tönung. Nimm die Tönung aus deiner Markenfarbe, damit selbst der Hintergrund eine Spur Identität trägt. Verläufe von oben nach unten wirken am natürlichsten, weil Licht meist von oben kommt.

Dunkle Codes für dezente Verläufe

Dunkle Flächen profitieren noch mehr, denn reines, flaches Schwarz sieht aus wie ein Loch im Bildschirm. Heb den oberen Teil ein wenig an und lass den unteren absinken. Farbverläufe im Dark Mode behandelt ganze Themes; das hier sind die Bausteine.

Wo dezente Verläufe im Interface funktionieren

Die Faustregel: Ein dezenter Verlauf sollte nie das sein, worauf man schaut. Kommentiert jemand beim Review den Verlauf, ist er für einen Hintergrund zu stark. Für zurückhaltende Looks in Druck und Social Media ebenso wie auf Bildschirmen, siehe minimalistische Hintergründe.

So tönst du einen dezenten Verlauf mit deiner Markenfarbe

Ein neutraler grauer Verlauf ist sicher, aber anonym. Tönst du das hellere oder dunklere Ende mit einer Spur deines Markenfarbtons, wirkt das ganze Interface mit dem Logo verwandt, ohne dass jemand sagen könnte, warum. Der Trick: den Farbton behalten und fast die ganze Sättigung weglassen.

1. 1

   Nimm den Markenfarbton

   Rechne deine Hauptmarkenfarbe in oklch oder HSL um und notiere nur ihren Farbton: etwa 265 für ein Violett, 160 für ein Grün, 30 für ein warmes Orange.

2. 2

   Halte sie fast grau

   Setze die Chroma sehr niedrig, etwa 0,005 bis 0,015 in oklch, oder die Sättigung unter etwa 30 % in HSL bei sehr hoher Helligkeit. Du willst einen Hauch Farbe, kein Pastell.

3. 3

   Lege zwei Helligkeitswerte fest

   Für helle Themes probiere 99 % und 96 %, für dunkle etwa 20 % und 15 %. Halte beide Enden auf demselben Farbton, damit der Verlauf nie zu Grau oder einer zweiten Farbe abdriftet.

4. 4

   Prüfe ihn neben reinem Weiß oder Schwarz

   Leg den Verlauf neben einen schlichten weißen oder schwarzen Block. Siehst du gar keinen Unterschied, verschiebe das untere Ende etwas; fällt die Tönung quer durch den Raum auf, senke die Chroma.

Dieselbe Tönung kann dann in Rahmen, Trennlinien und Hover-Zustände übergehen, sodass der Verlauf Teil eines ruhigen Systems ist statt ein einzelner Effekt. Buttons sind die eine Stelle für eine etwas stärkere Verschiebung, unten ein paar Prozent dunkler, weil ein Hauch Volumen sie drückbar aussehen lässt.

Einen dezenten Verlauf in CSS schreiben

Hex-Codes funktionieren überall. Für feinere Kontrolle schreibst du die Farben in oklch, wo die erste Zahl die wahrgenommene Helligkeit ist, und kannst die Verschiebung genau festlegen: etwa von 99 % zu 96 %. Das Mischen in oklch hält die Änderung außerdem über die ganze Länge gleichmäßig. CSS-Gradient mit oklch erklärt die Syntax, CSS Linear Gradient die Grundlagen.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Warum dezente Verläufe Banding zeigen, und die Lösung

Zwischen zwei nahen Farben liegen in einem 8-Bit-Bild nur sehr wenige Stufen. Zieh sie über einen 1920 Pixel breiten Hero, und jede Stufe wird zu einem sichtbaren Streifen, besonders bei dunklen Verläufen und günstigeren Bildschirmen. Die ganze Erklärung steht in Banding bei Farbverläufen.

Im Web entfernt eine winzige SVG-Rauschtextur mit geringer Deckkraft über dem Verlauf sichtbare Stufen, ohne dass jemand die Körnung bemerkt; Rauschtextur in CSS liefert den Code. Für Social Posts und Folien bringt ein Gradiently Mark seine eigene Körnung mit und rendert in jeder Größe, sodass ein ruhiger Hintergrund glatt bleibt, ob Story oder Banner. Wenn du das Gegenteil von ruhig willst, hat leuchtende Farbverläufe die gesättigten Codes.