Farbskalen mit OKLCH und color-mix

Ein Hex-Wert ist eine Anweisung an den Bildschirm. Drei Zahlen sagen, wie stark die rote, die grüne und die blaue Leuchtquelle arbeiten sollen. Darin steckt keine Angabe darüber, wie hell das Ergebnis aussieht, und man merkt das sofort am Vergleich: Gelb mit ffff00 und Blau mit 0000ff sind beide auf zwei Kanälen voll aufgedreht. Das Gelb ist blendend hell, das Blau beinahe dunkel. Dasselbe Format, derselbe Aufwand für den Bildschirm, zwei völlig verschiedene Eindrücke.

HSL verspricht Besserung und hält das Versprechen nur halb. Das L dort heißt Lightness und ist doch keine wahrgenommene Helligkeit, sondern eine geometrische Lage in einem Zylinder. hsl(60 100% 50%) ist jenes grelle Gelb, hsl(240 100% 50%) jenes dunkle Blau, und beide stehen bei 50 Prozent. Wer eine Skala baut, indem er in HSL gleichmäßige Schritte auf dem L nimmt, bekommt deshalb ungleichmäßige Sprünge: In der Mitte liegen zwei Stufen zu nah beieinander, am hellen Ende kippt die Farbe ins Graue, am dunklen verliert sie ihren Charakter.

OKLCH wechselt den Bezugspunkt. Es beschreibt eine Farbe nicht über die Arbeit des Bildschirms, sondern über ein Modell der Wahrnehmung. Die erste Achse ist der Helligkeitseindruck, und sie gilt quer über alle Farbtöne: Zwei Werte mit demselben L wirken gleich hell, ob gelb, blau oder rot. Damit ist Helligkeit eine Größe, mit der man rechnen kann, und genau das braucht eine Skala.

L ist die Helligkeit und läuft von 0 bis 1, in Prozent geschrieben von 0 bis 100. Null ist Schwarz, Eins ist Weiß, und die Werte dazwischen sind so verteilt, dass gleiche Abstände gleich aussehen. Ein Sprung von 0,40 auf 0,50 wirkt so groß wie der von 0,70 auf 0,80. Das ist die eine Eigenschaft, um die es bei diesem Format geht.

C ist das Chroma, also der Abstand zu Grau. Bei 0 bleibt nur ein Grauton übrig, und zwar unabhängig vom Farbton. Nach oben gibt es keine feste Grenze: Chroma ist kein Anteil, der bei 100 Prozent endet, sondern eine offene Strecke. In der Praxis liegt die obere Kante bei etwa 0,4, und wenn man die Prozentschreibweise benutzt, entspricht 100 Prozent genau diesem Wert. Wie weit man tatsächlich kommt, hängt von L und H ab und vom Bildschirm.

H ist der Farbton in Grad. Hier liegt die Stolperstelle beim Umstieg: Der Kreis ist anders gedreht als in HSL. Magenta beginnt bei 0, Rot liegt bei etwa 41 Grad, und ein Gradwert aus einer HSL-Angabe lässt sich deshalb nicht übernehmen. Wer eine bestehende Farbe umstellt, rechnet sie um statt sie abzuschreiben, und zwar einmal, danach steht der Wert.

Der Ausgangspunkt ist die eine Farbe, die bereits feststeht, also die Markenfarbe. Rechne sie nach OKLCH um und lies die drei Werte ab. Der Farbton daraus ist von nun an gesetzt und wandert durch alle Stufen unverändert mit. Damit ist die Frage, was eine Skala eigentlich ist, schon beantwortet: eine Liste von Helligkeiten zu einem festen Farbton.

Die Helligkeiten verteilt man in gleichen Abständen, und weil das L wahrgenommene Helligkeit beschreibt, sehen die Abstände danach auch gleich aus. Zehn Stufen von 0,97 bis 0,22 sind ein bewährter Rahmen: oben die Flächen, die kaum getönt sind, in der Mitte die eigentliche Markenfarbe, unten das, was Text auf heller Fläche tragen muss. Die Basis gehört in die Mitte, nicht an den Rand, denn sonst fehlt auf einer Seite der Platz für Zustände.

Das Chroma bleibt dabei nicht konstant, und das ist der Teil, den man beim ersten Versuch meist übersieht. Nahe Weiß und nahe Schwarz gibt es kaum Raum für Buntheit, in der Mitte am meisten. Ein konstanter Wert über alle Stufen macht die hellen Töne schmutzig und die dunklen flach. Das Chroma folgt deshalb einem Bogen: klein oben, am höchsten um die Basis, wieder kleiner nach unten. Eine leichte Drehung des Farbtons über die Skala hinweg ist möglich und manchmal gewollt, aber sie ist eine Entscheidung, keine Notwendigkeit. Fang ohne sie an.

Nicht jede Farbe im Projekt muss in der Skala stehen. Ein Rand, der eine Spur heller als die Fläche ist, ein Hover, der eine Spur dunkler sitzt, eine Hinterlegung für eine Auswahl: Das sind Ableitungen, und für Ableitungen gibt es color-mix. Die Funktion nimmt zwei Farben, einen Prozentwert und den Raum, in dem gemischt wird. Ein Prozentwert reicht, den Rest nimmt der Browser für die zweite Farbe.

Der Raum ist dabei keine Nebensache. In srgb läuft der Weg zwischen zwei kräftigen Farben durch eine stumpfe Mitte, weil dort die Kanäle gegeneinander arbeiten. In oklab bleibt die Mischung über den ganzen Weg lebendig, und die Helligkeit verhält sich so, wie man es von einem Mischungsverhältnis erwartet. Schreib deshalb in oklab, wenn du nicht bewusst etwas anderes willst.

Für Zustände gibt es noch einen zweiten Weg, und der ist präziser: die relative Farbschreibweise. oklch(from var(--color-brand-500) calc(l - 0.08) c h) nimmt die Basis auseinander, senkt nur die Helligkeit und lässt Chroma und Farbton unberührt. Zu beachten ist, dass die Kanäle dabei als Zahlen vorliegen: calc(l - 0.08) ist gültig, calc(l - 8%) nicht. Diese Schreibweise ist jünger als color-mix, verfügbar ab Chrome und Edge 119, Firefox 128 und Safari 16.4, wobei die frühen Safari-Fassungen einem älteren Entwurf folgten. Ein @supports-Block fragt sie sauber ab.

Zehn Stufen pro Rampe sind eine Palette, kein System. Wer im Markup bg-brand-600 schreibt, hat eine Zahl ins Layout geschrieben und muss sie beim nächsten Themewechsel überall wieder suchen. Zwischen Rampe und Markup gehört deshalb eine Ebene aus Rollen, und sie ist kurz: Was ist Fläche, was ist Text, was ist Rand, was ist Akzent.

Eine Rolle zeigt auf eine Stufe. Beim Wechsel des Themes ändert sich nur, auf welche Stufe sie zeigt, die Rampe selbst bleibt unverändert. Das ist der Unterschied zwischen einem Satz Farben, den man pflegen kann, und einem, den man jedes halbe Jahr neu sortiert.

In Tailwind ab Version 4 fällt der zweite Teil praktisch zusammen: Ein Eintrag --color-surface in @theme erzeugt die Utility bg-surface und hinterlässt dieselbe Variable als native Custom Property. Damit lesen sich Markup und Stylesheet gleich, und ein Blick ins Markup verrät die Absicht statt einer Zahl.

Eine durchgerechnete Skala ist gleichmäßig, und gleichmäßig ist nicht dasselbe wie geprüft. Drei Dinge lohnen einen eigenen Durchgang, und keines davon meldet sich von selbst.

Was keine Prüfung braucht, ist die Verfügbarkeit der beiden wichtigsten Teile: oklch und color-mix sind seit 2023 in allen großen Browsern vorhanden und gelten als etabliert. Eine Rückfallebene in Hex ist dort reine Pflege ohne Gegenwert. Nur die relative Schreibweise mit from ist jünger, und sie ist der eine Teil, den ein @supports-Block umschließen darf, wenn du noch ältere Fassungen von Safari bedienst.

Bleibt am Ende die unbequemste Frage, und sie hat nichts mit dem Format zu tun: Braucht das Projekt wirklich zehn Stufen pro Rampe? In den meisten Oberflächen sind vier davon nie im Einsatz. Eine Rampe aus sechs Stufen, die alle gebraucht werden, ist leichter zu pflegen als eine aus zehn, bei der niemand mehr weiß, wofür die 200 gedacht war.