Was ist OKLCH und warum sollte ich es statt HEX oder HSL verwenden?

OKLCH (Helligkeit, Chroma, Farbton) ist ein perceptuell gleichmäßiger Farbraum, der auf dem Oklab-Modell basiert. Im Gegensatz zu HEX oder HSL erzeugen gleiche numerische Änderungen in OKLCH gleiche wahrgenommene Unterschiede. Dies macht es ideal für die Gestaltung barrierefreier Farbpaletten, die Erstellung sanfter Farbverläufe und die Generierung konsistenter Tailwind v4-Farbskalen.

Wie konvertiere ich HEX zu OKLCH?

Fügen Sie Ihren HEX-Wert (z.B. #3b82f6) in das HEX-Eingabefeld ein und das OKLCH-Feld aktualisiert sich sofort mit der äquivalenten Notation oklch(0.6 0.18 250). Alle anderen Formate — OKLab, RGB und HSL — synchronisieren sich ebenfalls gleichzeitig, sodass Sie Farbdarstellungen sofort vergleichen können.

Was bedeutet 'außerhalb des sRGB-Gamuts' und was passiert mit der Farbe?

Einige OKLCH-Farben — insbesondere Werte mit hohem Chroma — überschreiten den sRGB-Farbraum, den die meisten Displays verwenden. In diesem Fall wendet das Tool den CSS Color 4 toGamut-Algorithmus an, um die nächste darstellbare sRGB-Farbe zu finden. Ein bernsteinfarbenes Warnbanner erscheint und zeigt den ursprünglichen Out-of-Gamut-Wert neben dem gemappten Ergebnis an.

Wie funktioniert der Tailwind v4 OKLCH-Palettengenerator?

Der Generator verwendet Tailwind v4's offiziellen Helligkeitsplan (50=0.971, 100=0.945, bis 950=0.238) angewendet auf Ihren aktuellen Farbton und Chroma. Er erzeugt 11 Farbstufen von hell bis dunkel und exportiert sie als @theme { --color-brand-50: oklch(...); } Codeblock, der direkt in Ihr CSS eingefügt werden kann.

Warum sieht die OKLCH-Interpolation bei Farbverläufen besser aus als HSL?

HSL interpoliert durch ein zylindrisches Koordinatensystem, das nicht der menschlichen Wahrnehmung entspricht, was häufig zu Graueinbrüchen oder unerwarteten Farbtonverschiebungen in der Mitte eines Farbverlaufs führt. OKLCH interpoliert im perceptuell gleichmäßigen Oklab-Raum, sodass Helligkeit und Chroma gleichmäßig übergehen, ohne unerwartete Farbstiche.

Ist dieser OKLCH-Konverter kostenlos und privat?

Ja. Das Tool ist völlig kostenlos und läuft vollständig in Ihrem Browser mit der culori-Bibliothek. Keine Farbwerte werden auf einen Server hochgeladen. Alle Konvertierungs- und Gamut-Mapping-Berechnungen werden lokal auf Ihrem Gerät durchgeführt, was vollständige Datenprivatsphäre gewährleistet.

Funktioniert die CSS Color 4 OKLCH-Syntax in allen Browsern?

Die OKLCH-Farbsyntax (oklch()) wird seit 2023 in allen modernen Browsern unterstützt, darunter Chrome 111+, Firefox 113+, Safari 15.4+ und Edge 111+. Für ältere Browser verwenden Sie die HEX- oder RGB-Fallback-Werte, die dieser Konverter bereitstellt.

Farbwerkzeuge

OKLCH-Farbkonverter – CSS Color 4, Tailwind v4 Palettengenerator

Kostenloser OKLCH-Farbkonverter mit Live-Synchronisation zwischen OKLCH, OKLab, RGB, HSL und HEX. Mit L/C/H/Alpha-Schiebereglern, CSS Color 4 Gamut-Mapping und Tailwind v4 Palettenexport.

OKLCH (Helligkeit, Chroma, Farbton) ist ein perceptuell gleichmäßiger Farbraum, der auf dem Oklab-Modell basiert und offiziell in CSS Color Level 4 übernommen wurde. Im Gegensatz zu RGB oder HSL hält OKLCH die wahrgenommene Helligkeit konsistent über alle Farbtöne, was es ideal für barrierefreie Farbsysteme, Tailwind v4-Paletten und sanfte Farbverläufe macht.

So Verwenden Sie den OKLCH-Farbkonverter

1
Geben Sie einen Farbwert ein
Tippen oder fügen Sie einen Wert in einem beliebigen unterstützten Format ein: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) oder oklab(0.6 -0.056 -0.169). Das Tool synchronisiert alle anderen Formate sofort.
2
Feinjustieren mit den L/C/H/Alpha-Schiebereglern
Ziehen Sie die Schieberegler für Helligkeit (L), Chroma (C), Farbton (H) oder Alpha. Der Chroma-Schieberegler zeigt den sRGB-Gamut-Grenzmarker, damit Sie immer wissen, wenn eine Farbe den Standard-Anzeigebereich überschreitet.
3
Prüfen Sie die Gamut-Warnung, falls sie erscheint
Wenn Ihre OKLCH-Farbe außerhalb des sRGB-Gamuts liegt, zeigt ein bernsteinfarbenes Warnbanner den ursprünglichen Wert und das mit dem CSS Color 4 toGamut-Algorithmus gemappte Ergebnis für die Anzeige.
4
Generieren Sie eine Tailwind v4-Palette
Der Tailwind v4 OKLCH-Palettenbereich generiert automatisch Farbstufen von 50 bis 950 für Ihren aktuellen Farbton gemäß dem offiziellen Tailwind-Helligkeitsplan. Klicken Sie auf Kopieren, um den @theme-Block direkt in Ihr CSS einzufügen.

Referenzen

W3C CSS Color Level 4 – oklch()
Die W3C-Spezifikation, die die OKLCH-Farbnotation und die Gamut-Mapping-Algorithmen definiert.
Culori – JavaScript-Farbbibliothek
Die Open-Source-Bibliothek, die OKLCH-Konvertierung, toGamut-Mapping und perceptuelle Interpolation in diesem Tool antreibt.
Evil Martians – OKLCH in CSS: Warum RGB und HSL aufgeben?
Ein umfassender Leitfaden, der die Vorteile von OKLCH gegenüber RGB und HSL für moderne Farbarbeit erklärt.
Tailwind CSS v4 – Standard-Palette
Tailwinds offizielle Farbpaletten-Dokumentation, einschließlich der OKLCH-Helligkeitswerte, die in diesem Palettengenerator verwendet werden.

Häufig Gestellte Fragen

Was ist OKLCH und warum sollte ich es statt HEX oder HSL verwenden?: OKLCH (Helligkeit, Chroma, Farbton) ist ein perceptuell gleichmäßiger Farbraum, der auf dem Oklab-Modell basiert. Im Gegensatz zu HEX oder HSL erzeugen gleiche numerische Änderungen in OKLCH gleiche wahrgenommene Unterschiede. Dies macht es ideal für die Gestaltung barrierefreier Farbpaletten, die Erstellung sanfter Farbverläufe und die Generierung konsistenter Tailwind v4-Farbskalen.
Wie konvertiere ich HEX zu OKLCH?: Fügen Sie Ihren HEX-Wert (z.B. #3b82f6) in das HEX-Eingabefeld ein und das OKLCH-Feld aktualisiert sich sofort mit der äquivalenten Notation oklch(0.6 0.18 250). Alle anderen Formate — OKLab, RGB und HSL — synchronisieren sich ebenfalls gleichzeitig, sodass Sie Farbdarstellungen sofort vergleichen können.
Was bedeutet 'außerhalb des sRGB-Gamuts' und was passiert mit der Farbe?: Einige OKLCH-Farben — insbesondere Werte mit hohem Chroma — überschreiten den sRGB-Farbraum, den die meisten Displays verwenden. In diesem Fall wendet das Tool den CSS Color 4 toGamut-Algorithmus an, um die nächste darstellbare sRGB-Farbe zu finden. Ein bernsteinfarbenes Warnbanner erscheint und zeigt den ursprünglichen Out-of-Gamut-Wert neben dem gemappten Ergebnis an.
Wie funktioniert der Tailwind v4 OKLCH-Palettengenerator?: Der Generator verwendet Tailwind v4's offiziellen Helligkeitsplan (50=0.971, 100=0.945, bis 950=0.238) angewendet auf Ihren aktuellen Farbton und Chroma. Er erzeugt 11 Farbstufen von hell bis dunkel und exportiert sie als @theme { --color-brand-50: oklch(...); } Codeblock, der direkt in Ihr CSS eingefügt werden kann.
Warum sieht die OKLCH-Interpolation bei Farbverläufen besser aus als HSL?: HSL interpoliert durch ein zylindrisches Koordinatensystem, das nicht der menschlichen Wahrnehmung entspricht, was häufig zu Graueinbrüchen oder unerwarteten Farbtonverschiebungen in der Mitte eines Farbverlaufs führt. OKLCH interpoliert im perceptuell gleichmäßigen Oklab-Raum, sodass Helligkeit und Chroma gleichmäßig übergehen, ohne unerwartete Farbstiche.
Ist dieser OKLCH-Konverter kostenlos und privat?: Ja. Das Tool ist völlig kostenlos und läuft vollständig in Ihrem Browser mit der culori-Bibliothek. Keine Farbwerte werden auf einen Server hochgeladen. Alle Konvertierungs- und Gamut-Mapping-Berechnungen werden lokal auf Ihrem Gerät durchgeführt, was vollständige Datenprivatsphäre gewährleistet.
Funktioniert die CSS Color 4 OKLCH-Syntax in allen Browsern?: Die OKLCH-Farbsyntax (oklch()) wird seit 2023 in allen modernen Browsern unterstützt, darunter Chrome 111+, Firefox 113+, Safari 15.4+ und Edge 111+. Für ältere Browser verwenden Sie die HEX- oder RGB-Fallback-Werte, die dieser Konverter bereitstellt.

So Verwenden Sie den OKLCH-Farbkonverter

Referenzen

Verwandte Werkzeuge

Häufig Gestellte Fragen