oklch()

Quelle: CSS Tricks, übersetzt mit ChatGPT

Die CSS‑Funktion oklch() bringt einen frischen Ansatz zur Definition von Farben im Oklab‑Farbraum. Sie legt Farben mit drei Komponenten fest — Helligkeit (L), Chroma (C) und Farbton (H) — und bietet damit ein wahrnehmungsbasiertes und gleichmäßiges System. Anders als bei anderen Farb­funktionen, die auf dem sRGB‑Farbraum beruhen, wie rgb() und hsl() , nutzt oklch() ein breiteres Spektrum — ein echter Game‑Changer für Webentwickler, die präzise und lebendige Farben wollen.

Diese Funktion ist Teil der CSS Color Module Level 4 Spezifikation und verspricht bessere Verläufe, intuitive Anpassungen und Kompatibilität mit modernen Displays.

Syntax

Die oklch()-Funktion verwendet eine durch Leerzeichen getrennte Werte­liste, ähnlich wie lab() und lch(). Hier ist die Aufschlüsselung:

 oklch( [<percentage> | <number> | none] [ <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]?) 

Argumente

• Lightness (L): Steuert, wie „hell“ die Farbe ist — von 0% (völlig schwarz) bis 100% (völlig weiß). Es kann auch ein Dezimalwert zwischen 0 und 1 sein (z.B. .7).
• Chroma (C): Definiert die Lebendigkeit oder „Reinheit“ der Farbe — ähnlich wie Sättigung. Es handelt sich um eine einheitenlose Zahl, typischerweise von 0 (gedämpft) bis etwa 0.5 (leuchtend), kann aber auch höher sein.
• Hue (H): Gibt eine Farbe auf dem Farbkreis an, ausgedrückt in Grad, von 0deg (rot) bis 360deg (wieder rot). Der Farbton ist zyklisch — 360deg ergibt wieder 0deg. Mit anderen Worten: Statt 361deg schreibt man 1deg.
• Alpha‑Transparenz (optional): Legt die Transparenz als Dezimalwert zwischen 0 und 1 (z. B. .7) oder als Prozent zwischen 0% und 100% fest.

 /* Ein zartes Blau */

color: oklch(70% 0.15 240);

/* Ein leuchtendes Violett mit Transparenz */

color: oklch(60% 0.2 280 / 75%);

/* Verwendung von Zahlen anstelle von Prozentsätzen */

color: oklch(0.7 0.15 240);

/* Keine Farbsättigung (Chroma) für einen Graustufenton */

color: oklch(50% 0 0); 

Warum oklch() besonders ist

Hier ist, warum es heraussticht:

• Wahrnehmungsgerechte Gleichmäßigkeit: Änderungen der Werte entsprechen dem, wie dein Auge Farbübergänge sieht — keine überraschenden Grautöne wie bei sRGB‑Verläufen.
• Größeres Farbspektrum: Es unterstützt P3‑Farben und ermöglicht kräftige Farbtöne, die moderne Bildschirme darstellen können (z. B. neuere Geräte von Apple).
• Intuitive Steuerung: Hue wählt die Farbe, Chroma definiert die Intensität, Lightness die Helligkeit.

Denk an zylinderförmige Farbwerte: Lightness bewegt sich vertikal, Chroma radial nach außen, Hue rotierend um den Kreis. Im Vergleich zu sRGB‑Beschränkungen bei rgb() oder ungleichmäßiger Helligkeit bei hsl() liefert oklch() eine reichere, vorhersehbarere Palette.

Vor- und Nachteile von oklch()

oklch() baut auf der wissenschaftlichen Grundlage von CIE Lab auf und behebt viele seiner Nachteile. Während andere Farb­funktionen wie rgb() und hsl() mit eingeschränkter Gleichmäßigkeit kämpfen, stimmt oklch() mit menschlicher Farb­wahrnehmung überein.

Die wichtigsten Verbesserungen von OKLCH gegenüber anderen Farb­funktionen sind:

• Großes Farbspektrum: Breite‑Gamut Display‑P3 Farben sind damit kompatibel. Moderne Geräte (z. B. Apple‑Produkte) können Farben darstellen, die über das alte sRGB hinausgehen — und diese neuen Farben lassen sich mit OKLCH definieren.
• Wahrnehmungsgerechte Helligkeit: OKLCH ist in Bezug auf Farb­änderungen und Paletten­erstellung überlegen gegenüber hsl() und lch(). HSLs gleichbleibende Sättigung führt oft zu inkonsistenten Helligkeiten zwischen Farben — bei OKLCH, wo Helligkeit authentisch gemessen und durch variierendes Chroma gesteuert wird, passiert das nicht.
• Bessere Zugänglichkeit: Dank gleichmäßiger Helligkeit ist OKLCH gut lesbar — im Gegensatz zu rgb() oder hexadezimalen Farbwerten (z. B. #ca0000). Schon anhand der Zahlen kann man leicht erkennen, welchen Farbton ein OKLCH‑Wert repräsentiert.
• Kompatibilität mit dem Web: OKLCH wird von modernen Browsern im Rahmen des CSS Color Module Level 4 unterstützt — für Webentwicklungen also praktisch und einsatzbereit.

oklch() vs. lch()

Sowohl oklch() als auch lch() sind polare Farb­funktionen in CSS und definieren Farben über Lightness, Chroma und Hue. Sie klingen ähnlich, basieren aber auf unterschiedlichen Farbräumen — oklch() nutzt Oklab, während lch() auf CIELAB beruht. Hier der Vergleich:

Hier ein kurzes Beispiel, das die beiden vergleicht:

 .gradient-oklch { 

    background: linear-gradient(to right, oklch(70% 0.15 240), oklch(70% 0.15 0));
  }

  .gradient-lch { 

    background: linear-gradient(to right, lch(70 30 240), lch(70 30 0));

  } 

• oklch(): Ein sanfter Übergang von Blau zu Rot, ohne Probleme.
• lch(): Lebendig, aber riskanter — einige Farben könnten nicht wie erwartet angezeigt werden.

Grundlegende Verwendung

Nachdem wir gesehen haben, warum OKLCH ein Game‑Changer ist, wollen wir es praktisch anwenden. oklch() funktioniert überall, wo eine Farbe akzeptiert wird — sei es Hintergrund, Text, Rahmen usw. Hier ein schnelles Beispiel für eine Hintergrundfarbe:

 .button { 

  background-color: oklch(70% 0.15 240); /* Zartes Blau */ 

  &:hover { 

    background-color: oklch(70% 0.15 280); /* Verschiebung zu Lila */

   }

} 

Durch Änderung des Farbtons (Hue) verschiebt sich die Farbe auf natürliche Weise, während Helligkeit und Chroma gleich bleiben — perfekt für subtile Hover‑Effekte oder konsistente Farbthemen.

Gradient‑Beispiel

Sag dem „toten Grau“ in Farbverläufen Lebwohl:

 .hero { 

    background: linear-gradient( to right, oklch(70% 0.15 240), /* Hellblau */ oklch(50% 0.15 240) /* Dunkleres Blau */ );

} 

Das Ergebnis? Ein sanfter, lebendiger Übergang — ohne unerwünschte Grautöne.

Relative Farben

oklch() unterstützt relative CSS‑Farb‑Syntax und erlaubt es, Farben aus anderen Farbräumen umzuwandeln:

 .original { 

  background-color: hsl(240deg 50% 70%);

}

.converted { 

  background-color: oklch(from hsl(240deg 50% 70%) l c 280deg);

} 

Verwende das Schlüsselwort from, gefolgt von einer Farbe, und passe dann l, c, oder h (und alpha) an — praktisch, um bestehende Farbpaletten zu übernehmen und zu modifizieren.

Rechenoperationen in oklch()

Du kannst calc() nutzen, um Werte dynamisch anzupassen:

 .element { 

  background-color: oklch( calc(var(--base-lightness) + 10%) 0.15 240 / 0.8 );

} 

Oder du passt relative Farben an:

 .element { 

  background-color: oklch(from rgb(100, 149, 237) calc(l + 20%) c h);

} 

Diese Flexibilität macht oklch() zu einem leistungsstarken Werkzeug für dynamische Designs.

Browser-Unterstützung

Stand heute wird oklch() von modernen Browsern wie Chrome, Edge, Firefox und Safari unterstützt — gute Nachrichten: es ist bereit für den produktiven Einsatz. Aber wie sieht es mit älteren Browsern oder Nachzüglern aus, die noch nicht mithalten?

CSS hilft mit der @supports-Regel. So kannst du einen Fallback (z. B. eine einfache RGB‑Farbe) für Browser angeben, die OKLCH nicht verstehen:

 .element { 

  background-color: rgb(100, 149, 237); 

/* Fallback: Kornblumenblau */}

  @supports (color: oklch(0% 0 0)) { 

    .element { 

      background-color: oklch(70% 0.15 240); /* OKLCH zartes Blau */ 

    }

} 

Wenn der Browser OKLCH unterstützt, wird der oklch()-Wert verwendet; andernfalls bleibt es beim RGB‑Fallback. Du kannst auch Polyfills wie das postcss-oklab-function Plugin einsetzen, um Kompatibilität sicherzustellen — allerdings reicht heutzutage meist der Fallback aus.

Weitere Informationen

• OKLCH in CSS: why we moved from RGB and HSL (Evil Martians Blog)
• Two Things That are Not Great About OKLCH (Chris Coyier)
• Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS (Geoff Graham)
• OKLCH Color Picker and Converter