Lebendige Farben mit OKLCH freischalten

Einführung

Das Webdesign hat sich im Laufe der Jahre erheblich weiterentwickelt, und damit auch die Art und Weise, wie wir mit Farben umgehen. Während RGB und Hex-Codes seit Jahrzehnten der Standard sind, ist ein neuer Kandidat aufgetaucht, um deren Einschränkungen zu beheben: das OKLCH-Farbmodell.

Was ist OKLCH?

OKLCH ist ein Farbraum, der auf dem Oklab-Farbmodell basiert und für wahrnehmungsbezogene Gleichmäßigkeit entwickelt wurde. Es löst viele der Probleme, die in älteren Modellen wie HSL und RGB zu finden sind, insbesondere in Bezug darauf, wie unsere Augen Helligkeit und Sättigung wahrnehmen.

Der Name OKLCH steht für:

• L - Lightness (Helligkeit)
• C - Chroma (Buntheit)
• H - Hue (Farbton)

Die Komponenten von OKLCH

Lightness (L) - Helligkeit

Die Helligkeit steuert, wie hell oder dunkel die Farbe ist.

• 0% ist absolutes Schwarz.
• 100% ist absolutes Weiß.

Im Gegensatz zu HSL, bei dem 50% Helligkeit je nach Farbton sehr unterschiedlich aussehen können (z. B. Gelb vs. Blau), ist die OKLCH-Helligkeit konsistent. Ein Wert von 60% Helligkeit erscheint über alle Farbtöne hinweg gleich hell.

Chroma (C) - Buntheit

Chroma steht für die Intensität oder Reinheit der Farbe (ähnlich der Sättigung).

• 0 ist komplett grau.
• 0.4 (ca.) ist das Maximum für die meisten sRGB-Farben.
• Werte können für Wide-Gamut-Displays (P3, Rec.2020) höher gehen (z. B. 0.5 oder mehr).

Hue (H) - Farbton

Der Farbton ist der Winkel auf dem Farbkreis, ähnlich wie bei HSL.

• 0 - 360 Grad.
• 0 ist ungefähr Rot, 120 Grün, 240 Blau.

Warum OKLCH verwenden?

1. Wahrnehmungsbezogene Gleichmäßigkeit

Wenn man in HSL den Farbton ändert, während die Helligkeit konstant bleibt, kann die Farbe visuell heller oder dunkler wirken. In OKLCH bleibt die wahrgenommene Helligkeit konsistent, was die Erstellung barrierefreier Farbpaletten erheblich erleichtert.

2. Zugang zu Wide-Gamut-Farben

SRGB (verwendet von Hex und RGB) kann nur einen begrenzten Farbbereich darstellen. Moderne Monitore unterstützen P3 und Rec.2020, die viel lebendigere Grün- und Cyan-Töne anzeigen können. OKLCH ermöglicht Ihnen den Zugriff auf diese "supersatten" Farben, die zuvor in CSS nicht spezifiziert werden konnten.

3. Vorhersehbare Farbmischung

Aufgrund seiner wahrnehmungsbezogenen Gleichmäßigkeit erzeugt das Erstellen von Verläufen und das Mischen von Farben in OKLCH glatte, natürliche Übergänge ohne die "grauen Totzonen", die oft in RGB-Verläufen zu sehen sind.

Verwendung von OKLCH in CSS

Die Unterstützung für OKLCH ist jetzt in allen wichtigen modernen Browsern verfügbar.

.my-element {
  /* Ein lebendiges Pink */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* Mit Alpha-Transparenz */
  color: oklch(80% 0.1 120 / 0.5);
}

Fazit

OKLCH ist die Zukunft der Farbe im Web. Indem es eine Möglichkeit bietet, Farben so zu definieren, dass sie der menschlichen Wahrnehmung entsprechen und die vollen Fähigkeiten moderner Bildschirme freischalten, gibt es Designern und Entwicklern ein leistungsstarkes neues Werkzeug an die Hand, um schöne, barrierefreie digitale Erlebnisse zu schaffen.