OKLCH-Konverter und Palettenbauer
Wandeln Sie zwischen OKLCH, Hex, RGB und HSL und bauen Sie Reihen, die wahrnehmungsgleich bleiben, weil Helligkeit und Chroma gehalten werden, während der Farbton wandert. Farben außerhalb von sRGB werden per Chroma-Reduktion abgebildet, nicht per Kanal-Clipping — der Unterschied ist, ob Ihr Violett violett bleibt.
Warum Helligkeit in OKLCH etwas bedeutet
In HSL ändert ein Farbtonwechsel bei fester Lightness, wie hell die Farbe wirkt: Gelb bei 50 % liest sich weit heller als Blau bei 50 %, und deshalb sehen HSL-Reihen ungleichmäßig aus, so sorgfältig man sie auch staffelt. OKLab wurde an Wahrnehmungsdaten angepasst, seine Helligkeitsachse folgt also dem, was das Auge meldet. Halten Sie L und C, drehen Sie H, und jedes Feld trägt dasselbe visuelle Gewicht — genau darum baut man Paletten hier und nicht in HSL.
Auf das Gamut-Mapping kommt es an
Viele OKLCH-Werte haben in sRGB überhaupt keine Entsprechung, und der naive Ausweg ist, jeden Kanal in den Bereich zu zwingen. Das verschiebt den Farbton sichtbar: Ein sattes Violett, Kanal für Kanal geclippt, driftet Richtung Blau. Chroma zu reduzieren und dabei Helligkeit und Farbton zu halten, lässt die Farbe erkennbar sie selbst und nimmt nur die Sättigung weg, die der Bildschirm ohnehin nicht zeigen konnte. Diese Seite nutzt den Algorithmus aus CSS Color 4 — binäre Suche über das Chroma, und Annahme des geclippten Ergebnisses, sobald es innerhalb eines gerade noch wahrnehmbaren Unterschieds zur reduzierten Farbe liegt.
Gegen eine Referenz geprüft
Die Umrechnungen wurden über ein Raster aus viertausend Farben mit einer unabhängigen Implementierung verglichen: Helligkeit und Chroma stimmen bis aufs Millionstel überein, der Farbton bis auf ein Zehntausendstel Grad, und jeder Hex-Wert kommt exakt zurück. Das Gamut-Mapping wurde ebenso gegen vierhundertachtzig Farben außerhalb des Farbraums geprüft und liegt im schlechtesten Fall innerhalb eines Teils von 255. Wer OKLCH liest, merkt eine falsche Matrix — deshalb schien es angebracht zu sagen, wie geprüft wurde.
Die Ausgabe verwenden
Die Custom Properties stehen in OKLCH, den Hex-Wert daneben im Kommentar — weil das genau das Paar ist, das man im Review will: der Wert, den Ihr Build ausliefert, und der Wert, den Sie überall sonst einfügen können. Jeder heute gebräuchliche Browser versteht die OKLCH-Syntax; wenn Sie noch einen unterstützen, der es nicht tut, ist der Kommentar Ihr Rückfall.
FAQ
Warum ist das Chroma bei 0,4 gedeckelt?
Weil in sRGB nichts auch nur in die Nähe kommt. Die gesättigtste sRGB-Farbe ist Blau bei etwa 0,313, und der Regler geht bewusst darüber hinaus, damit Sie sehen, was herausfällt und wie es zurückgebildet wird.
Was ist hier ein gerade noch wahrnehmbarer Unterschied?
Ein Delta E von 0,02 in OKLab — die Schwelle, die CSS Color 4 verwendet. Darunter sind Clipping und Chroma-Reduktion nicht zu unterscheiden, also nimmt der Algorithmus die geclippte Farbe und behält das zusätzliche Chroma.
Beherrscht es P3 oder Rec2020?
Noch nicht. Alles hier zielt auf sRGB, und darauf beziehen sich die Gamut-Warnungen. Weitere Farbräume brauchen eigene Primärvalenzen und einen zweiten Satz Matrizen.
Wird irgendetwas davon irgendwohin gesendet?
Nein. Die Umrechnungen laufen auf dieser Seite.
Gebaut vom GO AI-Team. CSS-clamp()-Rechner · Alle kostenlosen Tools