Die erweiterte Farbraumabdeckung im Web

CSS wurde bereits 1996 im Web eingeführt. Damals waren die meisten Computermonitore ziemlich schlecht. Die Farben von CSS – egal ob im RGB-, HSL- oder Hexadezimalformat definiert – wurden auf die damaligen Monitore zugeschnitten, alle innerhalb des sRGB-Farbraums.

Die meisten neueren Geräte verfügen über ein Wide-Gamut-Display. Ein Farbraum ist der Bereich der Farben, die angezeigt werden können. Ein Wide-Gamut-Display kann mehr Farben anzeigen als sRGB. Sie verwenden den Display P3-Farbraum. (Es gibt auch Rec.2020, einen noch größeren Farbraum, aber dieser ist ziemlich selten und derzeit nicht der Rede wert.) Wie Lea Verou von der CSS Working Group sagte: „Unsere Websites wirken ausgewaschen, weil die Bildschirme sich schneller weiterentwickelt haben als CSS Color. Wenn wir den vollen Umfang der Farben nutzen wollen, den die Mehrheit der Bildschirme anzeigen kann, müssen wir neue CSS-Farbformate verwenden: lab, lch oder display-p3.

Beispiele in der Praxis finden sich auf der Website von Panic (Hersteller des einst beliebten Coda-Texteditors und des immer noch sehr beliebten Untitled Goose Game) oder auf der Marketingseite für ein Produkt namens Playdate. Beide nutzen auffallend lebendige und intensive Farben, die einzigartig kräftig sind, indem sie display-p3 verwenden.

Um eine Vorstellung vom Farbbereich zu bekommen, der in sRGB fehlt, schauen Sie sich das folgende Pen an. Die inneren Quadrate enthalten eine Farbe außerhalb des sRGB-Farbraums. Die äußeren Quadrate zeigen diese Farbe, die auf den sRGB-Farbraum begrenzt wurde (d. h. die nächstgelegene äquivalente Farbe, die ein Browser anzeigen kann, ohne display-p3, lab oder lch zu verwenden). (Beachten Sie, dass die Unterstützung derzeit auf Safari-Benutzer beschränkt ist.)

Der Farbwähler in Safari Technology Preview zeigt hilfreich an, welche Farben außerhalb des sRGB-Farbraums liegen.

Eine Geschichte neuer Syntaxen

Bevor wir uns mit der Syntax von lab(), lch() und der color()-Funktion beschäftigen, werfen wir einen Blick auf die neuen rgb()- und hsl()-Syntaxen (die in allen Webbrowsern außer Internet Explorer unterstützt werden).

Typ	Alte Syntax	Neue Syntax
RGB	rgb(0, 128, 255)	rgb(0 128 255)
RGBa	rgba(0, 128, 255, 0.5)	rgb(0 128 255 50%)
HSL	hsl(198, 28%, 50%)	hsl(198 28% 50%)
HSLa	hsla(198, 28%, 0.5)	hsl(198deg 28% 50% / 50%)

In der älteren Syntax werden die einzelnen Zahlen durch Kommas getrennt: rgb(200, 100, 20);. Kommata sind nicht mehr notwendig, daher ist der durch Leerzeichen getrennte Wert rgb(200 100 20); gültig. Um Transparenz anzugeben, können wir jetzt rgb(200 100 20 / 50%) verwenden, anstatt  rgba() oder hsla(. Es gibt keinen wirklichen Vorteil für die neueren Syntaxen, aber es lohnt sich, sie anzuschauen, da sie mit der Syntax für lch(), lab() und color() übereinstimmen. 

Typ	Syntax
Lab	lab(56.29% -10.93 16.58 / 50%)
color()	color(sRGB 0 0.5 1 / 50%)
LCH	lch(56.29% 19.86 236.62 / 50%

lab(), lch() und color() verwenden immer durch Leerzeichen getrennte Zahlen (keine Kommas erlaubt) und einen Schrägstrich gefolgt von einem Prozentsatz zur Angabe der Transparenz. Sehen wir uns an, wie sie funktionieren. 

Die CSS color()-Funktion und der display-p3-Farbraum

Die color()-Funktion ermöglicht die Angabe einer Farbe in einem bestimmten Farbraum (anstelle des sRGB-Farbraums, der von rgb(), hsl() oder Hex verwendet wird). Der Farbraum, den wir angeben müssen, um Wide-Gamut-Farben zu verwenden, ist display-p3, der drei numerische Werte verwendet, die die Rot-, Grün- und Blaukanäle des Farbraums darstellen. color: 1 0 0 ist Vollrot, 0 0 1 ist Vollblau und 0 1 0 ist Vollgrün.

background-color: color(display-p3 1 0 0.331); /* vibrant pink color */

Zum Zeitpunkt der Erstellung ist display-p3 der einzige Weg, um High-Gamut-Farben zu nutzen, da er seit 2017 in Safari unterstützt wird. lab() und lch() werden jedoch bessere Optionen sein, sobald sie implementiert sind (Chrome und Safari arbeiten derzeit daran). Hier ist ein Zitat von Lea Verou: 

display-p3 ist nicht wahrnehmungsuniform und es ist schwierig, Varianten (heller oder dunkler, stärker oder schwächer gesättigt usw.) zu erstellen, indem man seine Parameter ändert. Außerdem ist es eine kurzfristige Lösung. Es funktioniert jetzt, weil Bildschirme, die einen größeren Farbraum als P3 darstellen können, selten sind. Wenn die Hardware wieder Fortschritte macht, wird color(display-p3 ...) das gleiche Problem haben wie heute sRGB-Farben. LCH und Lab sind geräteunabhängig und können den gesamten Farbraum der menschlichen Sicht darstellen, sodass sie unabhängig von der Weiterentwicklung der Hardware funktionieren werden.

Eine bessere Helligkeit: Lab und LCH

Sie haben vielleicht schon Artikel im Web gelesen, die argumentieren, dass HSL leichter zu verstehen ist als RGB oder Hexadezimalwerte. 

Hier ist Chris Coyier im Jahr 2015

Der eigentliche Reiz von HSLa ist, dass man intuitiver versteht, was sich beim Ändern der Werte auf die Farbe auswirkt. Eine Erhöhung des zweiten Wertes erhöht die Sättigung der Farbe. Eine Verringerung des dritten Wertes verringert die Helligkeit der Farbe. Das macht die Erstellung eigener Farbvariationen im Handumdrehen viel einfacher.

Obwohl HSL leichter zu verstehen sein mag als Hexadezimal oder RGB, ist es bei weitem nicht perfekt. Die Art und Weise, wie es Helligkeit berechnet, entspricht einfach nicht der menschlichen Wahrnehmung. Laut HSL haben hsl(240deg 100% 50%) und hsl(60deg 100% 50%) die gleiche Helligkeit, 50%. Vergleichen wir die beiden.

Für das menschliche Auge sieht das Blau dunkler aus. Wie Brian Kardell es ausdrückt: 

Dinge wie das Mischen von Farben, Aufhellen, Abdunkeln, können nur dann gut gemacht werden, wenn sie ein Gefühl dafür vermitteln, wie unsere Augen tatsächlich funktionieren, anstatt wie Maschinen gerne über die Speicherung und Anzeige denken.

Hier ist ein visuelles Beispiel von Lea Verou, das die Überlegenheit von Lab/LCH gegenüber HSL demonstriert. Sie kommentiert: 

Ein Trick für ästhetisch ansprechende Farbverläufe derselben Farbe bei unterschiedlicher Helligkeit ist, nach Lab zu konvertieren, stattdessen das L zu variieren und dann zurück zu HSL/RGB zu konvertieren.

Lab und LCH verwenden beide den CIELAB-Farbraum, der darauf ausgelegt ist, mit der menschlichen Sehkraft übereinzustimmen. Wenn Sie zwei Farben denselben Helligkeitswert geben, erscheinen sie für das menschliche Auge gleich hell, unabhängig von ihrem Farbton.

Lab

background-color: lab(40% 83 -104); /* a shade of purple */

Das L in lab() steht für Lightness (Helligkeit) und wird als Prozentsatz angegeben (der für extra helles Weiß bis zu 400% betragen kann, aber im Allgemeinen zwischen 0 % und 100 % liegt). A und B stehen für nichts – es sind Farbkanäle. A ist ein numerischer Wert zwischen Grün (negative Werte) und Rot (positive Werte), während B ein numerischer Wert zwischen Blau (negative Werte) und Gelb (positive Werte) ist. Helligkeit ist für uns ziemlich leicht zu verstehen. Die Rot/Grün-Werte und Blau/Gelb-Werte sind jedoch nicht gerade intuitiv. LCH ist wahrscheinlich eine bessere Alternative.

LCH

background-color: lch(69% 56 244); /* a shade of blue */

lch() ist der menschlich lesbarste der neuen Farbwerte. L steht wieder für Lightness (Helligkeit und funktioniert exakt gleich), C für Chroma und H für Hue (Farbton). Chroma ist weitgehend analog zu Sättigung, kann aber auch als Farbintensität oder Lebendigkeit verstanden werden. Im Gegensatz zu den anderen neuen Farbformaten kann man tatsächlich vorhersagen, welche Auswirkungen die Änderung dieser einzelnen Werte haben wird – in dieser Hinsicht ähnelt es HSL. Der beste Weg, es zu verstehen, ist, diesen LCH-Farbpicker auszuprobieren.

Festlegen von Fallbacks

Wir müssen zwei Arten von Unterstützung berücksichtigen: Browserunterstützung für die neuen CSS-Farbwerte und die Fähigkeit von Bildschirmen, diese Farben darzustellen.

Das Zurückfallen auf den nächstgelegenen passenden sRGB-Wert für Browser, die Farb-Funktionen nicht unterstützen, ist einfach und genau wie wir es gewohnt sind, Fallback-Eigenschaften zu definieren

.pink-text {
  color: rgb(255, 0, 79); /* Will be used as a fallback */
  color: color(display-p3 1 0 0.331); /* Will be used if supported */
}

Die zweite Codezeile im obigen Beispiel wird ignoriert, wenn der Browser sie nicht versteht und der rgb()-Wert stattdessen verwendet wird, dank der Kaskade. Es wäre mühsam, jedes Mal zwei Zeilen CSS aufzuschreiben, wenn Sie eine Farbe angeben möchten. CSS-Variablen sind eine großartige Möglichkeit, damit umzugehen. In diesem Beispiel verwenden wir @supports, um zu prüfen, ob der Browser die Farb-Funktionen in CSS unterstützt.

/* https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ */
:root {
  --bright-green: rgb(0, 255, 0);
}


/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --bright-green: color(display-p3 0 1 0);
  }
}


header {
  color: var(--bright-green);
}

Wenn die Farbe für Ihr Design besonders wichtig ist, könnten Sie ein Hintergrundbild verwenden, da die meisten Browser High-Gamut-Farben in Bildern unterstützen.

@supports not (color: color(display-p3 1 0 0.331)) {
  @supports (-webkit-background-clip: text){
    .pink-text {
      background-image: url("pink-P3.png");
      background-size: cover;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}


.pink-text {
  color: rgb(255, 0, 79);
  color: color(display-p3 1 0 0.331);
}

Es gibt ein PostCSS-Plugin, das lab() und lch() Funktionen in rgb() konvertiert. Wenn Sie Sass mögen, gibt es ein Werkzeug von Miriam Suzanne namens Blend.

Eine Media Query für Farben

@supports sagt uns, ob der Browser die relevante CSS-Syntax unterstützt. Was es uns nicht sagt, ist, ob der Monitor eines Benutzers bestimmte Farbwerte tatsächlich anzeigen kann. Wenn ein Monitor keine High-Gamut-Farben unterstützt, zeigt der Bildschirm die nächstgelegene äquivalente sRGB-Farbe an. Das bedeutet, dass alle Monitore bedient werden, ohne zusätzlichen Code schreiben zu müssen.

Wenn Sie jedoch die Fallback-Farbe lieber manuell selbst auswählen möchten, anstatt den Browser eine für Sie berechnen zu lassen, können Sie der color()-Funktion einen zweiten Farbwert übergeben. Dies würde jedoch die Browserunterstützung für die Farb-Funktion erfordern (aber die Unterstützung für das zweite Argument ist bisher in keinem Browser verfügbar).

background-color: color(display-p3 1 0 0.331, #f54281);

Wenn Sie mehr Kontrolle für ausgefallenere Dinge benötigen, bringt die Media Queries Level 4 Spezifikation eine neue color-gamut-Media-Query mit, die uns hier helfen kann.

@media (color-gamut: p3) { 
  /* Code to run only on hardware that supports P3 color */
}

In diesem Beispiel prüfen wir offensichtlich auf P3-Unterstützung, aber wir könnten auch den rec-2020-Farbraum prüfen, den wir zuvor angedeutet haben, der einen noch größeren Farbraum als P3 hat. Die Anzahl der Bildschirme, die rec-2020 unterstützen, ist derzeit minimal und umfasst nur High-Definition-Fernseher, was bedeutet, dass sie in naher Zukunft kein übliches Ziel für Entwickler sein werden. Sie können auch auf sRGB-Unterstützung prüfen, aber das sind heutzutage fast alle Monitore. Die color-gamut-Abfrage hat dagegen zum Zeitpunkt der Erstellung eine relativ gute Browserunterstützung.

Seitennotiz: dynamic-range Media Query

In den Release Notes zu Safari 13.1 wird die dynamic-range Media Query verwendet, um bedingt eine P3-Farbe anzuwenden. Offenbar ist das kein guter Anwendungsfall. Laut Florian Rivoal (Herausgeber der Media Queries Spezifikation) ist diese Abfrage für Videos gedacht

[D]ie meisten Bildschirme können extrem helle Lichter für kurze Zeit anzeigen, die in Videos für Dinge wie Funken, direktes Sonnenlicht usw. verwendet werden. Dies ist viel heller als Weiß und nicht für statische Bilder gedacht. Es wäre unangenehm und würde auch den Bildschirm beschädigen.

Noch eine Seitennotiz: Unterstützung von Design-Tools

Leider unterstützen gängige Webdesign-Tools wie Figma, Sketch und XD derzeit keine Lab-, LCH- oder P3-Farbräume. Photoshop verfügt jedoch über einen Lab-Farbauswähler.

---

Das war's! CSS-Farben erweitern sich in einer Zeit, in der Bildschirme mehr Farben als je zuvor unterstützen. Es ist eine aufregende Zeit für Farb-Nerds!