Display P3

Display P3 ist ein Wide-Gamut-RGB-Farbraum, den Apple 2015 eingeführt hat. Er verwendet dieselben Rot- und Blau-Primärfarben wie DCI-P3 (der Kinoprojektionsstandard von 2007), aber Apples eigenen Weißpunkt und Gamma. Im Vergleich zu sRGB deckt P3 ~25 % mehr Farbvolumen ab – der Großteil des Mehr liegt in gesättigten Rot- und Grüntönen.

Apple liefert jedes Mac- und iPhone-Display ab 2017 mit Panels der P3-Klasse aus. Andere Hersteller sind gefolgt; die meisten Premium-Android-Handys, Monitore der Mittel- und Oberklasse sowie alle OLED-Fernseher erreichen P3 oder darüber hinaus.

Das CSS Color Module Level 4 unterstützt P3 über die color()-Funktion: color(display-p3 1 0.4 0.2). Dieselbe Farbe in sRGB ausgedrückt würde abgeschnitten – das helle, gesättigte Orange existiert in sRGB nicht. Browser, die beides unterstützen, rendern die P3-Version auf P3-fähigen Displays und fallen auf anderen sauber zurück.

Convertitives Farbumrechner arbeiten derzeit nur in sRGB. P3-Unterstützung steht auf der Roadmap.

Die Unterscheidung zwischen DCI-P3, Display P3 und P3-D65, die Designer ins Stolpern bringt: Drei verschiedene Spezifikationen tragen „P3“ im Namen. DCI-P3 ist der ursprüngliche SMPTE-Kinostandard mit einem grünverschobenen Weißpunkt (etwa 6300 K) und einem reinen 2,6-Potenzgamma – verwendet von Filmprojektoren, nicht von Verbraucherdisplays. Display P3 ist Apples Anpassung mit dem verbraucherüblichen D65-Weißpunkt (6504 K) und der stückweisen sRGB-Gammakurve. P3-D65 ist dasselbe wie Display P3 unter einem anderen Namen. CSS’ color(display-p3 …) meint speziell Display P3; Assets, die aus Kino-Pipelines als DCI-P3 exportiert wurden, wirken leicht grünstichig, wenn man sie ohne Konvertierung als Display P3 behandelt.

P3-Unterstützung im Code richtig erkennen: Verwenden Sie die CSS-Media-Query @media (color-gamut: p3), um Wide-Gamut-Stile zu steuern, gepaart mit @supports (color: color(display-p3 0 0 0)) für die Eigenschaft. Browser ohne Wide-Gamut-Rendering oder auf sRGB-Displays fallen auf die daneben bereitgestellte sRGB-Deklaration zurück. Vermeiden Sie den häufigen Fehler, nur P3-Farben zu deklarieren – sRGB-only-Browser ignorieren die Regel, und Ihr CSS fällt auf geerbte Standardwerte zurück. Convertitives Farb-Methodik behandelt das Muster der Doppeldeklaration. Verwandt: sRGB, Gamut, Chromatizität. Referenz: ICC — Display P3 characterisation.

Durchgerechnetes Beispiel: ein Markenrot jenseits von sRGB

Eine Marke möchte das gesättigtste Rot, das ihre iPhone-Kunden darstellen können. In sRGB ist das maximale Rot rgb(255, 0, 0) mit CIE-1931-Chromatizitätskoordinaten von etwa (0.640, 0.330). Die entsprechende Display-P3-Primärfarbe liegt bei (0.680, 0.320) – vollständig außerhalb des sRGB-Dreiecks. Deklariert als color(display-p3 1 0 0) wirkt die Farbe auf einem Wide-Gamut-Panel etwa 25 % gesättigter für das Auge. Auf einem sRGB-only-Display fällt die CSS-Doppeldeklaration background: red; background: color(display-p3 1 0 0); sauber zurück. Fotografiert man beide nebeneinander auf einem P3-Telefon, ist der Unterschied auf Armlänge sichtbar – besonders bei Coca-Cola-Rot, Ferrari-Rot und anderen Markenfarben, die im Web historisch abgeschnitten wurden.

Wann P3 zählt und wann nicht

Für Markenidentität, Marketingbilder und Fotografie-Portfolios ist P3 eine spürbare Aufwertung – gesättigte Rot-, Grün- und Hauttöne gewinnen sichtbar an Tiefe. Für die meiste UI-Arbeit (Text, Neutraltöne, gedämpfte Akzente) ist der Unterschied nicht wahrnehmbar, weil sich die Farben ohnehin nie der sRGB-Gamutgrenze nähern. Für Druckworkflows ist P3 weitgehend irrelevant; Drucker-Gamuts sind in gesättigten Bereichen kleiner als sRGB, und die Konvertierung erfolgt ohnehin über CMYK-Profile. Die W3C-Spezifikation CSS Color 4 ist die maßgebliche Quelle für die Syntax und die Rendering-Regeln: CSS Color Module Level 4 — Display P3.