Warum deine Grautöne nicht wirklich neutral sind

Ein Paletten-Review, das sich über Teams hinweg wiederholt: Die Markenfarbe stimmt, die Schrift stimmt, aber das Interface wirkt kalt — klinisch, leicht abgekoppelt von der Marke, in die es gekleidet ist. Der Verdacht fällt auf die Markenfarbe; der Übeltäter ist meist die Grauskala. Sie wurde aus reinen Grautönen gebaut — gleiche RGB-Kanäle, Chroma null, mathematisch farblos — und neben einer farbigen Palette wirken reine Grautöne oft wie Teile, die aus einem anderen Produkt eingeflogen wurden.

Reine RGB-Grautöne existieren, und sie sind mathematisch neutral — aber neben Markenfarben wirken sie selten neutral, weil das Auge „keine Farbe” gegen die Farben ringsum beurteilt. Der praktische Kniff ist der getönte Neutralton: ein Hauch Chroma, grob 0,005–0,02 in OKLCH, in Richtung des Markenfarbtons, der die Grauskala zur Palette gehören lässt, statt bloß neben ihr zu existieren. Beide Hälften dieser Behauptung — die perzeptive Verschiebung und der präzise Kniff — sind Thema dieses Artikels, Teil unseres OKLCH-Leitfadens.

Warum wirkt ein mathematisch neutrales Grau kalt?

Weil Neutralität vom visuellen System nicht gemessen — sondern ausgehandelt wird. Der Forschungshintergrund ist die chromatische Adaptation: Das visuelle System gleicht fortlaufend neu ab, was als neutral gilt, gemessen am Licht und den Farben ringsum — deshalb sieht eine weiße Seite unter einer warmen Glühbirne und unter blauem Tageslicht gleichermaßen weiß aus. Die formale Behandlung findest du unter chromatischer Adaptation. Das Auge ist kein Kolorimeter, das absolute Werte meldet; es ist ein Instrument, das sich immer wieder gegen den Kontext neu auf null stellt.

Auf einem Bildschirm ist die Palette Teil dieses Kontexts. Umgib ein Grau mit Chroma null mit einer warmen Markenpalette, und der Neutralpunkt des adaptierten Auges driftet ins Warme — das mathematisch neutrale Grau liegt nun auf der kühlen Seite davon und wirkt kalt und abgekoppelt. Das Grau hat sich nicht verändert; der Bezugspunkt schon. Was in einem Design neutral aussieht, ist nicht Chroma null — es ist das, was mit der Temperatur der Palette übereinstimmt.

Was ist ein getönter Neutralton?

Ein Grau, das nachgibt: Statt Chroma null trägt es einen Hauch Chroma — meist irgendwo zwischen 0,005 und 0,02 in OKLCH-Werten — ausgerichtet auf den Markenfarbton. Diese Menge liegt weit unter dem, was als Farbe wahrgenommen wird; ein einzelnes Farbfeld davon sieht noch immer grau aus. Was es bewirkt, ist eine Verschiebung der Temperatur der Skala, bis Grautöne und Markenfarben sich einig sind, was neutral bedeutet. Deshalb führen UIs so häufig warme Grautöne zu warmen Marken und kühle Grautöne zu kühlen Marken: Die Praxis ist chromatische Adaptation, angewandt.

Die Dosierungslogik lohnt es sich auszubuchstabieren: Bei 0,005 ist die Tönung kaum messbar; um 0,01 ist sie in einem Farbfeld unsichtbar, aber über eine große Fläche spürbar; bei 0,02 beginnt ein aufmerksames Auge, den Farbton zu benennen. Hintergründe und große Flächen liegen am unteren Ende, kleine dunkle UI-Chrome-Elemente vertragen etwas mehr.

Warum ist das in OKLCH präzise und in HSL vage?

Weil Chroma in OKLCH eine absolute Größe ist. „Chroma 0,01 bei Farbton 263” bedeutet dieselbe Menge an Farbe auf jeder Helligkeitsstufe der Skala — eine Zeile spezifiziert die Tönung für die gesamte Graurampe vollständig. HSL kann die Regel nicht so formulieren: Seine Sättigung ist ein Prozentsatz dessen, was jeder Farbton und jede Helligkeit gerade zulässt, also liefert „2 % Sättigung dazu” auf jeder Stufe eine andere tatsächliche Menge an Farbe — mehr in den Mitteltönen, weniger an den Enden — und wieder eine andere, wenn sich der Markenfarbton ändert. Das Rezept für getönte Neutraltöne existiert in beiden Modellen; nur in OKLCH ist es portabel.

Wie sehen getönte Neutraltöne in Zahlen aus?

Hier ist dieselbe Helligkeitskurve zweimal — einmal bei Chroma 0, einmal bei Chroma 0,01 in Richtung Farbton 263, dem Farbton eines Markenblaus der #2563eb-Klasse:

Lies die getönte Spalte genau: Die Kanäle sind nicht mehr gleich — Rot liegt zwei oder drei Punkte unter Grün, Grün ein paar unter Blau, auf jeder Stufe. In einer Tabellenzelle sehen die beiden Spalten fast identisch aus, und das ist ehrlich so: Der Unterschied ist darauf ausgelegt, in Farbfeldgröße unsichtbar zu sein. Er tritt in Flächengröße zutage — Seitenhintergründe, Karten, Seitenleisten — wo die getönte Skala zur blauen Palette zu gehören scheint und die reine Skala daraus abwesend wirkt.

Deshalb wird eine Neutralskala als Teil der Palette generiert, nicht separat im Nachhinein ausgewählt. Öffne eine Markenpalette mit ihrer Neutralskala in Scale Composer — die Neutralrampe wird zusammen mit den Markenfarben generiert und trägt ihren Hauch Chroma in Richtung des Markenfarbtons, nach derselben Helligkeitslogik wie die farbigen Skalen.

Wie warm oder kühl sollten deine Grautöne ausfallen?

Das ist eine Markenentscheidung, keine Formel — eine warme, menschliche Marke und eine kalte, technische verdienen Grautöne mit unterschiedlichem Temperament, und die ehrliche Spanne reicht von nahezu rein bis deutlich getönt. Aber diese Entscheidung trifft man am besten mit dem Auge, in voller Größe, mit beiden Kandidaten auf dem Bildschirm. Wechsle die Neutralskala zwischen rein und getönt — dieselbe Helligkeitskurve, Chroma 0 gegen Chroma 0,01 beim Markenfarbton — und beobachte die Flächen, nicht die Farbfelder. Eine der beiden wird sich anfühlen, als wäre sie mit der Marke gekommen.