OKLCH beschreibt Farben über wahrgenommene Helligkeit, Buntheit und Farbton, kurz L, C und H. Anders als in HSL wirken zwei Farben mit gleichem L auch gleich hell. Das macht OKLCH zum passenden Werkzeug, um in CSS gleichmäßige Farbpaletten zu bauen.
- OKLCH (moderner CSS-Farbraum)
Ein Farbraum für CSS, der Farben über wahrgenommene Helligkeit, Buntheit und Farbton beschreibt.
Beispiel: „Die Abstufungen unserer Markenfarbe sind in OKLCH angelegt, deshalb wirken sie gleichmäßig.“Abgrenzung zu HSL: Es rechnet einfach in sRGB um, ohne Rücksicht auf die Wahrnehmung. Gelb und Blau mit gleicher HSL-Helligkeit wirken deshalb verschieden hell.
Woher OKLCH kommt
Björn Ottosson stellte den Farbraum Oklab am 23. Dezember 2020 in seinem Blog vor. Der Name ist ein Wortspiel: ein OK Lab-Farbraum. Er entstand durch Optimierung an Daten darüber, wie Menschen Farbunterschiede wahrnehmen. OKLCH ist dieselbe Farbe in Polarkoordinaten, mit dem Farbton als Winkel. CSS Color 4 hat beides übernommen.
Wie OKLCH aufgebaut ist
L reicht von 0 Prozent, Schwarz, bis 100 Prozent, Weiß. C ist die Buntheit, bei 0 grau und bei sehr kräftigen Farben um 0,4. H ist der Farbton als Winkel. Seit Mai 2023 verstehen alle großen Browser die Schreibweise.
OKLCH in der Praxis
Mit relativen Farben leitet CSS Abstufungen direkt aus einer Grundfarbe ab: Helligkeit ändern, Buntheit und Farbton behalten. Farben außerhalb von sRGB zeigen Bildschirme mit Display P3 kräftiger, ältere so nah wie möglich.
:root {
--marke: oklch(60% 0.18 255);
--marke-dunkel: oklch(from var(--marke) calc(l - 0.15) c h);
}