Was sind OKLCH-Farben?

• OKLCH ist ein modernes Farbmodell, das auf die menschliche visuelle Wahrnehmung abgestimmt ist und die Eigenschaft besitzt, dass Änderungen bei Helligkeit, Sättigung und Farbton zwischen Farben gleichmäßig wahrgenommen werden; es ist also ein wahrnehmungsuniformes Farbmodell
• Es besteht aus Lightness (Helligkeit), Chroma (Sättigung) und Hue (Farbton) und ermöglicht im Vergleich zu älteren Modellen die Erstellung konsistenter Farbpaletten
• Wenn bei gleicher Helligkeit und Sättigung nur der Hue-Wert geändert wird, lassen sich gleichmäßige Farbpaletten erzeugen, was für UI-Design vorteilhaft ist
• Gegenüber sRGB/HSL bietet es vorhersehbare Helligkeitsänderungen und gleichmäßige Verläufe, in manchen Fällen können jedoch unbeabsichtigte Farben entstehen
• Auf modernen Displays wie Display-P3 ist eine noch breitere Farbdarstellung möglich; unterstützt wird es in modernen Browsern über CSS Color 4, inklusive sRGB-Fallback, und es etabliert sich zunehmend als Webstandard

---

Einführung in das OKLCH-Farbmodell

• OKLCH ist ein modernes Farbmodell, das mit dem Ziel der wahrnehmungsbezogenen Uniformität (perceptually uniform) entwickelt wurde
• Das Modell arbeitet näher an der tatsächlichen menschlichen Farbwahrnehmung, wodurch der Umgang mit Farben in digitalem Design und der Frontend-Entwicklung deutlich einfacher wird

Grundkonzepte von Farbmodellen

• Ein Farbmodell ist ein System, mit dem Farben mathematisch definiert und dargestellt werden
• Häufig verwendete Modelle sind zum Beispiel: RGB, HSL, LCH, OKLCH, LAB, XYZ
• Jedes Modell bestimmt, wie einfach sich Farben darstellen und bearbeiten lassen

Beispiele für Farbangaben

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut (Farbraumumfang)

• Gamut bezeichnet den gesamten Farbbereich, den ein Farbmodell darstellen kann
• Typische Gamuts sind: sRGB (Webstandard), Display-P3 (Unterstützung auf modernen Geräten)
• Ein Farbraum besitzt neben dem Gamut-Bereich auch weitere Eigenschaften wie White Point und Transfer Function

Aufbau von OKLCH

OKLCH und LCH bestehen beide aus drei Werten: Lightness, Chroma, Hue
OKLCH basiert auf dem Farbraum OKLab

• Lightness (Helligkeit): angegeben als 0–1 oder 0 %–100 %, garantiert eine gleichmäßige Veränderung der Helligkeit
• Chroma (Sättigung): die Intensität der Farbe, ähnlich der Saturation (Sättigung) in HSL
• Hue (Farbton): Darstellung des Farbtons als Winkel von 0 bis 360 Grad

Vorteile und Einsatz von OKLCH

• Konsistente Helligkeit

  • Wenn in OKLCH Farben mit gleicher Helligkeit und gleichem Chroma, aber unterschiedlichem Hue definiert werden, wirken alle Farben ähnlich hell
  • Bei herkömmlichem sRGB oder HSL können Helligkeit und Sättigung je nach Farbe inkonsistent erscheinen
  • Deshalb eignet sich OKLCH besonders gut für die Erstellung wahrnehmungsuniformer Farbpaletten

• Vorhersehbare Helligkeitsstufen

  • In OKLCH lassen sich durch Änderung der Helligkeit verschiedene Farbstufen erzeugen, ohne dass sich Hue (Farbton) oder Chroma (Sättigung) verändern
  • Bei HSL und ähnlichen Modellen tritt beim Ändern der Helligkeit häufig ein Drift des Farbtons auf
  • Mit OKLCH lassen sich daher allein über die Helligkeitsanpassung konsistente Helligkeitsabstufungen erzeugen

• Umgang mit Verläufen (Gradients)

  • In sRGB werden Rot-, Grün- und Blauwerte interpoliert, wodurch Zwischenstufen matt wirken oder starke Helligkeitssprünge entstehen können
  • OKLCH interpoliert entlang der Achsen Lightness, Chroma und Hue, wodurch natürlichere Verläufe möglich sind
  • Da der Hue-Wert eine kreisförmige Struktur hat, können dabei jedoch unerwartete Farbverschiebungen auftreten
  • Um das zu vermeiden, kann mit linearer Interpolation in OKLab ein besser vorhersagbares Ergebnis erzielt werden

Unterstützung von Farbräumen

• sRGB deckt einen Teil des breiten Farbraums moderner Displays nicht ab
• Mit OKLCH lassen sich auf Geräten mit breiten Farbräumen wie Display-P3 lebendigere Farben darstellen
• Auf Geräten, die nur sRGB unterstützen, werden die Farben auf möglichst ähnliche Farben abgebildet

Maximaler Chroma-Wert

• Mit OKLCH lassen sich mathematisch auch Farben definieren, die außerhalb des tatsächlich darstellbaren Bereichs eines Bildschirms liegen
• Ein zu großer Chroma-Wert wie etwa oklch(0.7 0.4 40) kann zum Beispiel nicht real angezeigt werden und wird daher auf eine nahe liegende Farbe geclippt
• Es ist wichtig, das Konzept des maximalen Chroma-Werts zu verstehen und je nach Farbton, Helligkeit und gewähltem Farbraum (sRGB, Display-P3) passende Werte zu setzen

Browser-Unterstützung und Fallback

• OKLCH-Farben wurden mit dem CSS Color Module Level 4 eingeführt und werden von den meisten modernen Browsern unterstützt
• In älteren Browsern werden sie eventuell nicht unterstützt; mit der CSS-Direktive @supports lassen sich Fallback-Werte definieren

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• In unterstützten Browsern wird OKLCH verwendet, in nicht unterstützten Browsern sRGB-Farbe (hex)

Das Tool oklch.fyi

• oklch.fyi ist ein Web-Tool, das Funktionen rund um OKLCH wie das Erzeugen von OKLCH-Farbpaletten oder die Umwandlung in CSS-Variablen bereitstellt
• Es erleichtert den Einsatz von OKLCH-Farben in Design-Systemen, Themes und ähnlichen Projekten