Wide Gamut Farben mit display-p3: kräftigere Farben für moderne Displays

1. Warum sRGB auf modernen Displays nicht mehr ausreicht

Der Farbraum sRGB wurde in den 1990er-Jahren für damalige Röhrenmonitore definiert und ist seitdem der Standardfarbraum im Web geblieben. Moderne Displays, insbesondere die meisten Smartphones, Tablets und hochwertigen Laptop-Bildschirme der letzten Jahre, können jedoch einen deutlich größeren Farbumfang darstellen, bekannt als Wide Gamut. Ohne gezielte CSS-Anweisungen bleibt dieser zusätzliche Farbumfang jedoch komplett ungenutzt, weil klassische Farbnotationen wie Hex, rgb() oder hsl() ausschließlich innerhalb der Grenzen von sRGB definiert sind.

Für Marken mit kräftigen, gesättigten Signalfarben, etwa intensivem Rot oder leuchtendem Grün im Logo, bedeutet das einen sichtbaren Qualitätsverlust auf jedem Wide Gamut fähigen Display. Die tatsächlich darstellbare Farbe des Bildschirms bleibt unerreicht, weil CSS ihr niemals einen Wert außerhalb von sRGB übergibt. Mit display-p3 als zusätzlichem Farbraum in CSS Color Level 4 lässt sich dieser ungenutzte Farbumfang gezielt erschließen.

2. display-p3 in CSS: die color Funktion im Detail

Der Zugriff auf Wide Gamut Farben erfolgt über die generische color() Funktion mit dem Farbraum-Bezeichner display-p3: color(display-p3 1 0 0) definiert das kräftigstmögliche Rot innerhalb des P3-Gamuts, deutlich gesättigter als das identisch aussehende, aber tatsächlich schwächere rgb(255, 0, 0) in sRGB. Die drei numerischen Werte entsprechen Rot, Grün und Blau im P3-Farbraum, jeweils normiert auf den Bereich 0 bis 1.

Wichtig zu verstehen: Nicht jede mit display-p3 definierte Farbe liegt automatisch außerhalb von sRGB. Erst Werte, die den sRGB-Gamut überschreiten, etwa sehr gesättigtes Rot, Grün oder Cyan, profitieren tatsächlich vom breiteren Farbraum. Für gedeckte, wenig gesättigte Farben liefert display-p3 nahezu identische Ergebnisse wie sRGB, weshalb sich der Einsatz vor allem für kräftige Akzent- und Markenfarben lohnt.

Ein weiteres Detail betrifft die Werteschreibweise: Neben den auf 0 bis 1 normierten Dezimalzahlen akzeptiert color() auch Prozentangaben für jeden Kanal, etwa color(display-p3 92% 15% 10%). Beide Schreibweisen sind funktional identisch, in Teams empfiehlt sich aber eine einheitliche Konvention, damit Wide Gamut Werte im gesamten Stylesheet konsistent lesbar bleiben und nicht zwischen Dezimal- und Prozentnotation wechseln.

/* display-p3 accesses the wider gamut directly */
.brand-accent {
  /* Falls back silently in browsers without display-p3 support */
  color: rgb(220, 20, 20);              /* sRGB fallback, first declaration */
  color: color(display-p3 0.92 0.15 0.1); /* more saturated red on wide-gamut displays */
}

.logo-mark {
  fill: color(display-p3 0.05 0.65 0.35); /* vivid green beyond sRGB's reach */
}

/* Percentage notation is equally valid, pick one style per project */
.brand-accent-alt {
  color: color(display-p3 92% 15% 10%);
}

3. Farbraum-Umfang im Vergleich: sRGB, display-p3 und Rec2020

Drei Farbräume sind für das Web relevant, jeder mit unterschiedlichem Umfang. sRGB, seit den 1990er-Jahren Standard, deckt etwa 35 Prozent des von Menschen wahrnehmbaren Farbraums ab. display-p3, ursprünglich aus dem Digital-Cinema-Umfeld stammend und heute Standard auf Apple-Geräten sowie vielen modernen Android-Displays, deckt rund 45 Prozent ab und erweitert vor allem den Rot- und Grünbereich spürbar. Rec2020, der Farbraum für zukünftige UHD-Fernsehstandards, deckt theoretisch über 75 Prozent ab, wird aber von aktuell verkaufter Consumer-Hardware praktisch noch nicht vollständig unterstützt.

Für Web-Projekte 2026 ist display-p3 der relevante Zwischenschritt, weil er von einer erheblichen und wachsenden Zahl an Endgeräten tatsächlich unterstützt wird, während Rec2020 vorerst theoretisch bleibt. Wer heute in Wide Gamut investiert, sollte deshalb gezielt auf display-p3 setzen und Rec2020 als zukünftige Erweiterungsoption im Hinterkopf behalten, statt sie bereits produktiv einzusetzen.

Ein hilfreicher Vergleichsrahmen ist die CIE-1931-Farbtafel, auf der sich die drei Farbräume als ineinander verschachtelte Dreiecke darstellen lassen. sRGB bildet das kleinste Dreieck, display-p3 ein deutlich größeres, das den sRGB-Bereich vollständig einschließt, und Rec2020 das größte, das wiederum display-p3 vollständig umschließt. Diese Verschachtelung erklärt, warum eine Migration von sRGB zu Wide Gamut Farben niemals zu einem Verlust bestehender Farbtöne führt, sondern ausschließlich zusätzliche Farbtöne erschließt.

4. Praxisbeispiel: kräftigere Markenfarben für unterstützte Displays

Ein typischer Anwendungsfall für Wide Gamut Farben ist ein Markenauftritt mit einer sehr gesättigten Signalfarbe, etwa einem intensiven Orangerot in einem Logo oder einem Call-to-Action-Button. Auf einem sRGB-limitierten Display wirkt diese Farbe bereits ausreichend kräftig, auf einem P3-fähigen Display mit display-p3 Deklaration wirkt exakt dieselbe Markenfarbe spürbar lebendiger und intensiver, weil das Display den erweiterten Farbraum tatsächlich ausnutzen kann.

In der Praxis empfiehlt es sich, Wide Gamut Werte gezielt für die wichtigsten zwei bis drei Markenfarben zu definieren, statt das komplette Farbsystem auf display-p3 umzustellen. Sekundäre UI-Farben, Grautöne und Hintergrundfarben profitieren kaum von einem breiteren Gamut, weil sie ohnehin wenig gesättigt sind, weshalb sich der zusätzliche Pflegeaufwand nur bei den auffälligsten Akzentfarben wirklich lohnt.

Ein weiterer sinnvoller Anwendungsfall für Wide Gamut Farben sind Illustrationen und dekorative Farbverläufe in Hero-Bereichen, bei denen kräftige Rot- und Grüntöne bewusst als Blickfang eingesetzt werden. Gerade auf hochauflösenden Displays mit P3-Unterstützung, wie sie in den meisten aktuellen Smartphones verbaut sind, wirkt ein mit display-p3 definierter Farbverlauf spürbar plastischer als dieselbe Komposition in reinem sRGB, ohne dass dafür zusätzliche Bild-Assets ausgeliefert werden müssten.

/* Only the most saturated brand accents benefit from display-p3 */
:root {
  --brand-accent: rgb(230, 40, 30);
}

@supports (color: color(display-p3 1 0 0)) {
  @media (color-gamut: p3) {
    :root {
      --brand-accent: color(display-p3 0.94 0.18 0.12);
    }
  }
}

.cta-button {
  background: var(--brand-accent);
}

5. Fallback-Strategie mit color-gamut und @supports

Zwei Absicherungsmechanismen greifen bei Wide Gamut Farben ineinander: @supports (color: color(display-p3 1 0 0)) prüft, ob der Browser die Syntax überhaupt versteht, während die Media Query @media (color-gamut: p3) prüft, ob das tatsächlich angeschlossene Display den breiteren Farbraum physisch darstellen kann. Beide Prüfungen sind notwendig, weil ein Browser die Syntax unterstützen kann, während das konkrete Display trotzdem nur sRGB darstellt, etwa bei einem älteren externen Monitor an einem neuen Laptop.

Die einfachste und robusteste Fallback-Technik bleibt die doppelte Deklaration derselben CSS-Property: zuerst ein sRGB-Wert, der von jedem Browser verstanden wird, danach der display-p3 Wert, der die erste Deklaration nur überschreibt, wenn der Browser die Syntax versteht. Diese Technik funktioniert ganz ohne @supports oder Media Query, weil ungültige CSS-Werte von Browsern automatisch ignoriert werden, während gültige Werte die vorherige Deklaration überschreiben.

Für Design-Systeme mit vielen Wide Gamut Akzentfarben empfiehlt sich zusätzlich ein zentrales Custom-Property-Paar pro Farbe, ein sRGB-Wert und ein P3-Wert, statt die doppelte Deklaration in jeder einzelnen Komponentenregel zu wiederholen. So bleibt die Fallback-Logik an einer einzigen Stelle wartbar, und neue Komponenten referenzieren einfach die vorhandene Variable, ohne die Fallback-Technik jedes Mal neu zu implementieren.

6. Kombination mit oklch für Wide-Gamut-Interpolation

Der oklch() Farbraum selbst ist nicht an sRGB gebunden und kann Farben jenseits des sRGB-Gamuts direkt beschreiben, ganz ohne die explizite color(display-p3 ...) Syntax. Ein in oklch() mit hoher Chroma definierter Farbton, der sRGB überschreitet, wird von unterstützenden Browsern automatisch auf den größtmöglichen darstellbaren Farbraum des jeweiligen Displays gemappt, was in der Praxis häufig einem P3-ähnlichen Ergebnis entspricht, ohne dass display-p3 explizit im Code auftaucht.

Der praktische Unterschied: display-p3 gibt exakte Kontrolle über einen spezifischen Farbraum, während oklch() mit hoher Chroma dem Browser die Freiheit lässt, automatisch den bestmöglichen Farbraum für das jeweilige Gerät zu wählen. Für Wide Gamut Farbverläufe, bei denen die Übergänge zwischen zwei sehr gesättigten Farbtönen wahrnehmungsgleichmäßig wirken sollen, ist oklch() häufig die bessere Wahl, weil color-mix() und Gradient-Interpolation in oklch() konsistentere Zwischenwerte erzeugen als in display-p3 direkt.

In der Praxis empfiehlt sich deshalb eine klare Aufgabenteilung zwischen beiden Techniken: display-p3 für Fälle, in denen exakt ein bestimmter, bereits im Markenhandbuch definierter Farbwert erreicht werden soll, und oklch() mit hoher Chroma für generative Farbverläufe oder Abstufungen, bei denen der Browser die beste Annäherung an das gewünschte Ergebnis selbst finden darf. Beide Techniken schließen sich nicht aus und werden in größeren Wide Gamut Farbsystemen häufig nebeneinander eingesetzt.

/* oklch with high chroma automatically reaches beyond sRGB where supported */
.gradient-banner {
  background: linear-gradient(
    90deg,
    oklch(62% 0.28 25),   /* highly saturated red, exceeds sRGB gamut */
    oklch(68% 0.24 145)   /* highly saturated green, exceeds sRGB gamut */
  );
}

7. Bilder und Wide Gamut: Zusammenspiel mit P3-Assets

Neben reinen CSS-Farben spielt Wide Gamut auch bei Bild-Assets eine Rolle. AVIF und moderne JPEG-Varianten können ein eingebettetes P3-Farbprofil tragen, das der Browser respektiert, sofern das Display es unterstützt. Ein Produktfoto mit kräftigen Farben, das ursprünglich mit einem P3-Farbprofil exportiert wurde, zeigt auf unterstützten Displays automatisch mehr Farbnuancen, ganz ohne dass CSS dafür angepasst werden muss, solange das Bild selbst korrekt in P3 kodiert wurde.

Wichtig ist, dass CSS-definierte Wide Gamut Akzentfarben und eingebettete Bildfarbprofile zueinander passen, sonst entsteht ein visueller Bruch zwischen einem in P3 leuchtenden Produktfoto und einem versehentlich nur in sRGB definierten UI-Rahmen darum herum. Ein konsistentes Farbmanagement über CSS und Bild-Pipeline hinweg ist deshalb Voraussetzung, um den vollen Nutzen aus Wide Gamut zu ziehen, statt nur einzelne Elemente isoliert zu optimieren.

In der Build-Pipeline lohnt sich deshalb eine feste Regel: Produktfotos und Illustrationen werden grundsätzlich mit eingebettetem P3-Profil exportiert, während das begleitende CSS für Rahmen, Hintergründe und Akzentfarben dieselbe Wide Gamut Logik verwendet. Wird diese Regel nicht dokumentiert, entsteht in gewachsenen Projekten häufig ein uneinheitliches Bild, weil einzelne Bild-Uploads noch im alten sRGB-Workflow erzeugt wurden, während neuere Assets bereits P3 nutzen.

8. Testing: Prüfen, ob ein Display tatsächlich P3 darstellt

Um zu testen, ob ein konkretes Display Wide Gamut tatsächlich darstellt, eignet sich am einfachsten eine Testseite mit nebeneinander platzierten sRGB- und display-p3-Farbfeldern in maximaler Sättigung. Auf einem echten P3-Display wirkt das P3-Feld sichtbar kräftiger und lebendiger als das sRGB-Feld daneben, auf einem klassischen sRGB-Display sehen beide Felder nahezu identisch aus, weil der Browser die P3-Farbe automatisch auf den verfügbaren Gamut begrenzt.

Für automatisiertes Testing lässt sich @media (color-gamut: p3) in einem kleinen JavaScript-Snippet über window.matchMedia abfragen, um in Analytics zu erfassen, wie viele tatsächliche Besucher ein Wide Gamut fähiges Display verwenden. Diese Daten helfen zu entscheiden, ob sich der zusätzliche Pflegeaufwand für ein Projekt überhaupt lohnt, bevor umfangreiche P3-spezifische Anpassungen vorgenommen werden.

Screenshot-Werkzeuge und viele Design-Tools rendern Farben standardmäßig noch in sRGB, selbst wenn das eigene Display P3 unterstützt. Wer Wide Gamut Ergebnisse für Abnahmen oder Design-Reviews dokumentieren möchte, sollte deshalb prüfen, ob das jeweilige Aufnahme- oder Export-Werkzeug den erweiterten Farbraum tatsächlich erhält, statt ihn beim Speichern unbemerkt auf sRGB zu reduzieren.

9. sRGB, display-p3 und Rec2020 im direkten Vergleich

Die folgende Tabelle vergleicht die drei relevanten Farbräume für Web-Projekte.

Für die meisten Projekte ist display-p3 der richtige Kompromiss zwischen zusätzlichem visuellem Nutzen und tatsächlicher Hardware-Unterstützung. Rec2020 bleibt vorerst eine Zukunftsoption, die frühestens relevant wird, sobald entsprechende Displays in der Zielgruppe eine relevante Verbreitung erreichen.

10. Zusammenfassung

Wide Gamut Farben mit display-p3 erschließen einen Farbumfang, den moderne Displays längst darstellen können, der aber ohne gezielte CSS-Anweisung ungenutzt bleibt. Über die color() Funktion lassen sich kräftigere Rot- und Grüntöne jenseits von sRGB direkt ansprechen, während eine doppelte Deklaration mit sRGB-Fallback dafür sorgt, dass ältere Displays weiterhin ein vollständig funktionsfähiges Ergebnis erhalten.

In der Praxis lohnt sich der Einsatz von Wide Gamut vor allem für die auffälligsten Marken- und Akzentfarben, kombiniert mit oklch() für konsistente Farbverläufe und einem abgestimmten Farbmanagement über CSS und Bild-Assets hinweg. Rec2020 bleibt vorerst Zukunftsmusik, während display-p3 schon heute auf einer breiten und wachsenden Zahl an Endgeräten sichtbaren Mehrwert liefert.

Wer heute mit Wide Gamut Farben startet, sollte klein beginnen: ein zentrales Custom-Property-Paar für die wichtigste Markenfarbe, ein sauberer sRGB-Fallback, und eine Testseite zur Verifikation der tatsächlichen Displaydarstellung. Von dort aus lässt sich die Technik schrittweise auf weitere Akzentfarben ausweiten, sobald sich der Ansatz im Projekt bewährt hat.

11. FAQ: Wide Gamut Farben mit display-p3