sRGB vs Display-P3: Was Designer wissen müssen

Ein bekanntes Rätsel bei der Übergabe: Eine Designerin wählt in einem Design-Tool auf einem aktuellen MacBook ein kräftiges Rot, der Entwickler setzt den hex-Wert originalgetreu um – und auf genau demselben Laptop wirkt der ausgelieferte Button einen Tick matter als das Mockup direkt daneben. Niemand hat sich vertippt. Das Design-Tool zeigte ein Display-P3-Rot; der hex-Code konnte nur sRGB transportieren.

Die Erklärung ist der Gamut – die Menge an Farben, die ein Display oder ein Farbraum wiedergeben kann. sRGB ist die jahrzehntealte Basis des Webs; Display-P3 ist ein weiterer Farbraum (Gamut), rund 25 % größer, dessen zusätzliche Farben sich in gesättigten Mitteltönen konzentrieren – kräftige Rot-, Grün-, Orange- und Türkistöne. hex-Werte können sie nicht ausdrücken; neuere CSS-Syntax schon. Dieser Artikel zeigt, wo der Unterschied tatsächlich sichtbar wird, was er für CSS bedeutet und wann er den Aufwand wert ist – als Teil unseres OKLCH-Leitfadens, denn ein weiter Farbraum ist der halbe Grund, warum moderne Farbmodelle überhaupt zählen.

Wo liegen die zusätzlichen Farben von P3 eigentlich?

Nicht gleichmäßig verteilt. In der Nähe von Weiß, Schwarz und Grau sind die beiden Gamuts praktisch identisch – ein helles Pastell oder ein dunkles Marineblau gewinnt durch P3 nichts. Die Lücke öffnet sich in der farbigen Mitte: Das gesättigtste Rot, Grün oder Türkis, das P3 zeigen kann, liegt sichtbar jenseits der Obergrenze von sRGB. In der Sprache von OKLCH: Die Helligkeitsachse bewegt sich nicht; was P3 anhebt, ist die Chroma-Obergrenze – und zwar am stärksten in den Mitteltönen, wo die Obergrenze ohnehin schon am höchsten war.

Diese Geografie erklärt zugleich das Versprechen und die Ernüchterung des weiten Farbraums: Markenakzente, Illustrationen und Bildmaterial können wirklich stärker herausstechen – während Fließtext, Rahmen, Hintergründe und alles andere, was den Großteil einer Oberfläche ausmacht, exakt gleich aussieht.

Haben Nutzer überhaupt P3-Bildschirme?

Inzwischen meistens ja. iPhones haben seit 2016 P3-Displays, Macs fast genauso lange, und Android-Flaggschiffe sowie bessere externe Monitore zogen nach; ein großer Teil des heutigen Traffics – besonders mobil – sieht deine Arbeit auf einem P3-fähigen Panel. Die Frage nach der Fähigkeit hat sich still und leise umgekehrt: Der Normalfall ist ein Bildschirm, der mehr als sRGB zeigen könnte und trotzdem nur sRGB geschickt bekommt.

Das Publikum, das kein P3 sieht, zählt trotzdem – deshalb lautet die praktische Haltung: Verbesserung obendrauf. Gestalte so, dass die sRGB-Darstellung für sich allein steht, und lass P3-Bildschirme die zusätzliche Leuchtkraft obendrauf bekommen.

Warum kann hex diese Farben nicht transportieren?

Ein hex-Wert besteht aus drei 8-Bit-Zahlen, definiert gegen sRGB – #ff0000 bedeutet „das maximale Rot von sRGB“, nicht „das röteste Rot“. Es gibt keinen Codepunkt jenseits der Gamut-Grenze. Um P3 zu erreichen, braucht es eine Syntax, die einen Farbraum ausdrücklich benennt:

.accent {
  color: #e0263f;                             /* sRGB-Fallback              */
  color: color(display-p3 0.9 0.12 0.22);     /* weiteres Rot, wo verfügbar */
}

color(display-p3 …) spricht den P3-Gamut direkt an, und Farbräume mit weiter Gamut-Fähigkeit wie OKLCH können diese Farben ganz selbstverständlich ausdrücken – dieselben drei L/C/H-Werte reichen einfach zu höherer Chroma. WebKits Beitrag über weiten Farbraum geht die CSS-Mechanik im Detail durch. Fürs Styling reicht das Kaskadenmuster von oben meist aus: sRGB zuerst, P3 danach – jeder Bildschirm nimmt das Beste, was er darstellen kann.

Wie sieht der Unterschied an einer echten Farbrampe aus?

Öffne eine gesättigte rote Farbrampe, erzeugt gegen die sRGB-Obergrenze – achte darauf, wie die Mittelton-Stufen direkt an der Gamut-Grenze liegen, dort wo der Generator die Chroma knapp unterhalb der Grenze deckelt, damit der Verlauf gleichmäßig bleibt.

Eine gesättigte rote Farbrampe, erzeugt innerhalb des sRGB-Gamuts, deren Mittelton-Stufen nah an der Gamut-Obergrenze liegen

Behalte dieses Bild für den Vergleich am Ende des Artikels im Kopf: dieselbe Ausgangsfarbe, dieselbe Helligkeitskurve – nur die Obergrenze verschiebt sich.

Wann lohnt sich P3?

Lohnt sich:

Markenakzente und CTAs – der eine Ort, an dem eine UI wirklich Chroma ausgibt; die P3-Version einer kräftigen Markenfarbe ist genau die, die das Design-Tool gezeigt hat.
Illustration und Bildmaterial – Fotos und Grafiken mit Wide-Gamut-Profilen wirken sichtbar kräftiger.
Datenvisualisierung – zusätzlicher Chroma-Spielraum bedeutet besser unterscheidbare, gesättigte Serienfarben.

Lohnt sich nicht:

Text und UI-Chrome – Kontrastanforderungen greifen lange bevor der Gamut ins Spiel kommt, und die sRGB-Version muss ohnehin für sich allein bestehen.
Neutraltöne und Hintergründe – dort unterscheiden sich die Gamuts kaum.
Alles, was du nicht überprüfen kannst – wenn das Team auf sRGB-Monitoren reviewt, geht die P3-Ebene ungesehen live; füge sie dort hinzu, wo sie tatsächlich jemand kontrolliert.

Sieh, wie sich die Obergrenze hebt

Am klarsten verstehst du die beiden Gamuts, wenn du zusiehst, wie der eine zum anderen wird: Kippe dieselbe rote Farbrampe nach P3. Die Mittelton-Stufen gewinnen an Chroma – die Zahlen sagen es und die Farbfelder zeigen es –, während Helligkeit und Farbton vollkommen still stehen und die Enden nahe Weiß und nahe Schwarz sich kaum bewegen. Das ist, in einer einzigen Interaktion, die ganze Geschichte von sRGB vs P3: nicht andere Farben, sondern dieselben Farben mit einer höheren Obergrenze – genau dort, wo Farbe lebt.