OKLCH-Konverter und Palettengenerator
Rechnen Sie zwischen OKLCH, Hex, RGB und HSL um und bauen Sie Farbreihen, die gleichmäßig wirken, weil Helligkeit und Chroma gehalten werden, während der Farbton wandert. Farben außerhalb von sRGB werden über eine Chroma-Reduktion abgebildet, nicht durch Clipping — der Unterschied ist, ob Ihr Violett violett bleibt.
Warum die Helligkeit in OKLCH wirklich etwas aussagt
In HSL ändert ein Farbtonwechsel bei fester Helligkeit, wie hell die Farbe wirkt: Gelb bei 50 % erscheint 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. Das Chroma zu reduzieren und dabei Helligkeit und Farbton zu halten, erhält den erkennbaren Charakter der Farbe und nimmt nur die Sättigung weg, die der Bildschirm ohnehin nicht zeigen konnte. Diese Seite nutzt den Algorithmus aus CSS Color 4: Das Chroma wird per Intervallhalbierung eingegrenzt, und das geclippte Ergebnis wird übernommen, 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 nach Hin- und Rückrechnung exakt wieder heraus. Das Gamut-Mapping wurde ebenso gegen vierhundertachtzig Farben außerhalb des Farbraums geprüft und weicht im schlechtesten Fall um höchstens 1/255 ab. 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, mit dem 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 das nicht tut, ist der Kommentar Ihr Fallback.
FAQ
Warum ist das Chroma auf 0,4 begrenzt?
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 darüber hinaus, damit Sie sehen, was außerhalb liegt und wie es zurück in den Farbraum abgebildet 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 ist auf sRGB ausgelegt, und darauf beziehen sich die Gamut-Warnungen. Größere Farbräume brauchen eigene Primärvalenzen und einen zweiten Satz Matrizen.
Wird irgendetwas davon übertragen?
Nein. Die Umrechnungen laufen auf dieser Seite.
Entwickelt vom Team hinter GO AI. CSS-clamp()-Rechner · WCAG-Kontrastprüfer · Alle kostenlosen Tools