Warum OKLCH statt HSL?

Die Helligkeit von HSL bei 50% sieht je nach Farbton stark unterschiedlich aus (Gelb ist deutlich heller als Blau); OKLCH ist wahrnehmungsgleich – gleiches L bedeutet gleiche wahrgenommene Helligkeit.

Browserunterstützung?

oklch() ist Teil von CSS Color 4 – Chrome 111+, Safari 15.4+, Firefox 113+, über 92 % Abdeckung.

Was bedeutet außerhalb des Farbraums?

Einige Kombinationen mit hoher Chrominanz existieren nicht auf sRGB-Displays; das Werkzeug zeigt den nächsten wert innerhalb des Farbraums. Auf P3-Bildschirmen ist die tatsächliche Darstellung lebendiger.

Wie wird die Skala erstellt?

Fester Farbton, Helligkeitsleiter-Interpolation mit glockenförmigem Chrominanzabfall, um Farbraumbeschneidung zu verhindern – derselbe Algorithmus wie im Shades Studio.

OKLCH-Editor

Passen Sie L / C / H im wahrnehmungsgleichmäßigen OKLCH-Raum an mit Live-Vorschau und Ausgabe als oklch() / HEX / RGB.

Dreidimensionale Abstimmung

OKLCH ist wahrnehmungsgleichmäßig: Ziehen Sie L für Helligkeit ohne Farbtonverschiebung, C für konstante Sättigung, H zum Drehen des Farbtons – drei unabhängige Achsen, weit vorhersehbarer als HSL.

Farbraumansicht

Helligkeit L · 62.0%0.620

Chrominanz C · 0.1600.160

Farbton H · 145°145

Diese Kombination überschreitet den sRGB-Farbraum Die angezeigte Farbe ist der nächste wert innerhalb des Farbraums; versuchen Sie, die Chroma zu senken oder die Helligkeit anzupassen.

L·H @ C 0.160

Ziehen Sie auf der Leinwand, um auszuwählen – der Ring markiert die aktuelle Farbe; flache abgeschnittene Bereiche liegen außerhalb von sRGB

oklch(62.0% 0.160 145.0)vs. Weiß 20.87:1vs. Schwarz 1.01:1

Skala mit gleichem Farbton

Farbton festgelegt, 11 Design-System-Stufen nach Helligkeit (50–950). Klicke auf eine Stufe, um zu kopieren.

Im Shades Studio öffnen →

Wie man in OKLCH abstimmt – drei Schieberegler, drei Achsen.

L, C und H beeinflussen sich nicht gegenseitig – vorhersehbarer als HSL.

01
Farbton einstellen
Zuerst H ziehen; die OKLCH-Farbtonrotation ist wahrnehmungsgleichmäßig.
02
L und C abstimmen
Ziehen Sie L für Helligkeit, C für Chroma; eine Warnung außerhalb des Farbraums erscheint bei Bedarf – reduzieren Sie C, um dies zu beheben.
03
Code übernehmen
Kopieren Sie oklch() oder HEX/RGB; moderne Browser unterstützen oklch() nativ.

OKLCH Häufig gestellte Fragen

Vier Fragen bei der Umstellung von HSL.

Warum OKLCH statt HSL?: Die Helligkeit von HSL bei 50% sieht je nach Farbton stark unterschiedlich aus (Gelb ist deutlich heller als Blau); OKLCH ist wahrnehmungsgleich – gleiches L bedeutet gleiche wahrgenommene Helligkeit.
Browserunterstützung?: oklch() ist Teil von CSS Color 4 – Chrome 111+, Safari 15.4+, Firefox 113+, über 92 % Abdeckung.
Was bedeutet außerhalb des Farbraums?: Einige Kombinationen mit hoher Chrominanz existieren nicht auf sRGB-Displays; das Werkzeug zeigt den nächsten wert innerhalb des Farbraums. Auf P3-Bildschirmen ist die tatsächliche Darstellung lebendiger.
Wie wird die Skala erstellt?: Fester Farbton, Helligkeitsleiter-Interpolation mit glockenförmigem Chrominanzabfall, um Farbraumbeschneidung zu verhindern – derselbe Algorithmus wie im Shades Studio.

Nachdem Sie die Farbe gefunden haben

Generieren Sie eine vollständige Skala oder öffnen Sie den Editor.

Skala-Generator

Jede Farbe in eine 11-stufige Designsystem-Skala, wahrnehmungsgleichmäßig in OKLCH, WCAG-Kontrast pro Stufe, Export nach Tailwind/CSS/SCSS/JSON.

Semantische UI-Farbpalette

Geben Sie eine Markenfarbe ein, erhalten Sie Primär-/Sekundär-/Erfolgs-/Warn-/Gefahrfarben — exportiert als Tailwind-Konfiguration und CSS-Variablen.

Farbkonverter

Geben Sie jedes Format ein (HEX / RGB / HSL / Name) und konvertieren Sie es in Echtzeit in alle Farbräume.

Kontrastgitter

Legen Sie Ihre gesamte Farbpalette in eine N×N-Prüfungstabelle — WCAG-Verhältnisse und APCA Lc für jedes Vordergrund-/Hintergrund-Paar, auf einen Blick ersichtlich.