Hex in OKLCH umwandeln (und zurück)

Mach einen Hin- und Rückweg. Nimm ein Markenblau — #2563eb — und wandle es in OKLCH um: oklch(0.546 0.215 262.9). Wandle das zurück in Hex, und #2563eb kommt zurück, exakt bis zur letzten Stelle. Jetzt nimm vor dem Rückweg eine Änderung vor: Hebe das Chroma von 0,215 auf 0,28 an, eine kräftigere Variante desselben Blaus, und wandle erneut um. Diesmal bekommst du #0054ff — und wenn du dieses Hex zurückliest, meldet es ein Chroma von 0,261, nicht die 0,28, die du geschrieben hast. Der Hinweg war perfekt; der Rückweg hat deine Farbe still und leise verschoben.

Diese Asymmetrie ist die ganze Geschichte der Hex-zu-OKLCH-Umwandlung: Hex → OKLCH ist verlustfrei — jede Hex-Farbe hat exakte OKLCH-Koordinaten —, während OKLCH → Hex clampen kann, weil OKLCH Farben ausdrücken kann, die kein Hex-Wert kodieren kann, und diese per Gamut-Mapping auf die nächstgelegene Farbe abgebildet werden müssen, die Hex halten kann. Hin- und Rückwege sind sicher; Änderungen sind der Punkt, an dem eine Farbe von der Hex-Karte fallen kann. Dieser Artikel geht die Pipeline durch, die Asymmetrie und den Arbeitsablauf, der Handumwandlung überflüssig macht — Teil unseres OKLCH-Leitfadens.

Wie funktioniert die Umwandlung eigentlich?

Vier Stufen, in dieser Reihenfolge ausgeführt. Zuerst wird der Hex-Wert in seine drei sRGB-Kanäle zerlegt (jedes Paar Hex-Ziffern wird zu einer Zahl von 0 bis 255, skaliert auf 0–1). Zweitens werden diese Kanäle aus ihrer gamma-kodierten Form in lineares Licht dekodiert — Zahlen, die proportional zum physikalischen Licht sind, das ein Bildschirm abgibt. Drittens werden die linearen Werte in OKLab überführt, den perzeptiven Raum, in dem eine Achse die Helligkeit ist und zwei Achsen die Farbe tragen. Viertens werden diese beiden Farbachsen in Polarform ausgedrückt: Der Abstand vom Grau wird zum Chroma, der Winkel zum Farbton — und du hast L, C, H. Die formale Definition, samt Matrizen und Kubikwurzel, findest du in der Referenz zum Oklab-Farbraum; in der Praxis führt jedes Farbwerkzeug diese Stufen für dich aus.

Jede Stufe ist umkehrbar, und sie rückwärts auszuführen ist die Richtung OKLCH → Hex. Präzision ist in der Praxis kein Thema: Hex quantisiert jeden Kanal auf 256 Stufen, was gröber ist als dreistellige OKLCH-Nachkommawerte — und deshalb liefert oklch(0.546 0.215 262.9), so gerundet wie hier abgedruckt, immer noch exakt #2563eb.

Warum ist Hex zu OKLCH immer verlustfrei?

Weil die Reise von einer kleinen, diskreten Menge in einen größeren, kontinuierlichen Raum führt. Hex kann genau 16.777.216 Farben benennen (256³), alle innerhalb des sRGB-Gamuts. OKLCH beschreibt einen kontinuierlichen Raum, der ganz sRGB enthält — und darüber hinaus noch mehr. Jede Hex-Farbe hat daher eine präzise OKLCH-Adresse, und die Umwandlung dorthin verwirft nichts. Ein hilfreiches Bild: Hex-Farben sind Städte, und OKLCH ist eine größere, besser kalibrierte Karte. Eine Stadt auf einer größeren Karte einzuzeichnen verliert die Stadt nie.

Warum kann OKLCH zu Hex clampen?

Der Rückweg hat keine solche Garantie, weil OKLCH Adressen enthält, zu denen es auf der Hex-Karte keine Stadt gibt: Farben außerhalb von sRGB. Manche sind auf Weitgamut-Bildschirmen sichtbar — kräftige Display-P3-Mitteltöne — und manche sind schlicht mehr Chroma, als die Helligkeit irgendwo zulässt.

Das Eingangsexperiment zeigt die Mechanik mit echten Zahlen. Bei der Helligkeit und dem Farbton von #2563eb (L 0,546, H 262,9) geht sRGB bei einem Chroma von ≈ 0,251 der Platz aus. 0,28 zu verlangen fordert eine Farbe an, die existiert — ein P3-Bildschirm kann sie zeigen —, die aber kein Hex-Wert schreiben kann. Das Gamut-Mapping findet stattdessen die nächstgelegene ausdrückbare Farbe: #0054ff, die sich als oklch(0.532 0.261 262.7) misst. Beachte, dass sich alle drei Koordinaten verschoben haben, nicht nur das Chroma — Clampen landet auf der nächstgelegenen Farbe, nicht auf deiner Farbe mit einer gedeckelten Zahl.

Das ist auch der Grund, warum Skalen-Generatoren das Chroma bei jeder Helligkeit knapp unter der sRGB-Obergrenze deckeln — Spielraum statt Clipping —, damit erzeugte Schritte sauber in Hex umwandeln, statt sich an der Gamut-Grenze zu stauen.

Wie sieht der Umwandlungs-Arbeitsablauf in der Praxis aus?

Nicht wie eine Umwandlung. Kaum jemand übersetzt Hex-Werte von Hand, denn der realistische Ausgangspunkt ist eine Markenfarbe, die bereits als Hex existiert, und das realistische Ziel ist eine Palette — keine Koordinaten. Der Arbeitsablauf lautet also: Importiere das Hex als Ausgangsfarbe und lass die Skalen-Erzeugung in OKLCH darum herum geschehen. Importiere dieses Blau als Ausgangsfarbe im Scale Composer — das Werkzeug liest #2563eb als oklch(0.546 0.215 262.9) und baut die Skala von dort aus auf.

Hier ist die Skala, die diese Ausgangsfarbe erzeugt — die Helligkeit läuft auf einer Kurve, das Chroma folgt einem Glockenprofil, das nahe der Ausgangsfarbe seinen Höhepunkt hat und an den Extremen einen Boden hält, sodass selbst die hellsten und dunkelsten Schritte einen Hauch Blau behalten:

Jede Zeile wandelt sich ohne Clampen in Hex um, weil jeder Chroma-Wert unter der Gamut-Obergrenze bei seiner Helligkeit liegt. Die Ausgangsfarbe kam als Hex herein, das Denken fand in OKLCH statt, und die Ergebnisse verlassen es wieder als Hex — drei Umwandlungen pro Schritt, keine davon von einem Menschen ausgeführt.

Was passiert, wenn du bearbeitest und neu exportierst?

Das Bearbeiten ist überhaupt erst der Grund, umzuwandeln — und hier wird die Asymmetrie vom Anfang dieses Artikels zu einer alltäglichen Tatsache statt einer Kuriosität. Schiebe das Chroma einer Farbe nach oben, und irgendwann verlässt sie sRGB: Von da an ist ihre Hex-Schreibweise eine geclampte Näherung, während die Farbe selbst weiterlebt. Exporte behandeln diese Aufteilung ehrlich — Hex bleibt sRGB-geclampt, und im Display-P3-Modus trägt jeder Schritt zusätzlich einen color(display-p3 …)-String, der das Chroma hält, das Hex nicht kann. Öffne die aus der Ausgangsfarbe erzeugte Skala, hebe das Chroma an und exportiere neu — beobachte, welche Hex-Werte der Schritte aufhören sich zu bewegen, sobald sie die Obergrenze erreichen, während die P3-Strings weiterlaufen.