OKLCH erklärt: wahrnehmungsgerechte Farbe für Designer

OKLCH ist eine Schreibweise für Farbe als Helligkeit, Chroma und Farbton, wobei die Helligkeit so gemessen wird, wie das menschliche Auge sie wahrnimmt. In CSS ist oklch(60% 0.2 293) ein Violett, das 60 % des Weges von Schwarz zu Weiß hell wirkt, mit kräftiger Farbe, bei einem Farbtonwinkel von 293 Grad. Der praktische Gewinn für Designer ist einfach: Ändere den Farbton, lass L gleich, und die neue Farbe wirkt genauso hell. HSL kann das nicht versprechen, und genau deshalb ist OKLCH in neueren Designsystemen zum Standard geworden, auch in der Farbpalette von Tailwind.

Helligkeit, Chroma und Farbton

Die Helligkeit ist der Star. Sie stammt aus OKLab, einem 2020 veröffentlichten Farbraum, der gebaut wurde, um wahrgenommene Helligkeit, Buntheit und Farbton gleichmäßiger vorherzusagen als ältere Modelle. Chroma ersetzt die Sättigung: Statt eines Prozentsatzes von irgendeinem Maximum ist es eine absolute Farbmenge, ein Chroma von 0,1 bedeutet also unabhängig vom Farbton dieselbe sichtbare Intensität. Der Farbton ist weiterhin ein Winkel, aber die Winkel sind so verteilt, dass ein Schritt von 30 Grad rundherum wie eine ähnliche Veränderung aussieht.

OKLCH oder HSL: dieselbe Helligkeit im direkten Vergleich

Nimm sechs Farbtöne und halte Helligkeit und Chroma bei oklch(65% 0.11 H) fest. Die Farbfelder unten wirken wie eine Familie, und ihr Kontrast zu Weiß bleibt zwischen 3,1:1 und 3,4:1. Mach dasselbe in HSL bei 50 % Helligkeit, und der Kontrast zu Weiß schwankt von etwa 1,07:1 bei Gelb bis 8,6:1 bei Blau.

Diese Gleichmäßigkeit macht OKLCH für echte Arbeit nützlich. Ein Set aus Statusfarben, Diagrammreihen oder Kategorie Tags kann ein L und ein C teilen und sich nur im Farbton unterscheiden, und keine Farbe schreit lauter als die anderen. Brauchst du dann ein Set, das auch bei Farbenblindheit funktioniert, variierst du zusätzlich L; das behandelt farbenblindfreundliche Paletten.

So schreibst du OKLCH in CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

Die Browserunterstützung ist breit, die Details kannst du auf caniuse prüfen. Um Werte visuell zu erkunden, ist oklch.com ein Farbwähler, der zeigt, welche Kombinationen ein normaler Bildschirm darstellen kann. Um einen bestehenden Hex Wert deiner Marke umzurechnen, füg ihn in diesen Farbwähler ein oder in das Farbpanel der Entwicklertools deines Browsers, das jede Farbe in OKLCH anzeigen kann.

Eine Skala mit OKLCH bauen

Für eine Skala aus Aufhellungen und Abdunklungen stufst du die Helligkeit gleichmäßig ab und lässt das Chroma zur Mitte hin steigen und zu den Enden hin fallen. Sehr helle und sehr dunkle Farben können physikalisch nicht viel Farbe halten; hältst du das Chroma an den Enden hoch, muss der Browser sie beschneiden. Hier ist eine violette Skala, die so gebaut ist.

Weil L der wahrgenommenen Helligkeit folgt, kannst du grobe Kontrastentscheidungen allein anhand der Zahlen treffen. In dieser Skala erreicht weißer Text ab L 50 abwärts 4,5:1, schwarzer Text ab L 60 aufwärts. Prüf immer mit einem Kontrastprüfer nach, aber du wirst selten überrascht. Wie du eine solche Skala in benannte Tokens verwandelst, behandelt Design Tokens.

Gamut: wenn eine Farbe auf dem Bildschirm nicht existiert

OKLCH kann Farben beschreiben, die kein Bildschirm zeigen kann. Die meisten Monitore zeigen sRGB; viele aktuelle Handys und Laptops zeigen das größere Display P3. Treib das Chroma hoch genug, und du verlässt beide. Dann rechnet der Browser die Farbe auf die nächstgelegene zurück, die der Bildschirm darstellen kann, es geht also nichts kaputt, aber du bekommst vielleicht nicht, was du eingetippt hast.

Verläufe in OKLCH

Bei Verläufen zahlt sich wahrnehmungsgerechte Farbe am sichtbarsten aus. Ein einfacher CSS Verlauf mischt in sRGB, und das sackt zwischen weit entfernten Farbtönen ins Graue ab. Modernes CSS lässt dich den Farbraum für die Mischung wählen, und OKLab oder OKLCH halten die Mitte hell und sauber.

OKLab mischt auf gerader Linie und passt zu den meisten Verläufen mit zwei Farben. OKLCH dreht den Farbton, was für Sonnenuntergänge und Regenbögen wunderbar ist, dich aber überraschen kann. Die vollständige Technik, einschließlich der Schlüsselwörter shorter hue und longer hue, steht in CSS Verläufe in OKLCH, die Theorie dahinter in Interpolation von Verläufen.

Die Marks von Gradiently werden live gerendert statt als CSS geschrieben, und jeder trägt seine eigene Palette: Die Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus dieser Palette, sodass die Worte lesbar sind, ohne dass du Zahlen prüfst. Wenn du lieber mit einem fertigen lebendigen Hintergrund beginnst als mit einem Wert in einem Farbwähler, durchsuche den Markt nach Farbwörtern.