CSS color()-Function – P3 Wide-Gamut und Sonderfarben für Websites
Mit der CSS color()-Funktion können Farben außerhalb des sRGB-Farbraums im Web verwendet werden.

Der vorherrschende Farbraum im Internet ist der sRGB-Farbraum. Monitore mit großem Farbumfang sind allerdings in der Lage mehr Farben darzustellen als mit sRGB abgebildet werden können. Mit neuen CSS-Techniken kann der erweiterte Farbraum dieser Monitore bedient werden, wodurch wir leuchtende Farben darstellen können, die früher auf Website nicht verwendet werden konnten. Der Effekt ist vergleichbar mit dem von Sonderfarben wie Pantone oder HKS im Druck. Die Farben im erweiterten Farbraum wirken kräftiger und »satter« und haben das Potenzial in Erinnerung zu bleiben.
Wide Gamut im Web
Der Standard-Farbmodus im Internet ist RGB, da wir es bei der Darstellung von Farben auf Monitoren mit dem sog. additiven Farbmodell zu tun haben.
Microsoft und HP haben seinerzeit den sog. sRGB-Farbraum speziell für das Internet entwickelt. Der mit sRGB abgebildete Farbumfang (Gamut) entspricht den damals darstellbaren Farben auf CRT-Monitoren. sRGB ist bis heute Standard im Internet.

Es gibt noch zahlreiche andere RGB-Farbräume – z.B. Adobe RGB, Adobe Wide Gamut RGB oder ProPhoto RGB – die alle einen unterschiedlich hohen Anteil des für den Menschen sichtbaren RGB-Spektrums abbilden können.
Moderne »Wide Gamut«-Monitore sind bereits seit einiger Zeit in der Lage einen deutlich höheren Prozentsatz der sichtbaren Farben abzubilden. Unglücklich ist nur, dass für Websites der klassische sRGB-Farbraum vorherrscht, so dass man das Potenzial dieser Displays lange nicht ausschöpfen konnte. Das ändert sich nun mit der CSS color()
-Function.
Die CSS color()-Function
Die CSS color()
-Function ermöglicht es den gewünschten Farbraum für eine Farbe exakt anzugeben. Man ist daher nicht länger nur auf den sRGB-Farbraum begrenzt, sondern kann beispielsweise den P3-Farbraum nutzen, der deutlich mehr Farben darstellen kann.
Die Syntax der Color-Funktion sieht wie folgt aus:
color() = color( [ <ident>? [ <number>+ | <string> ] [ / <alpha-value> ]? ]# , <color>? )
<indent>
steht für den gewünschten Farbraum. Es folgen die einzelnen Farbangaben von denen es je nach Farbraum mehr oder weniger geben kann. Am Ende kommt der Wert für die Alpha-Transparenz.
Am Beispiel des P3-Farbraums ergibt sich folgender Code:
/* Klassische Farbangabe mit RGBA */
background: rgba(0, 124, 134, 1);
/* Color Function mit P3-Farbraum */
background: color(display-p3 0.2084 0.4787 0.5185);
Zusätzliche Farben im P3-Farbraum
Wir möchten euch an einigen Beispielen des P3-Farbraums zeigen was möglich ist. Den P3-Farbraum haben wir als Beispiel gewählt, da Apple mit dem »Pro Display XDR« diesen Farbraum darstellt. Da Apple auch einen passenden Browser namens Safari im Angebot hat, wird die color()
-Function dort ebenfalls unterstützt.
Stellt euch folgenden Anwendungsfall vor: Ihr arbeitet an einem Projekt bei dem ihr mit Farbe einen »Wow-Effekt« erzeugen möchtet – also ähnlich wie mit Sonderfarben im Print Design. Ihr wählt für die Gestaltung Farben aus, die in sRGB schwächer als in P3 dargestellt werden können. Das betrifft grundsätzlich fast alle Farbtöne, allerdings sind die Unterschiede bei Blau und Grün am größten. Die kulturbanause-Markenfarbe »Petrol« bietet sich beispielsweise erstklassig an ;)

Ihr definiert diese Farben einmal in RGB und eine Zeile später in P3, wie im Beispiel oben gezeigt. Die RGB-Angabe dient als Basis für alle Browser die nur sRGB darstellen können. P3 wird dann nach dem Progressive Enhancement-Prinzip »überschrieben«, wenn der Browser dazu in der Lage ist.
Um den P3-Wert zu erhalten, bietet sich Safari an. In den Dev-Tools könnt ihr mit einem Rechtsklick auf das Farbicon einer rgb()
-Farbe die Konvertierung in P3 anstoßen.

Wenn nun Menschen mit einem kompatiblen Browser sowie einem hochwertigen Monitor die Website besuchen, wirken die Farben – im Vergleich zu den meisten anderen Websites – sehr leuchtend.
CSS-Variablen für P3-Farbraum abweichend definieren
Ihr könnt auch ganze Sets von Farbvariablen in P3 definieren. Mit einem Media Query zur Abfrage der Displayqualität sowie einem Feature Query zur Abfrage der Browserkompatibilität ist das kein Problem.
:root {
--brand: rgba(0, 124, 134, 1);
}
@media (dynamic-range: high) {
@supports (color: color(display-p3 0.2084 0.4787 0.5185);) {
--brand: color(display-p3 0.2084 0.4787 0.5185);
}
}
Beispiele
Um die folgenden Live-Beispiele sehen zu können, benötigt ihr sowohl einen Monitor mit möglichst großem Farbumfang sowie einen kompatiblen Browser – z. B. Safari. Ideal ist beispielsweise auch ein iPad oder ein iPhone, da dort Safari als Browser zum Einsatz kommt und hochwertige Displays verbaut sind.
Einfache Vergleich
Das folgende Beispiel zeigt einen <div>
in P3, der über die linke Hälfte der Displaybreite läuft.

Ähnliche Beispiele sind in diesem CodePen zu sehen.
Website play.date
DIe Website play.date nutzt den P3-Farbraum um leuchtende Farbtöne zu erzeugen. Der folgende Screenshot zeigt den direkten Vergleich zwischen Chrome und Safari.

Technik-Demos von Apple
Apple hat im Zuge der Einführung von P3 in Safari einige Demos bereitgestellt.
Browser Support
Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.
Fazit
Wenn ihr einen Farbeindruck erzielen möchtet, der in Erinnerung bleibt, dann sollet ihr mit den erweiterten Farbräumen experimentieren. Auf dunklen Untergründen oder vollfarbig wirkt der Effekt am beeindruckendsten – die entsprechende Hardware vorausgesetzt.
Die Handhabung und das Testing sind etwas aufwändiger, wodurch sich der Einsatz aktuell vor allem für Projekte anbietet bei denen die Zielgruppe über entsprechende Monitore verfügt und den Effekt auch wertzuschätzen weiß. Wir hatten bereits die Gelegenheit in einem Website-Projekt für eine Berliner Designagentur ein auffälliges Pink mit P3-Farben zu ermöglichen.
Ich finde das mit dem P3 Farbraum sehr interessant für Webseiten. Die Frage, die ich mir stelle ist, ob man die Bilder einer Webseite auch im Erweiterten Farbraum optional anbieten sollte? Standard ist da ja bisher auch oft bzw. Meistens noch sRGB. Auch der Unterschied bzw. Vor- und Nachteile von P3 und Adobe RGB oder gar Rec.2020 finde ich interessant. Ich finde es ist auch ein wichtiges und Interessantes Thema für Webdesigner das Thema der Farbkalibrierung von Monitoren und Auflösungen von Monitoren (z.B. QHD, 4K, 5K). Zunehmend stellt sich sogar die Frage, ob OLED Monitore zu nutzen im Webdesign Sinn machen.
Mir ist bereits vor einem Jahr aufgefallen, dass der Firefox den P3-Farbraum – beispielsweise auf unseren iMacs – auch ohne CSS Anweisungen darstellt. Ich finde, dies sollten auch die Browser steuern.
Moin und danke für den interessanten Artikel! Habe es gleich mal ausgetestet auf 2 Monitoren. Den Unterschied sieht man wirklich sehr stark! Habe mir deinen Blog direkt mal als Lesezeichen gespeichert. Viele Grüße Peter
Ergibt es denn Sinn, verschiedene optische Erfahrungen abhängig vom Gerät auszuliefern? Ein wenig mehr Leuchtkraft bei dekorativen Elementen ist sicherlich schön, aber wenn es um Farbgestaltung geht, die die Wiedererkennung betreffen, kann ich mir diesen Unterschied durchaus als hinderlich und irritierend vorstellen.
Hallo Micha, es ist ja ohnehin nicht möglich den identischen Farbeindruck auf verschiedenen Monitoren sicherzustellen. Es ist meiner Ansicht nach wichtiger, dass es auf dem selben Gerät in sich konsistent ist. Daher sehe ich hier kein Problem. Menschen, die ein entsprechendes P3-Display nutzen, sehen eine optimierte Version. Das ist ja Standard bei Web-Lösungen, die nach PE aufgebaut sind.