OKLCH in HEX umrechnen

Wie aus einem OKLCH-Wert ein HEX-Code wird

Dieser Konverter durchläuft die perzeptuelle Pipeline rückwärts. Die Polarkoordinaten deiner Eingabe werden zu kartesischem OKLab entfaltet, über die inversen Matrizen der Zapfenantwort in lineares RGB projiziert, nach sRGB gammakodiert und auf die vertraute Form mit zwei Ziffern pro Kanal quantisiert. Probier das Beispiel oklch(52% 0.14 262): Es landet sauber auf #3a65b8, alias rgb(58, 101, 184) – ein zurückhaltendes Mittelblau, das bequem in den sRGB-Farbraum passt, sodass der Code exakt die Farbe ergibt, nach der du gefragt hast.

Warum überhaupt zurückrechnen? Weil HEX die Lingua franca der Werkzeuge bleibt: Design-Übergaben, SVG-Exporte, E-Mail-Vorlagen, Terminal-Themes und unzählige Konfigurationsdateien erwarten nach wie vor sechs Hexadezimalziffern. Ein moderner Workflow denkt Farbe in OKLCH und liefert HEX überall dort aus, wo die Kompatibilität es verlangt.

Wenn es die eingegebene Farbe in sRGB gar nicht gibt

OKLCH kann Farben benennen, die weit über das hinausgehen, was ein normaler Bildschirm zeigt – genau diese Geräteunabhängigkeit ist das ganze Versprechen des Formats –, während HEX auf den sRGB-Farbraum festgelegt ist. Verlangst du oklch(65% 0.3 262), liefert die reine Rechnung einen Blaukanal von 1.258, weit jenseits des Bereichs von 0 bis 1, den ein sRGB-Pixel wiedergeben kann. Irgendwo muss nachgegeben werden – und es kommt darauf an, wie ein Konverter nachgibt.

Dieses Tool folgt dem Farbraum-Mapping-Algorithmus aus CSS Color 4 statt naivem Abschneiden: Helligkeit und Farbton bleiben fixiert, während die Buntheit per Binärsuche so weit gesenkt wird, bis die Farbe hineinpasst; ein direktes Beschneiden der Kanäle wird erst akzeptiert, wenn dessen Fehler unter die Schwelle des gerade noch wahrnehmbaren Unterschieds fällt (ΔE-OK 0.02). Für das Beispiel oben ergibt das #4c89ff – effektive Buntheit rund 0.19, weiterhin bei 65 % Helligkeit und Farbton 262° – und genau das meldet ein Warnhinweis. Die Zeilen HEX, RGB und HSL zeigen die abgebildete Farbe, während die Zeilen Lab, LCH, OKLab und OKLCH deine exakten Werte außerhalb des Farbraums behalten, denn diese Räume können sie darstellen. Das entspricht dem, was die CSS-Spezifikation für Browser vorschreibt, die solche Farben auf sRGB-Displays darstellen – das gekennzeichnete Ergebnis ist also eine getreue Vorschau auf das reale Resultat.

Buntheit ist kein Prozentwert – und ihre Obergrenze wandert

Ein häufiger Stolperstein beim Schreiben von OKLCH per Hand: C wie die Sättigung in HSL zu behandeln und 80 % einzutippen, in der Erwartung von „ziemlich bunt“. Buntheit ist ein absoluter Abstand zur Grauachse: 0 ist perfekt neutral, alltägliche Interface-Farben liegen zwischen 0.03 und 0.2, und nichts innerhalb von sRGB überschreitet etwa 0.32. CSS erlaubt hier zwar einen Prozentwert, definiert 100 % aber als C = 0.4 – mehr Buntheit, als sRGB bei irgendeiner Helligkeit zeigen kann.

Diese Obergrenze verschiebt sich zudem drastisch mit Farbton und Helligkeit. Bei 50 % Helligkeit lässt sRGB nahe Violettblau (Farbton 264°) eine Buntheit von etwa 0.28 zu, nahe Cyan (Farbton 195°) dagegen nur rund 0.085; Magenta erreicht seinen Höchstwert bei etwa 0.32, allerdings erst bei rund 70 % Helligkeit. Wenn du dir eine einzige Zahl merken willst: Eine Buntheit von 0.08 oder darunter bleibt bei Helligkeiten zwischen 50 % und 70 % für jeden Farbton darstellbar – genau deshalb parken so viele OKLCH-Designsysteme ihre blassen und pastelligen Stufen exakt in dieser Zone.

Wo die sRGB-Grundfarben in OKLCH liegen

Die sechs kräftigsten darstellbaren Farben zeigen, wie eng die maximale Buntheit an die Helligkeit gekoppelt ist:

Verlangst du einen dieser Farbtöne mit einer höheren Buntheit, als die Tabelle zeigt, zieht der Konverter den Wert auf die nächstgelegene darstellbare Farbe zurück und weist auf die Anpassung hin – er erfindet niemals stillschweigend Licht, das dein Bildschirm nicht abstrahlen kann.

Eingabe-Syntax, die der Parser versteht

• Helligkeit auf beide Arten – 52% und 0.52 sind gleichwertig; 0 steht für Schwarz, 1 für Weiß.
• Einheiten für den Farbton – nackte Zahlen bedeuten Grad, und die Endungen deg, rad, grad und turn werden alle akzeptiert.
• Negative Winkel laufen um – oklch(52% 0.14 -98) ist dieselbe Eingabe wie Farbton 262.
• Alpha nach einem Schrägstrich – oklch(52% 0.14 262 / 40%) ergibt den 8-stelligen Code #3a65b866.
• Das Schlüsselwort none – wird wie in CSS als 0 behandelt; oklch(52% none 262) ist ein reines Grau mit 52 % Helligkeit.
• Tolerante Trennzeichen – Kommas zwischen den Komponenten werden hier akzeptiert, obwohl die CSS-Grammatik selbst schlichte Leerzeichen verlangt.

Den umgekehrten Weg – bestehende Marken-HEX-Codes in perzeptuelle Koordinaten zu überführen – übernimmt der Konverter HEX zu OKLCH, und sobald eine Farbpalette steht, prüft der Kontrast-Checker deine Text-Kombinationen. Sämtliche Berechnungen dieser Seite laufen zu 100 % in deinem Browser: Farben gelangen nie ins Netz, und das Tool bleibt offline nutzbar.