Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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.

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-color-function feature across the major browsers from caniuse.com

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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Stefan Dahlmann
    schrieb am 18.02.2024 um 02:50 Uhr:

    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.

    Antworten
  2. Andreas Walter
    schrieb am 30.10.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.

    Antworten
  3. Peter Nagel
    schrieb am 09.10.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

    Antworten
  4. Micha
    schrieb am 04.09.2020 um 08: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.

    Antworten
    • Jonas Hellwig
      schrieb am 04.09.2020 um 09: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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →