kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS color()-Function  – »Wide-Gamut« und Sonderfarben für Websites

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

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.

Vergleichsgrafik verschiedener Farbräume
Verschiedene RGB-Farbräume im Vergleich: Quelle: EIZO

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);

»Neue« 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 ;)

Gamut-Vergleich von sRGB und P3: Der kleinere sRB-Farbraum endet an der Linie
Gamut-Vergleich von sRGB und P3: Der kleinere sRB-Farbraum endet an der Linie

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.

Umwandlung von rgba() in P3 mit Safari
Umwandlung von rgba() in P3 mit Safari

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.

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.

Beispiel anschauen

 

Ä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.

Gamut-Vergleich zwischen Chrome und Safari
Gamut-Vergleich zwischen Chrome und Safari

Technik-Demos von Apple

Apple hat im Zuge der Einführung von P3 in Safari einige Demos bereitgestellt.

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Micha

    Verfasst am 4. September 2020 um 8:49 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 4. September 2020 um 9:11 Uhr.

      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.

  2. Peter Nagel

    Verfasst am 9. Oktober 2020 um 16:17 Uhr.

    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

  3. Andreas Walter

    Verfasst am 30. Oktober 2020 um 23:33 Uhr.

    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.

Schreibe einen Kommentar zu Jonas Hellwig Antworten abbrechen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.