Chroma-Profile: Wo die Sättigung ihren Höhepunkt erreichen sollte

Erzeuge zwei Rampen aus derselben blauen Ausgangsfarbe – #2563eb, also oklch(0.546 0.215 262.9) – und stelle sie nebeneinander. Gleiche zehn Schritte, gleiche Helligkeitskurve, gleicher Farbton. In der ersten Rampe baut sich die Farbe allmählich auf und leuchtet am kräftigsten rund um die mittleren Schritte, dort wo Buttons und Links leben; die hellen Tönungen bleiben ruhig. In der zweiten kommt die Leuchtkraft früh: Die Schritte 100–300 – die Tönungen, die du für Hover-Flächen und farbige Oberflächen nutzen würdest – tragen sichtbar mehr Farbe, und die Rampe hat den größten Teil ihres Sättigungsbudgets schon vor der Mitte ausgegeben. Keine der beiden Rampen ist falsch. Sie sind zwei Antworten auf eine Frage, die jede generierte Farbskala irgendwo beantworten muss.

Diese Antwort ist das Chroma-Profil: der Sättigungsplan der Rampe – eine Kurve, die festlegt, wo entlang der Skala die Farbigkeit ihren Höhepunkt erreicht und wie sie zu den Enden hin abfällt. Eine Rampe kann die Sättigung nicht konstant halten: nahe Weiß und nahe Schwarz lässt der Farbraum (Gamut) fast keinen Platz für Farbe, und selbst dazwischen wirkt gleichförmige Sättigung schlecht – deshalb formt eine gut gebaute Skala das Chroma bewusst: Sie steigt zu einem Höhepunkt dort, wo die Palette am härtesten arbeitet, lässt zu den Extremen hin nach und behält einen Sockel, damit die Enden nie vollständig grau werden. Diese Form zu wählen ist das Thema dieses Artikels, Teil unseres Leitfadens zu Farbskalen. (Chroma ist das absolute Maß für Farbigkeit in OKLCH – die formale Unterscheidung zwischen Farbigkeit, Chroma und Sättigung ist ein eigenes Thema; hier genügt: mehr Chroma bedeutet mehr Farbe.)

Warum kann eine Rampe die Sättigung nicht konstant halten?

Zwei Gründe – einer physikalisch, einer ästhetisch.

Der physikalische: Die Obergrenze bricht an beiden Enden zusammen. Eine Farbe bei Helligkeit 0,97 hat kaum Platz für Chroma, bevor sie den Farbraum (Gamut) verlässt – ein leuchtendes Fast-Weiß gibt es nicht – und derselbe Zusammenbruch passiert in Richtung Schwarz. Eine Rampe, die bei jedem Schritt dasselbe Chroma verlangt, wird an beiden Enden abgeschnitten: mehrere Schritte auf das wenige begrenzt, das die Obergrenze zulässt, und der gleichmäßige Verlauf stirbt genau dort, wo Hintergründe und dunkler Text leben.

Der ästhetische: Selbst dort, wo konstantes Chroma erreichbar ist, sieht es falsch aus. Helle Tönungen bei voller Sättigung wirken radioaktiv – Leuchtstift-Farben, wo eine ruhige Oberfläche sitzen sollte – und dunkle Schritte bei voller Sättigung neigen dazu, matschig zu werden, denn bei geringer Helligkeit wirkt starkes Chroma eher als Schlamm denn als Tiefe. Die Intuition, die es zu behalten lohnt: Das Auge gibt der Farbe in den Mitteltönen den meisten Raum, und die Form des Farbraums (Gamut) spiegelt das wider. Leuchtkraft in der Rampenmitte wirkt gewollt; Leuchtkraft, die an die Enden gezwungen wird, wirkt wie ein Fehler.

Die Frage ist also nicht, ob man die Sättigung entlang der Rampe formt, sondern wo man den Höhepunkt setzt.

Wo sollte der Sättigungshöhepunkt liegen?

Zwei Formen decken die meisten Paletten ab.

Glocke – Höhepunkt in der Rampenmitte. Das Chroma steigt kurz vor der Rampenmitte zu einem Maximum und fällt zu beiden Seiten ab. In Scale Composer ist dies das Standardprofil: Der Höhepunkt landet rund um die Schritte 400–500, dort wo eine Ausgangsfarbe wie #2563eb auf der Helligkeitskurve sitzt – so wird der Markenkern bei maximaler Leuchtkraft dargestellt, während helle und dunkle Abstufungen unterstützend bleiben. Wähle die Glocke, wenn die Rampe klassische Markenarbeit leistet: Buttons, Links, gefüllte Komponenten, die Farbmomente einer UI.

Front – Höhepunkt früher. Das Chroma erreicht seinen Höhepunkt etwa nach einem Drittel der Strecke, im hellen Bereich, und klingt dann durch die Mitteltöne ab. Wähle Front, wenn die Rampe ihr Geld in den hellen Schritten verdient: hintergrundlastige Oberflächen, getönte Karten und Flächen, Marketingseiten, die in Markentönung getaucht sind – Paletten, in denen 100–300 die Arbeitsschritte sind und 500 nur gelegentlich vorbeischaut.

Wie sehen die beiden Profile in Zahlen aus?

In Scale Composer sind beide Profile Gewichtskurven über der Rampenposition t (0 = hellster Schritt, 1 = dunkelster), multipliziert mit dem Spitzen-Chroma der Rampe:

bell(t)  = exp(−10 · (t − 0.45)²)
front(t) = exp(−7 · (t − 0.30)²)

Für das Spitzen-Chroma der blauen Ausgangsfarbe von 0,215 ergeben sich die zehn Schritte so:

Zwei Dinge sind aus der Tabelle herauszulesen. Erstens sind die Profile Anfragen, keine Garantien: Der Generator deckelt jeden Schritt weiterhin unter der Farbraum-Obergrenze, sodass Fronts ≈0,115 bei Schritt 50 – viel verlangt von einem Fast-Weiß-Blau – auf das gestutzt wird, was der Farbraum halten kann, mit Spielraum übrig. Zweitens schau auf Schritt 200: ≈0,128 bei der Glocke gegenüber ≈0,206 bei Front – über die Hälfte mehr Farbe in derselben Tönung. Dieser Unterschied ist der größte Teil der praktischen Bedeutung der Profilwahl.

Öffne beide Profile auf derselben blauen Ausgangsfarbe in Scale Composer – Glocke und Front nebeneinander, Helligkeit identisch, nur der Chroma-Plan unterscheidet sich. Die hellen Schritte erzählen die Geschichte.

Warum brauchen die Rampenenden einen Chroma-Sockel?

Beide Spalten in der Tabelle enden bei ≈0,026, statt weiter gegen null zu laufen. Das ist der Sockel: 12 % des Höhepunkts, angewandt, damit selbst die Schritte 50 und 900 einen Hauch des Farbtons behalten.

Ohne ihn führt der exponentielle Abfall die extremen Schritte auf faktisch null Chroma – und ein Schritt bei null Chroma ist generisches Grau, über Marken hinweg nicht zu unterscheiden. Mit ihm ist das Fast-Weiß 50 schwach, aber erkennbar blau, und die 900 ist ein Blau-Schwarz statt eines flachen Schwarz. Die Begründung ist dieselbe wie hinter getönten Neutraltönen: Ein Hauch von Chroma ist in einem einzelnen Farbfeld unsichtbar, aber über eine Fläche hinweg spürbar, und genau das lässt einen Seitenhintergrund oder eine dunkle Überschrift so wirken, als gehörte sie zu dieser Palette und nicht zu gar keiner. Der Sockel bindet die Enden der Rampe an die Marke.

Wie wählst du zwischen Glocke und Front?

Frage, wo die Rampe ihr Geld verdient. Sind ihre Arbeitsschritte die Mitteltöne – Buttons, Links, aktive Zustände –, nimm die Glocke, und der Markenkern wird bei voller Leuchtkraft dargestellt. Sind ihre Arbeitsschritte hell – Flächen-Tönungen, Farbwaschungen, hintergrundlastige Layouts –, nimm Front, und die Tönungen tragen die Farbe, während die Mitteltöne sich beruhigen. Eine Produktpalette kann mischen: Glocke für die Marken-Rampe, Front für einen unterstützenden Farbton, der meist als getönte Flächen genutzt wird.

Zwei Randbemerkungen. Ein Profil formt eine Rampe, nicht das ganze Theme: Eine dunkle Palette, die aus einer hellen abgeleitet ist, plant ihr Chroma nach eigenen Regeln neu – im Scale Composer laufen abgeleitete dunkle Paletten ihre eigene Helligkeitskurve und heben das Chroma um rund 20 % an, weil dunkle Umgebungen die wahrgenommene Farbigkeit dämpfen. Und kein Profil rettet einen zu hoch angesetzten Höhepunkt: Das Profil verteilt den Höhepunkt, die Farbraum-Deckelung beherrscht ihn weiterhin.

Der Sockel ist von diesen Ideen am leichtesten zu verstehen, indem man ihn löscht. Öffne dieselbe Rampe mit ausgeschaltetem, dann eingeschaltetem Sockel – ohne Sockel fallen die Schritte 50 und 900 auf schlichtes Grau zusammen, und die Enden der Rampe könnten zu jedem beliebigen Produkt gehören; stelle ihn wieder her und beobachte, wie sie sich der Palette wieder anschließen.