CIE-Farbräume: sRGB, Display-P3 und OKLCH im Vergleich

Wenn du in CSS color: red schreibst, antwortet der Browser mit einer Farbe im sRGB-Farbraum. Wenn du color: oklch(62.8% 0.258 29.234) schreibst, antwortet er mit derselben Farbe im OKLCH-Modell. Wenn du color(display-p3 1 0 0) schreibst, bekommst du auf einem iPhone ein sichtbar satteres Rot als die red-Variante. Drei Farbräume, drei Antworten auf dieselbe Frage. Dieser Ratgeber erklärt, warum es überhaupt mehrere Räume gibt und wann welcher der richtige ist.

Das CIE-1931-Hufeisen als Basis

Alle digitalen Farbräume sind Ausschnitte aus einem gemeinsamen Bezugssystem: dem CIE-1931-xy-Chromaticity-Diagramm. 1931 in Cambridge verabschiedete die Commission internationale de l’éclairage die Color Matching Functions, gewonnen aus Farbabgleich-Experimenten von Wright und Guild mit rund 27 Probanden. Daraus entstand die mathematische Beschreibung des Standard-Observers und das berühmte hufeisenförmige Diagramm, das alle für das menschliche Auge unterscheidbaren Chromatizitäten zeigt.

Der Außenrand des Hufeisens ist der Spektralrand, also die monochromatischen Wellenlängen von 380 (Violett) bis 700 Nanometern (Rot). Die gerade untere Verbindungslinie zwischen Violett und Rot heißt Purpurlinie und enthält die nicht-spektralen Magenta- und Pink-Töne, die im sichtbaren Spektrum nicht direkt vorkommen, sondern nur durch Mischung entstehen.

Jeder digitale Farbraum ist ein Ausschnitt aus diesem Hufeisen. sRGB zum Beispiel ist das Dreieck zwischen den drei Standard-Phosphor-Primaren von CRT-Monitoren der 1990er. Display-P3 ist ein größeres Dreieck, das näher an den Spektralrand reicht. Kein technischer Farbraum füllt das ganze Hufeisen, weil das physikalisch keine reale Lichtquelle leisten kann.

sRGB: der Web-Standard seit 1996

sRGB (standard RGB) wurde 1996 von Microsoft und Hewlett-Packard gemeinsam vorgeschlagen und 1999 als IEC 61966-2-1 normiert. Ziel war ein gemeinsamer Farbraum für die damals neue Web-Welt, basierend auf den typischen Phosphor-Eigenschaften von CRT-Monitoren der mittleren 1990er-Jahre.

Die Primärfarben sind:

• Rot: x=0.64, y=0.33
• Grün: x=0.30, y=0.60
• Blau: x=0.15, y=0.06
• Weißpunkt D65: x=0.3127, y=0.3290

Die Gamma-Transferkurve ist annähernd 2.2, präzise als stückweise definierte Funktion mit linearem Anfangsbereich und Potenz-Kurve danach.

sRGB deckt etwa 35,9 Prozent des sichtbaren CIE-1931-Spektrums ab. Das klingt wenig, ist aber praktisch ausreichend für die meisten Inhalte, weil sehr satte Spektral-Farben in Fotos und Designs selten vorkommen. Hex #ff0000 (reines Rot in sRGB) liegt deutlich innerhalb des sichtbaren Spektrums, aber nicht am Spektralrand. Wirklich gesättigtes Spektral-Rot bei 700 nm ist in sRGB schlicht nicht darstellbar.

Display-P3: 25 Prozent mehr Gamut

Display-P3 wurde von Apple 2015 als Display-Standard eingeführt und auf den Filmindustrie-Standard DCI-P3 (SMPTE RP 431-2, 2005) zurückgeführt. Apple modifizierte den Weißpunkt von P3 (X=0.3140, Y=0.3510) auf D65, um Kompatibilität mit sRGB-Inhalten zu wahren. Das iPhone 7 (2016) war das erste P3-Display, seitdem nutzen MacBooks, iPads und iPhones P3 als Default-Display.

Die Primärfarben sind:

• Rot: x=0.680, y=0.320
• Grün: x=0.265, y=0.690
• Blau: x=0.150, y=0.060
• Weißpunkt D65: x=0.3127, y=0.3290

Vergleich zu sRGB: das Rot liegt näher am Spektralrand (x=0.680 statt 0.64), das Grün ebenfalls (x=0.265, y=0.690 statt 0.30, 0.60). Das Blau bleibt unverändert. Der Gamut wächst dadurch um etwa 25 Prozent. In Prozent des Sichtbaren: etwa 45,5 Prozent CIE-1931-Coverage gegenüber 35,9 Prozent bei sRGB.

In CSS notiert man P3-Farben als color(display-p3 R G B) mit Werten zwischen 0 und 1. Beispiel: color(display-p3 1 0 0) ist das reine P3-Rot, deutlich satter als sRGB-Rot. Browser, die kein P3 unterstützen, fallen automatisch auf den nächstgelegenen sRGB-Wert zurück.

OKLCH: wahrnehmungslinear seit 2020

Björn Ottosson, schwedischer Mathematiker und Game-Entwickler, veröffentlichte im Dezember 2020 einen Blog-Post mit der Definition des OKLab-Farbraums und seiner zylindrischen Form OKLCH. Sein Ziel: einen einfachen, wahrnehmungslinearen Raum zu schaffen, der die Schwächen früherer Modelle (CIELAB, HSL) ausgleicht.

OKLCH steht für:

• L (Lightness): von 0 (Schwarz) bis 1 oder 100 Prozent (Weiß).
• C (Chroma): Sättigung, theoretisch unbegrenzt, in der Praxis bis etwa 0.4 für gängige Display-Farben.
• h (Hue): Farbton in Grad von 0 bis 360.

Im Unterschied zu HSL ist OKLCH wahrnehmungslinear. Konkret: ein OKLCH-L-Sprung von 50 auf 60 wirkt für einen Beobachter ungefähr gleich groß, egal welcher Hue. In HSL ist das nicht der Fall, dort wirkt ein L-Sprung bei Gelb dramatisch anders als bei Blau.

W3C CSS Color Module Level 4 hat OKLCH 2022 als CSS-Funktion oklch() standardisiert, und alle modernen Browser unterstützen sie seit 2024 produktiv. Tailwind v4 wechselte 2024 von HSL auf OKLCH als Default-Farbraum für seine Standard-Skalen wie slate-50 bis slate-950.

Vergleichs-Tabelle

Farbraum	Jahr	Standard	Gamut (sichtbar)	Wahrnehmungslinear	Browser-Support 2025
sRGB	1996	IEC 61966-2-1	ca. 35,9 %	Nein	100 %
Display-P3	2015	Apple/SMPTE RP 431	ca. 45,5 %	Nein	ca. 95 %
OKLCH	2020	W3C CSS Color 4	sRGB-zentriert + P3-fähig	Ja	ca. 90 %

Die Tabelle zeigt: sRGB ist der sichere Mindestnenner, Display-P3 bringt Gamut-Vorteile auf moderner Hardware, OKLCH ist die Zukunft für wahrnehmungslineare Skalen-Generierung.

Wann welcher Farbraum sinnvoll ist

sRGB: der pragmatische Default für Web-UI, Brand-Farben mit moderater Sättigung, Cross-Browser-Robustheit. Wer Hex-Werte aus dem Design-System pflegt, arbeitet automatisch in sRGB.

Display-P3: lohnt sich, wenn Markenfarben sehr satt sind und auf modernen Geräten ihre volle Wirkung entfalten sollen. Typische Branchen: Mode, Foto, Spiele, Premium-Produkte. CSS-Notation color(display-p3 R G B) mit automatischem sRGB-Fallback in älteren Browsern.

OKLCH: erste Wahl für Design-Token-Systeme, Theme-Generatoren und algorithmische Farbskalen. Wer eine Marken-Mittel-Farbe hat und daraus eine 11-stufige Skala bauen will, sollte das in OKLCH tun, weil die Wahrnehmungslinearität gleichmäßige Lightness-Sprünge garantiert. Tailwind v4 demonstriert das exemplarisch.

In der Praxis verwendet man oft alle drei kombiniert: sRGB-Hex als Fallback-Notation, OKLCH für die Skalen-Berechnung, Display-P3 für besonders satte Akzentfarben mit color().

OKLCH-Mathematik in Kurzform

OKLCH leitet sich aus OKLab ab, das wiederum aus dem klassischen CIELAB stammt, aber mit korrigierten Matrizen für bessere Wahrnehmungslinearität. Die Konvertierung von sRGB nach OKLab läuft in drei Schritten:

1. sRGB linearisieren (Gamma-Entfernung)
2. lineare RGB-Werte mit Ottossons spezifischer Matrix in LMS-Komponenten transformieren (LMS approximiert die Zapfen-Empfindlichkeiten)
3. LMS in OKLab konvertieren mit kubischer Wurzel und einer zweiten Matrix

Für OKLCH wird OKLab in Polarkoordinaten umgerechnet: L bleibt, Chroma C = sqrt(a² + b²), Hue h = atan2(b, a). Die mathematischen Details stehen auf Björn Ottossons Blog und im W3C-Standard.

Browser-Realität 2025

Caniuse-Stand Anfang 2025: oklch() und oklab() sind in Chrome 111+ (März 2023), Firefox 113+ (Mai 2023) und Safari 15.4+ (März 2022) verfügbar. Cumulativ entspricht das etwa 90 Prozent globaler Browser-Coverage. color(display-p3 ...) ist seit Safari 10.1 (2017) und Chrome/Edge 111 (2023) sowie Firefox 113 (2023) produktiv. Für ältere Browser empfiehlt sich der Fallback per Hex:

.btn {
  background: #f43f5e;
  background: oklch(65% 0.22 25);
}

Der zweite background-Wert überschreibt den ersten in Browsern, die OKLCH verstehen, ältere Browser ignorieren ihn und nutzen den Hex-Fallback.

CIELAB als Brücke zwischen 1931 und 2020

Zwischen den klassischen CIE-1931-Funktionen und dem modernen OKLCH liegt CIELAB als wichtiger Zwischenschritt. Die Commission internationale de l’éclairage standardisierte 1976 den L*a*b*-Farbraum, der wahrnehmungslineare Eigenschaften haben sollte. L* ist die Helligkeit von 0 bis 100, a* die Grün-Rot-Achse, b* die Blau-Gelb-Achse. Die Konvertierung von XYZ nach L*a*b* nutzt eine Funktion mit kubischer Wurzel, was die nichtlineare menschliche Empfindlichkeit annähert. CIELAB wurde zur dominierenden Notation in der industriellen Farbmessung (Druck, Textil, Lacke) und blieb dort bis heute Standard. Schwäche von CIELAB: die Wahrnehmungslinearität ist nicht perfekt, besonders im Blau-Bereich gibt es spürbare Abweichungen. Genau diese Schwäche motivierte Ottosson, mit OKLab eine modernisierte Version zu entwickeln, die die Ottosson-Matrix mit korrigierten LMS-Koeffizienten verwendet. CIELAB lebt aber weiter, vor allem in Print- und Industriestandards, und ist über die CSS-Funktion lab() ebenfalls Teil von CSS Color Module Level 4.

Rec.2020 und HDR-Workflows

Über sRGB und Display-P3 hinaus existiert Rec.2020 (ITU-R BT.2020), der Farbraum für UHD-TV und HDR-Inhalte, standardisiert 2012. Sein Gamut deckt etwa 75,8 Prozent des sichtbaren CIE-1931-Spektrums ab, also fast doppelt so viel wie sRGB. In CSS lässt sich Rec.2020 über color(rec2020 R G B) ansprechen, allerdings unterstützen Browser den Raum aktuell noch nicht so breit wie Display-P3. Für Web-Designer ist Rec.2020 noch ein Nischen-Thema, weil typische Bildschirme den Gamut nicht voll abdecken (selbst moderne OLED-TVs schaffen meist nur etwa 75 Prozent von Rec.2020). Bei HDR-Video, das in HEVC oder AV1 codiert ist, kommt Rec.2020 aber zum Tragen, und die nächste UI-Generation wird zunehmend mit diesen Räumen arbeiten. ProPhoto RGB ist ein weiterer Farbraum, der vor allem in der Fotografie eingesetzt wird; er ist sogar größer als Rec.2020 und enthält theoretisch Farben, die außerhalb des sichtbaren Spektrums liegen, was zur Erhaltung der vollen Foto-Dynamik gedacht ist, aber für Web-Inhalte irrelevant ist.

Worauf es bei der Farbraum-Wahl ankommt

sRGB bleibt die universelle Notation, Display-P3 öffnet Gamut auf modernen Geräten, OKLCH bringt Wahrnehmungslinearität in CSS. Für klassische Web-Apps reicht sRGB. Für Design-Token-Systeme und gleichmäßige Skalen lohnt der Wechsel zu OKLCH. Wer sehr satte Markenfarben hat, ergänzt P3 für die Akzentpunkte. Alle drei sind kompatibel und kombinierbar, das schöne an CSS Color 4: man muss sich nicht für einen entscheiden, sondern kann pro Property den passenden Raum wählen.

Wenn dir ein Fehler auffällt oder eine Quelle veraltet ist, schreib an info@akara-solutions.de, bestätigte Korrekturen dokumentieren wir auf /korrekturen/.