Farbgamut erklärt: sRGB, P3 und Rec. 2020

Die Farben auf Ihrem Bildschirm sind durch eine Grenze begrenzt, über die die meisten Nutzer nie nachdenken: den Farbgamut. Für den Großteil der Geschichte des Webs war diese Grenze für praktisch jedes Gerät dieselbe — sRGB, ein 1996 etablierter Standard. Heute zeigen moderne Telefone, Laptops und Monitore routinemäßig deutlich mehr Farben als sRGB erlaubt, und CSS besitzt die Werkzeuge, um dies zu nutzen — wenn man weiß wie.

Dieser Leitfaden erklärt, was ein Farbgamut ist, stellt sRGB, Display P3 und Rec. 2020 als die drei relevantesten Gamuts für Webarbeit vor und zeigt genau, wie CSS-Weitgamut-Farben mit der @media (color-gamut)-Feature-Query eingesetzt werden.

Was ist ein Farbgamut?

Ein Farbgamut ist der vollständige Bereich an Farben, den ein Farbsystem darstellen oder reproduzieren kann. Nicht alle für das menschliche Auge sichtbaren Farben lassen sich in jedem Farbsystem ausdrücken — physikalische und technische Einschränkungen bedeuten, dass jedes System nur eine Teilmenge dessen abdeckt, was wir wahrnehmen können.

Das CIE-1931-Farbdiagramm

Farbwissenschaftler stellen Gamuts visuell mithilfe des CIE-1931-Normfarbdiagramms dar — einer hufeisenförmigen 2D-Karte aller Farben, die das durchschnittliche menschliche Auge wahrnehmen kann. Die äußere Grenze des Hufeisens repräsentiert die reinsten, am stärksten gesättigten Spektralfarben. Innere Bereiche repräsentieren weniger gesättigte, stärker gemischte Farben. Weiß liegt nahe dem Zentrum.

Ein spezifischer Farbgamut erscheint auf diesem Diagramm als Polygon — typischerweise ein Dreieck, das durch seine drei Primärfarben (Rot, Grün, Blau) definiert wird. Die Fläche dieses Dreiecks bestimmt, wie viele sichtbare Farben der Gamut abdeckt:

• Ein kleines Dreieck = ein enger Gamut (weniger Farben)
• Ein großes Dreieck = ein weiter Gamut (mehr Farben)

Die drei Primärfarben eines jeden Gamuts bestimmen, wo die Scheitelpunkte des Dreiecks liegen. Das Verschieben der Primärfarben hin zur äußeren Kante des Hufeisens (gesättigtere Primärfarben) vergrößert das Dreieck und den Gamut.

Warum Gamuts für Webdesign wichtig sind

Bis vor Kurzem war dies ein akademisches Anliegen. Fast jedes im Einsatz befindliche Display war sRGB-kompatibel, und Webfarben waren universell sRGB-Farben. Aber da Display P3 zum Standard auf Apple-Geräten wurde (alle iPhones seit 2016, alle neueren MacBooks, iMacs, iPad Pros und Studio Displays) und HDR-Monitore sich unter Windows und in der Gaming-Welt verbreiten, hat sich die praktische Display-Landschaft fragmentiert.

Im Web bereitgestellte sRGB-Inhalte sehen auf P3- und Rec.-2020-Displays nach wie vor korrekt aus — sRGB-Farben sind eine Teilmenge dieser weiteren Gamuts. Inhalte, die in Weitgamut-Farbräumen spezifiziert sind, können jedoch die reicheren, stärker gesättigten Primärfarben von P3 und Rec. 2020 nutzen.

sRGB: Der Webstandard seit 1996

Geschichte und Verbreitung

Der sRGB-Farbraum (Standard-Rot-Grün-Blau) wurde 1996 gemeinsam von HP und Microsoft entwickelt und von der IEC als IEC 61966-2-1 standardisiert. Sein Ziel war es, eine gemeinsame Referenz für Consumer-Monitore, Drucker und das Web bereitzustellen — um konsistente Farbwiedergabe ohne Gerätekalibrierung zu ermöglichen.

sRGB wurde zum Standard-Farbraum für: - Webbrowser (alle CSS-Farben sind sRGB, sofern nicht anders angegeben) - Digitalkameras (JPEG-Dateien verwenden standardmäßig sRGB) - Die meisten Consumer-Monitore der 2000er und 2010er Jahre - Windows-Display-Subsystem - Standard-SDR-Inhalte (Standard Dynamic Range)

sRGB-Abdeckung

sRGB deckt etwa 35 % des sichtbaren Farbgamuts gemäß dem CIE-1931-Farbdiagramm ab. Das klingt begrenzt, umfasst aber einen praktischen Bereich, der eine breite Vielfalt natürlicher und künstlicher Farben des alltäglichen Lebens abdeckt.

Die sRGB-Primärfarben sind: - Rot: ungefähr x=0,64, y=0,33 (ein leicht orange-rotes Rot) - Grün: ungefähr x=0,30, y=0,60 (ein Gelbgrün) - Blau: ungefähr x=0,15, y=0,06 (ein Blauviolett)

sRGB in CSS

Jede CSS-Farbe, die Sie je geschrieben haben, ist sRGB, sofern Sie nicht explizit etwas anderes angegeben haben. Dazu gehören:

• Hex-Codes: #3B82F6
• Benannte Farben: blue, coral, rebeccapurple
• rgb() und rgba(): rgb(59, 130, 246)
• hsl() und hsla(): hsl(217, 91%, 60%)

Diese werden alle zu sRGB-Werten aufgelöst. Ein Wert von #FF0000 bedeutet genau das sRGB-Primärrot — das röteste Rot, das sRGB darstellen kann. Auf einem P3-Display wird dieses Rot originalgetreu wiedergegeben, nutzt aber nicht die noch rötere native Primärfarbe von P3.

Display P3: Apples moderner Standard

Was ist Display P3?

Display P3 ist ein von Apple für seine Retina-Displays entwickelter Farbraum, abgeleitet vom DCI-P3-Farbraum, der bei der digitalen Kinovorführung verwendet wird. Er verwendet denselben Weißpunkt wie sRGB (D65, der Standard-Tageslichtilluminant) und dieselbe Gammakurve, definiert aber andere, stärker gesättigte Primärfarben.

Display P3 deckt etwa 45 % des sichtbaren Farbgamuts ab — ungefähr 26 % mehr Fläche als sRGB. Die erweiterte Abdeckung ist in den Rot- und Grünbereichen am ausgeprägtesten, mit weniger dramatischer Erweiterung im Blau.

Welche Geräte unterstützen Display P3?

Apple übernahm Display P3 ab 2015–2016 weitflächig:

• iPhone 7 und später — alle nachfolgenden iPhone-Modelle
• iPad Pro (9,7 Zoll, 2016) und später — alle nachfolgenden iPad-Pro-Modelle
• MacBook Pro (Ende 2016) und später mit Retina-Display
• iMac (Retina 5K, Ende 2015) und später
• Apple Pro Display XDR, Studio Display

Auf der Windows- und Android-Seite sind viele High-End-Laptops und -Telefone ebenfalls mit P3-fähigen Displays ausgestattet, obwohl die Verbreitung weniger einheitlich ist. Stand 2025 unterstützen die meisten High-End-Consumer-Geräte mindestens P3.

P3-Farben in CSS angeben

CSS Color Level 4 stellt die color()-Funktion mit dem display-p3-Farbraum bereit und ermöglicht so die direkte Angabe von Farben mit den P3-Primärfarben:

/* P3-Rot — lebhafter als sRGB-Rot */
color: color(display-p3 1 0 0);

/* Ein lebhaftes P3-Grün */
color: color(display-p3 0 1 0);

/* Ein sattes Korall in P3 */
color: color(display-p3 0.95 0.42 0.37);

Die drei Werte in color(display-p3 R G B) sind auf 0–1 normiert (nicht 0–255). Das unterscheidet sich von der rgb()-Funktion.

Den Unterschied wahrnehmen

Die praktische Auswirkung von P3 ist am stärksten bei hochgesättigten Farben sichtbar. Ein lebhaftes P3-Rot (vergleichbar mit color(display-p3 1 0 0)) ist auf einem P3-fähigen Display spürbar gesättigter als sRGB-Rot #FF0000. Für Markenfarben und Hero-Bilder, die maximale Lebendigkeit erfordern, bietet P3 eine bedeutungsvolle Verbesserung.

Rec. 2020: Die HDR- und Kino-Zukunft

Was ist Rec. 2020?

Rec. 2020 (offiziell ITU-R BT.2020) ist der Farbstandard für Ultra-High-Definition-Fernsehen (UHDTV) und HDR-Inhalte. Er wurde 2012 von der Internationalen Fernmeldeunion definiert und repräsentiert einen dramatisch weiteren Gamut als alles, was heute im Consumer-Bereich üblich ist.

Rec. 2020 deckt etwa 75 % des sichtbaren Farbgamuts ab — mehr als doppelt so viel Fläche wie sRGB und erheblich weiter als P3. Seine Primärfarben sind an den Spektralgrenzen spezifischer Laserwellenlängen definiert, was bedeutet, dass sie theoretisch die am stärksten gesättigten möglichen Farben bei diesen Wellenlängen sind.

Aktuelle Display-Unterstützung

Hier der entscheidende Vorbehalt: Nahezu kein derzeit erhältliches Consumer-Display deckt den Rec.-2020-Gamut vollständig ab. High-End-HDR-Fernseher können 75–90 % von Rec. 2020 abdecken; für volle Abdeckung werden professionelle Kinoprojektoren und spezialisierte HDR-Mastering-Monitore benötigt.

Rec. 2020 ist jedoch der Referenzgamut für HDR-Inhaltsstandards wie HDR10, Dolby Vision und HLG. Auch wenn ein Display ihn nicht vollständig reproduzieren kann, werden in Rec. 2020 gemasterte Inhalte für die Darstellung auf Displays mit kleinerem Gamut tonemappt.

Rec. 2020 in CSS

/* Rec.-2020-Grün — extrem lebhaft, jenseits der meisten Display-Fähigkeiten */
color: color(rec2020 0 1 0);

/* Ein tiefes Rot in Rec. 2020 */
color: color(rec2020 0.8 0.1 0.1);

Für Webarbeit heute werden Rec.-2020-Farben als die nächste reproduzierbare Farbe im vom Display unterstützten Gamut dargestellt. Das macht es zukunftskompatibel: Browser mit Rec.-2020-Fähigkeit zeigen die volle Farbe; andere zeigen die beste Annäherung.

CSS-Weitgamut-Farben mit @media (color-gamut)

CSS stellt eine Media-Query speziell zur Erkennung der Display-Gamut-Fähigkeit und Bereitstellung entsprechender Farben bereit:

@media (color-gamut: srgb) {
  /* Unterstützt von praktisch allen Farb-Displays */
}

@media (color-gamut: p3) {
  /* Display unterstützt mindestens den P3-Gamut */
}

@media (color-gamut: rec2020) {
  /* Display unterstützt mindestens den Rec.-2020-Gamut */
}

Die Werte sind progressiv — p3 bedeutet, dass das Display mindestens P3 unterstützt (sRGB ist also ebenfalls abgedeckt), und rec2020 bedeutet, dass das Display mindestens Rec. 2020 unterstützt (einschließlich P3 und sRGB).

Progressive-Enhancement-Muster

Der empfohlene Ansatz ist, die sRGB-Basisfarbe zuerst zu definieren und dann für breitgamutige Displays progressiv zu erweitern:

.hero-button {
  /* sRGB-Fallback — funktioniert auf allen Displays */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* Leuchtendes Rot auf P3-Displays */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Noch lebhafter auf Rec.-2020-Displays */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

Auf einem Standard-sRGB-Monitor zeigt der Button das Hexrot #E63946. Auf einem iPhone, MacBook Pro oder einem modernen Weitgamut-Monitor zeigt er die lebhaftere P3-Version. Auf einem Rec.-2020-fähigen Display die leuchtkräftigste Version.

oklch() für Weitgamut verwenden

Der OKLCH-Farbraum ist nicht auf einen bestimmten Gamut beschränkt, kann aber Farben außerhalb von sRGB auf natürliche Weise adressieren — Werte, die außerhalb des 0–1-Bereichs in sRGB-Begriffen liegen, sind automatisch weitgamutig. Das macht OKLCH praktisch für gamut-übergreifende Farbarbeit:

.accent {
  /* OKLCH kann P3 und darüber hinaus ausdrücken */
  color: oklch(60% 0.25 27deg);
}

Der Browser mappt die angegebene OKLCH-Farbe auf die nächste reproduzierbare Farbe im vom Display unterstützten Gamut. Wenn das Display P3-fähig ist, wird auf die P3-Farbe gemappt; bei sRGB wird auf das nächste sRGB-Äquivalent geclippt.

Das ist ein überzeugendes Argument für OKLCH in Design-Systemen: Man kann eine beabsichtigte Farbwahrnehmung angeben, und der Browser erledigt das Gamut-Mapping automatisch. ColorFYIs Farbkonverter kann dabei helfen, zwischen sRGB-Hex-Werten und ihren OKLCH-Äquivalenten zu übersetzen.

Der color-gamut: srgb-Ausgangspunkt

Jedes Farb-Display unterstützt mindestens color-gamut: srgb — dies trifft auf jedes nicht-monochromatische Display zu. Diese Media-Query-Wert wird nur benötigt, wenn Farb-Displays gegenüber hypothetischen monochromatischen Displays angesteuert werden sollen, was selten notwendig ist.

In der Praxis ist die nützliche Abfrage color-gamut: p3, die das Apple-Ökosystem und einen wachsenden Anteil von Android- und Windows-Geräten abdeckt.

Browser-Unterstützung

Stand 2025: - @media (color-gamut) — unterstützt in allen wichtigen Browsern (Chrome, Firefox, Safari, Edge) - color(display-p3) — unterstützt in allen wichtigen Browsern - color(rec2020) — unterstützt in Chrome und Safari; Firefox-Unterstützung folgte - oklch() — unterstützt in allen wichtigen Browsern

Es gibt keine Browser im allgemeinen Gebrauch, die diese Funktionen nicht verarbeiten könnten; sie rendern entweder die Weitgamut-Farbe oder greifen korrekt auf die vorangehende sRGB-Deklaration zurück.

Praktische Hinweise für Webdesign-Projekte

Sollte P3 heute verwendet werden?

Ja, mit einem Progressive-Enhancement-Ansatz. Das Abwärtsrisiko ist null — sRGB-Fallbacks stellen sicher, dass das Design auf allen Displays korrekt aussieht. Der Vorteil ist, dass ein bedeutender und wachsender Teil des Publikums lebhaftere, reichhaltigere Farben sieht.

Die wirkungsvollsten Anwendungsfälle sind: - Markenfarben und Akzente, die so lebhaft wie möglich erscheinen sollen - Hero-Bilder und Werbegrafiken, bei denen Lebhaftigkeit Engagement fördert - Datenvisualisierung, wo ein breiterer Farbbereich unterschiedlichere kategoriale Farben ermöglicht

Welche Farben profitieren am meisten von P3?

Die Unterschiede von P3 gegenüber sRGB sind am größten bei: - Lebhaften Rottönen und Orangetönen: Das P3-Rot-Primär ist spürbar gesättigter - Gesättigten Grüntönen: P3 erweitert sich deutlich in den Gelbgrün-Bereich - Kräftigen Rosa- und Magentatönen: P3 erfasst die lebhafte Mode- und Beauty-Palette besser

Neutrale Farben, dunkle Farben und Pastelltöne zeigen minimale sichtbare Unterschiede zwischen sRGB und P3, da sie nahe am Zentrum des Gamuts liegen, wo beide Farbräume erheblich überlappen.

Praktischer Workflow

1. Farbsystem wie gewohnt in Hex (sRGB) entwerfen
2. Die 2–5 Farben identifizieren, bei denen maximale Lebhaftigkeit wichtig ist (primäre Markenfarbe, Hero-Akzent, wichtige UI-Zustände)
3. ColorFYIs Farbkonverter verwenden, um das OKLCH-Äquivalent jeder Farbe zu finden
4. In CSS den OKLCH-Wert (oder das color(display-p3)-Äquivalent) angeben und den Browser das Gamut-Mapping erledigen lassen
5. Auf einem P3-fähigen Display (jedes moderne MacBook oder iPhone) testen, um die visuelle Verbesserung zu überprüfen

Gamut-Vergleich

Wichtigste Erkenntnisse

• Ein Farbgamut ist der gesamte Bereich an Farben, den ein System darstellen kann, visualisiert als Dreieck im CIE-Farbdiagramm. Breitere Primärfarben = größeres Dreieck = mehr Farben.
• sRGB ist seit 1996 der universale Webstandard und deckt etwa 35 % der sichtbaren Farben ab. Alle Standard-CSS-Farbwerte (rgb(), hsl(), Hex) sind sRGB.
• Display P3 deckt etwa 45 % der sichtbaren Farben ab und ist Standard auf allen Apple-Geräten seit 2016 (iPhone, MacBook, iPad Pro, iMac) und vielen modernen Windows- und Android-Geräten.
• Rec. 2020 deckt etwa 75 % der sichtbaren Farben ab und wird als Referenzgamut für HDR-Inhalte verwendet, aber kaum ein Consumer-Display reproduziert ihn heute vollständig.
• @media (color-gamut: p3) verwenden, um Farben für P3-fähige Displays progressiv zu verbessern, mit sRGB als Baseline-Fallback.
• color(display-p3 R G B) gibt Farben im P3-Farbraum in CSS an; Werte sind auf 0–1 normiert.
• oklch() drückt Weitgamut-Farben auf natürliche Weise aus und ist für Design-Systeme zunehmend bevorzugt — der Browser erledigt das Gamut-Mapping zur Display-Fähigkeit automatisch.
• ColorFYIs Farbkonverter verwenden, um zwischen Hex, OKLCH und anderen Farbräumen zu übersetzen, während Weitgamut-Farbsysteme aufgebaut werden.