OKLCH vs HSL
Beide Formate beschreiben Farbe mit einem Farbton und zwei weiteren Werten. Der Unterschied: OKLCH basiert darauf, wie Menschen Farben wahrnehmen, HSL nicht.
Das Problem mit der HSL-Helligkeit
Setzt du Gelb und Blau auf dieselbe HSL-Helligkeit, wirkt Gelb deutlich heller:
color: hsl(60 100% 50%); /* bright yellow */
color: hsl(240 100% 50%); /* dark blue */Bei OKLCH stimmt die Helligkeit viel besser mit dem überein, was du siehst. Farben mit demselben Wert wirken ähnlich hell, daher lassen sich Paletten leichter ausbalancieren.
Im direkten Vergleich
| HSL | OKLCH | |
|---|---|---|
| Helligkeit | Hängt vom Farbton ab | Entspricht dem Eindruck der Menschen sehr genau |
| Farbraum | Nur sRGB | Umfasst breitere Farbräume |
| Browser-Unterstützung | Universell | Alle modernen Browser |
| Gut lesbar | Vertraut | Braucht etwas Einarbeitung |
Wann du was nutzt
- Nutze OKLCH für Design-Systeme, generierte Farbabstufungen und kräftige Farben auf modernen Bildschirmen.
- Nutze HSL für schnelle Einzelfarben oder wenn du sehr alte Browser unterstützen musst.
Bereit zum Umstieg? Konvertiere eine Farbe mit dem HEX-zu-OKLCH-Konverter und folge dann unserer Anleitung So nutzt du OKLCH in CSS.
Tools in dieser Anleitung
OKLCH FarbkonverterOKLCH-Farben mit Helligkeit, Chroma und Farbton wählen und in HEX, RGB, HSL und OKLab umrechnen.HEX zu OKLCH KonverterHEX-Farben in OKLCH für modernes CSS umwandeln.FarbkonverterKostenloser Farbkonverter: HEX in RGB, HSL, HWB, OKLCH, CMYK und CSS-Farbnamen umwandeln und eine 50–950-Farbpalette als CSS-Variablen erstellen.
Häufige Fragen
Ist OKLCH besser als HSL?
Zum Erstellen von Paletten meist ja, weil die Helligkeit konsistenter ist. HSL reicht aber weiterhin für einfache Fälle.
Was ist der Unterschied zwischen LCH und OKLCH?
Beide beschreiben Farben auf die gleiche Weise, aber OKLCH nutzt ein neueres Modell, bei dem die Farbtöne bei Helligkeitsänderungen stabiler bleiben.
