OKLCH Farben

Quelle: oklch.net

OKLCH verstehen: Die Zukunft der Webfarben

Ein Leitfaden zu einem Farbraum, der Farben so darstellt, wie wir sie wirklich sehen – und damit das Webdesign verändert

Was ist OKLCH?

OKLCH ist eine zylindrische Darstellung des OKLAB-Farbraums. Björn Ottosson entwickelte ihn 2020. OKLCH steht für Helligkeit, Chroma und Farbton – und ermöglicht eine intuitivere Farbwahl als RGB oder HSL.

RGB ist geräteabhängig. HSL zeigt Schwächen bei der Farbwahrnehmung. OKLCH orientiert sich am menschlichen Sehen: Gleiche Zahlenwerte führen zu gleich starken wahrgenommenen Änderungen.

Warum OKLCH statt RGB und HSL?

RGB-Einschränkungen

• Abhängig vom Ausgabegerät
• Unklare Farbmischung
• Varianten schwer zu erzeugen
• Ungeeignet für Barrierefreiheit

HSL-Mängel

• Keine echte Gleichmäßigkeit der Farbwahrnehmung
• Helligkeit hängt vom Farbton ab
• Sättigung reagiert unvorhersehbar
• Begrenzung auf sRGB-Farbraum

OKLCH-Vorteile

• Konstante Wahrnehmung von Farbunterschieden
• Gleiche Helligkeit über alle Farbtöne
• Vorhersagbare Farbbeziehungen
• Unterstützt große Farbräume (P3, Rec2020)

Stärke einer einheitlichen Farbwahrnehmung

Eine gleich starke Änderung des Zahlenwerts führt – unabhängig von der Ausgangsfarbe – zu einer gleich empfundenen Änderung. Das ist entscheidend für:

Design-Konsistenz

Erstellen Sie Farbvarianten mit gleicher Helligkeit – wichtig für Hover-Zustände, deaktivierte Elemente und Designsysteme.

Barrierefreiheit

Berechnen Sie Kontraste verlässlich. Arbeiten Sie mit realen Helligkeitswerten, um WCAG-Kriterien zu erfüllen.

Jenseits von sRGB: Farben mit großem Farbumfang

Moderne Displays zeigen mehr Farben als sRGB. OKLCH nutzt diese Farbräume ohne Zusatzaufwand:

sRGB

Standardfarbraum für alle Displays

P3

25 % mehr Farben, oft in Apple-Geräten

Rec2020

Zukunftssicherer Farbraum für HDR

OKLCH deckt moderne Displays ab und bietet automatisch Fallbacks für ältere Bildschirme.

OKLCH in der Praxis

Farbpaletten erstellen

 /* Basisfarbe */

  --primary: oklch(0.6 0.2 250); 

/* Hellere Variante – nur L erhöhen */

  --primary-light: oklch(0.8 0.2 250); 

/* Dunklere Variante – nur L verringern */

  --primary-dark: oklch(0.4 0.2 250); 

/* Komplementär – 180° zum Farbton addieren */

  --secondary: oklch(0.6 0.2 70); 

Design mit Barrierefreiheit zuerst

 /* WCAG AA Kontrast sicherstellen */

  --text-on-light: oklch(0.3 0 0); /* L = 0.3 für dunklen Text */

  --text-on-dark: oklch(0.9 0 0); /* L = 0.9 für hellen Text */

  /* Konsistente wahrgenommene Helligkeit */

  --success: oklch(0.7 0.15 140);  /* Grün */

  --warning: oklch(0.7 0.15 90); /* Gelb */

  --error: oklch(0.7 0.15 30); /* Rot */ 

Browser-Unterstützung & Migration

Aktuelle Unterstützung

OKLCH funktioniert in allen modernen Browsern:

• Chrome ab Version 111 (März 2023)
• Firefox ab Version 113 (Mai 2023)
• Safari ab Version 15.4 (März 2022)
• Edge ab Version 111 (März 2023)

Strategie für die Umstellung

 /* Fallbacks für ältere Browser definieren */

  .element {

    background-color: rgb(0, 128, 255); /* Fallback */

    background-color: oklch(0.65 0.2 240); /* OKLCH für moderne Browser */

  }


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

    .element {

      color: oklch(0.7 0.15 180);

    }

  } 

Die Zukunft ist visuell einheitlich

OKLCH steht für einen neuen Umgang mit Farbe im Web. Statt technischer Werte zählt, wie wir Farben sehen und erleben. Das bringt klare Vorteile:

• Farben lassen sich intuitiver auswählen und steuern
• Barrierefreiheit wird planbarer dank stabiler Helligkeit
• Designs passen sich neuen Displays problemlos an
• Farbverläufe und Varianten bleiben stimmig

Mehr

Interview mit Björn Ottosson, dem Entwickler des OKLAB-Farbraums.

Verwandte Beiträge