OKLCH Farbwähler & Konverter

Was ist OKLCH?

OKLCH ist ein von Björn Ottosson (2020) entwickelter Farbraum, der in der Spezifikation Color Level 4 in CSS aufgenommen wurde. Er beschreibt eine Farbe mit drei anschaulichen Werten: Lightness (Helligkeit, 0–100 %), Chroma (Farbintensität, bei Bildschirmfarben etwa 0–0,37) und Hue (Farbton als Winkel von 0 bis 360°). Anders als HSL ist er wahrnehmungsgleichmäßig: Zwei Farben mit dem gleichen L wirken für das menschliche Auge tatsächlich gleich hell.

Warum Entwickler von HSL umsteigen

• Vorhersagbare Paletten: In HSL wirkt Gelb bei 50 % Helligkeit deutlich heller als Blau bei 50 %. In OKLCH bleibt die wahrgenommene Helligkeit erhalten, wenn nur der Farbton geändert wird. Das ist ideal für konsistente Button-Zustände und Skalen in Design-Systemen (deshalb liefert Tailwind CSS v4 seine Palette in OKLCH aus).
• Bessere Kontrast-Mathematik: Ein fester Helligkeitsunterschied ergibt einen ziemlich konstanten Kontrastunterschied.
• Farben mit breitem Gamut: OKLCH kann Display-P3-Farben darstellen, die HEX und rgb() nicht ausdrücken können, sodass moderne Bildschirme lebendigere Farben zeigen können.

Gamut und Fallbacks

Nicht jede L/C/H-Kombination existiert auf einem sRGB-Bildschirm. Ist die Chroma zu hoch, behält dieses Tool Helligkeit und Farbton bei und reduziert die Chroma, bis die Farbe passt. Dieser Wert wird dann als HEX/RGB-Fallback ausgegeben. Schreibe in CSS zuerst den Fallback und danach den OKLCH-Wert; Browser, die OKLCH verstehen, nutzen die zweite Zeile:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH vs. OKLab

OKLab ist derselbe Farbraum in rechtwinkligen Koordinaten (L, a, b). Er eignet sich ideal zum Mischen und für Verläufe – probiere dafür den Farbmischer aus. OKLCH ist dagegen für Menschen leichter zu bearbeiten.

Auch gesucht als: oklch farbwähler, oklch umrechner, hex zu oklch, oklch zu hex, oklch farbe, farbraum oklch, oklch gamut, oklab rechner.

Passende Tools zu: OKLCH Farbkonverter

• Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
• Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
• HEX zu RGBA Konverter — Füge einen HEX-Code ein, zieh den Deckkraft-Regler und kopiere das genaue CSS, das du brauchst: klassisches rgba(), modernes rgb( / alpha) oder 8-stelliges HEX.
• APCA Kontrast-Checker — Berechne den APCA-Helligkeitskontrast (Lc) zwischen Text und Hintergrund, sieh, für welche Einsatzzwecke das Paar geeignet ist, und vergleiche es mit dem klassischen WCAG-2-Verhältnis.