HEX-zu-OKLCH-Konverter

Was die drei OKLCH-Zahlen bedeuten

OKLCH beschreibt eine Farbe so, wie Menschen sie tatsächlich wahrnehmen, und nutzt dafür drei Komponenten: L ist die wahrnehmungsgetreue Helligkeit von 0 % (Schwarz) bis 100 % (Weiß), C ist die Buntheit – wie weit die Farbe von neutralem Grau entfernt liegt – und H ist der Farbwinkel auf einem 360°-Kreis. OKLCH ist die Polarform des OKLab-Raums, den Björn Ottosson 2020 veröffentlicht hat und der in CSS Color 4 aufgenommen wurde. Damit behebt es das älteste Ärgernis klassischer Farbmodelle: Gleiche Schritte in den Zahlen sehen endlich auch für dein Auge wie gleiche Schritte aus.

Gibst du diesem Konverter #3564c4, bekommst du oklch(52.33% 0.1589 262.61). Lies den Wert wie einen Satz: eine Farbe mit 52 % wahrgenommener Helligkeit (ein satter Mittelton), einer moderaten Buntheit von 0,159 (deutlich farbig, aber weit von Neon entfernt) und dem Farbwinkel 262,6° – klar im blauen Bereich. Intern dekodiert das Tool die Gammakurve des Hex-Werts zu linearem Licht, schickt das Ergebnis durch eine Stufe, die die Zapfenantwort des Auges mit einer Kubikwurzel-Kennlinie nachbildet, landet in OKLab und wandelt diese kartesischen Koordinaten schließlich in die polaren Werte L, C und H um.

Die Farbwinkel folgen einer festen Landkarte, die schnell in Fleisch und Blut übergeht: Rottöne liegen um 29°, Gelbtöne um 110°, Grüntöne um 142°, Cyantöne um 195°, Blautöne um 264° und Magentatöne um 328°. Die 262,6° unseres Beispiels liegen knapp vor dem Ankerpunkt für reines Blau – deshalb wirkt sein Farbfeld wie ein ruhiges Ultramarin und nicht wie ein Violett.

Die HSL-Lüge: warum 50 % nicht 50 % sind

Auch HSL bewirbt einen Helligkeitskanal, aber dessen Zahlen stammen aus Max/Min-Arithmetik über den RGB-Kanälen, nicht aus dem menschlichen Sehen. Der Fehler lässt sich leicht vorführen: hsl(60, 100%, 50%) (reines Gelb) und hsl(240, 100%, 50%) (reines Blau) behaupten beide 50 % Helligkeit, doch wahrnehmungsbezogen gemessen liegt das Gelb bei OKLCH L = 96,8 % – fast Weiß – und das Blau bei 45,2 %. Setz weiße Schrift auf beide, und nur eine Kombination besteht die Kontrastprüfung.

OKLCH hält keine solchen Überraschungen bereit. Zwei Farben mit L = 52,33 % wirken gleich hell, ob sie nun blau, petrol oder braun sind – eine Palette, die L festhält und nur H rotiert, liefert also Farbfelder, die im visuellen Gewicht wirklich zusammenpassen. Selbst die neutrale Achse ist auf die Wahrnehmung geeicht: Der 50-%-Grauwert #808080 ergibt oklch(59.99% 0 0), weil das menschliche Sehen dunkle Töne feiner auflöst als helle – eine Tatsache, die HSL überhaupt nicht ausdrücken kann.

CSS-Color-4-Syntax und Browser-Unterstützung

Im Stylesheet lautet die Notation oklch(L C H): Helligkeit als Prozentwert oder Zahl von 0 bis 1, Buntheit als schlichte Zahl, Farbton in Grad. Das Lieblingsbeispiel der Spezifikation ist reines Rot – oklch(62.8% 0.2577 29.23) ist exakt #ff0000. Transparenz folgt nach einem Schrägstrich, etwa oklch(52.33% 0.1589 262.61 / 60%).

Die Unterstützung ist längst kein Glücksspiel mehr: Safari lieferte oklch() mit 15.4 aus (März 2022), Chrome und Edge folgten mit 111 (März 2023), Firefox mit 113 (Mai 2023) – jeder große Browser, der seit Mitte 2023 erschienen ist, versteht die Funktion. Für alten Traffic schreibst du eine HEX-Ersatzdeklaration in die Zeile über die oklch-Deklaration: Alte Engines verwerfen den Wert, den sie nicht parsen können, und behalten das HEX, neue wenden die spätere Deklaration an.

Vertraute HEX-Codes, übersetzt

Ein paar Ankerpunkte helfen, deine Intuition für die Skala zu eichen:

Beachte, dass die Buntheits-Spalte nie auch nur in die Nähe von 1 kommt: Innerhalb des sRGB-Farbraums erreichen die gesättigtsten Farben höchstens rund 0,32.

Was OKLCH in der Praxis möglich macht

• Barrierefreie Farbskalen – L in festen Schritten abstufen (90 %, 80 %, 70 % …) und dabei C und H konstant halten; jede Stufe der Skala behält so ein vorhersagbares Kontrastverhältnis zu Text und Hintergrund.
• Farbtonrotation ohne Helligkeitssprünge – kategoriale Diagrammfarben erzeugen, indem du H bei konstantem L und C rotierst; kein Farbton leuchtet plötzlich heraus, keiner wirkt matschig.
• Vernünftigere Dark Modes – verschiebst du allein L, behält eine Farbe ihre Identität, statt ins Graue zu driften oder den scheinbaren Farbton zu wechseln.
• Sauberere Verläufe – wer in OKLCH interpoliert, umgeht die entsättigte tote Zone, die den Mittelpunkt von RGB-Verläufen zwischen weit auseinanderliegenden Farbtönen plagt.
• Design-Tokens, die skalieren – speichere „Markenfarbton 262,6“ ein einziges Mal und leite Hover-, Rahmen- und Hintergrundvarianten rechnerisch ab, statt neue HEX-Werte nach Augenmaß zu suchen.

Eine beruhigende Eigenschaft dieser Richtung: Jeder HEX-Code hat exakte OKLCH-Koordinaten, deshalb kann die Umrechnung von HEX nach OKLCH nie Farbraumprobleme auslösen – die tauchen erst auf dem Rückweg auf, wenn ein OKLCH-Wert mit hoher Buntheit nicht mehr in sRGB passt. Für diesen Rückweg gibt es den OKLCH-zu-HEX-Konverter, und wenn Kolleginnen und Kollegen Farben in gemischten Notationen schicken, nimmt der universelle Farbkonverter sie alle an. Die Berechnungen laufen hier zu 100 % in deinem Browser: Kein Server sieht je deine Farben, und die Seite funktioniert auch offline.