So nutzen Sie die neuen Farbräume von Adobe CSS in Ihrem Browser

Auf welchem Standard beruhen Farben im Web?

Die Darstellung von Farben auf einem Computermonitor kann schnell kompliziert werden. Es kommt dabei auf das Zusammenspiel von Monitor, Betriebssystem, Software, unterstützten Farbräumen und Farbprofilen an. Hier soll es um die Farbdarstellung mit CSS im Browser gehen. Farben im Web beruhen seit Jahrzehnten auf dem Standard-RGB-Farbraum (sRGB).

Er wurde 1996 in einer Kooperation von HP und Microsoft veröffentlicht, um für Monitore, Drucker und eben das World Wide Web verwendet zu werden. Die CSS-Funktionen für rgb() und rgba() im CSS Color Module beziehen sich auf diesen sRGB-Farbraum. Dabei werden die Farben Rot, Grün und Blau zusammengemischt. Jeder Kanal kann einen Wert zwischen 0 und 255 annehmen, was die Anzeige von rund 16,78 Millionen Farben möglich macht.

Welche Farbmodelle werden noch von Browser unterstützt?

Seit einigen Jahren unterstützen Browser auch andere Farbmodelle: Bei HSL werden Farben aus einem Wert auf einem Farbkreis (Hue), Sättigung (Saturation) und Helligkeit (Lightness) zusammengesetzt.

Das Farbmodell HWB startet ebenfalls mit einem Farbwert (Hue) und fügt Anteile Weiß (Whiteness) und Schwarz (Blackness) hinzu, was es für Entwickler einfacher macht, hellere und dunklere Farbtöne einer Grundfarbe zu erzeugen.

Aber egal, ob Sie eine Farbe über rgb(), hsl(), hwb() oder als Hexadezimalwert definieren: Alle Modelle bilden die Farbe im sRGB-Farbraum ab.

// Gleiche Farbe, anders definiert
background-color: Crimson;
background-color: #DC143C;
background-color: rgb(220, 20, 60);
background-color: hsl(348, 83%, 47%);
background-color: hwb(348, 8%, 14%);

Was ist der Gamut?

Der sRGB wirft ein paar Probleme auf, die mit dem Gamut zusammenhängen. Der Gamut ist die Menge aller Farben, die ein Gerät darstellen oder aufzeichnen kann, zum Beispiel im Hinblick auf Monitor, Drucker und Scanner.

Der sRGB-Gamut passt vielleicht noch zu einfachen Tintenstrahldruckern, für den professionellen Druck ist er aber nicht mehr ausreichend. Das heißt: sRGB kann nicht alle Farben darstellen, die mit CMYK gedruckt werden können, speziell blau-grüne Töne.

Daher hat Adobe schon 1998 den Adobe-RGB-Farbraum entwickelt, der dazu dient, alle CMYK-Farben auf dem RGB-Computerdisplay darzustellen. Adobe RGB kann etwa 52,1 Prozent der sichtbaren Farben – definiert über den Lab-Farbraum (CIELAB) – abdecken, sRGB dagegen nur rund 35,9 Prozent (bit.ly/3r15i50).

Ein weiteres Problem ist die Entwicklung der Monitore. Der sRGB-Farbraum wurde für die damals üblichen CRT-Modelle mit Kathodenstrahlröhre entwickelt. Moderne Bildschirme arbeiten oft mit dem Farbraum Display-P3. Der zugehörige Gamut deckt rund 50 Prozent mehr Farben ab als der sRGB-Gamut (bit.ly/3PnIndi). Einen noch größeren Gamut bietet Rec2020, der jedoch derzeit nur in hochwertigen Monitoren eine Rolle spielt.

Welche neue Farbfunktionen sind im CSS hinzugekommen um mehr Farben anzuzeigen?

Über die oben genannten Farbfunktionen ist es in CSS nicht möglich, alle Farben abzubilden, die im Gamut von Display-P3 oder Rec2020 enthalten sind. Darum sind im CSS Color Module Level 4 (bit.ly/3hVkBTI) neue Farbfunktionen hinzugekommen, die seit März 2023 alle modernen Browser – Chrome, Edge, Opera, Firefox und Safari – unterstützen: lab(), lch(), oklab() und oklch().

Alle vier Funktionen bilden Farben in demselben Lab-Farbraum ab. Bei LAB spannen die Achsen A und B eine Farbebene auf. Auf der A-Achse wandert die Farbe von Grün nach Rot, auf der B-Achse von Blau nach Gelb. Die L-Achse (Lightness) steht für die Helligkeit. Die Notation in LCH funktioniert analog zu der in HSL. Statt der Achsen A und B werden Polarkoordinaten für den Farbton (H, Hue) und die Sättigung (C, Chroma) genutzt, das L steht weiterhin für die Helligkeit.

Dazu kommen mit oklab() und oklch() optimierte Versionen von lab() und lch(), die im Wesentlichen Farbverläufe gleichmäßiger darstellen. Für die Webentwicklung bietet sich oklch() als bevorzugte Farbfunktion an (bit.ly/3Z3r18X).

// Crimson, mit neuen Farbfunktionen
lch(47.879%, 53.079%, 26.464%)
oklch(57.12% 0.222 20.09)

Sie könnten die neuen Farben direkt mit einem einfachen Fallback einsetzen:

background-color: #DC143C;
background-color:
lch(47.879%, 53.079%, 26.464%);

Alte Browser werden hier die erste Anweisung nutzen und die zweite, unbekannte Anweisung ignorieren. Moderne Browser, die die neuen Farbfunktionen unterstützen, überschreiben jedoch die erste Anweisung mit der zweiten. Zusätzlich gibt es eine neue color()-Funktion, mit der sich eine Farbe direkt in einem gewünschten Farbraum ansprechen lässt:

color(rec2020
0.42053 0.979780 0.00579);
color(display-p3
-0.6112 1.0079 -0.2192);

Was passiert nun aber, wenn ein Browser zwar eine Farbe in einem der modernen Farbräume unterstützt, diese aber außerhalb des Gamuts des Endgeräts liegt? In dem Fall kümmern sich Betriebssystem und Hardware darum und zeigen die nächstbeste Farbe an.

Aus einem leuchtenden Rot wird so ein matteres Rot. Das kann für einzelne Farbtöne ausreichen. Wenn eine Grafik jedoch einen feinen Farbverlauf außerhalb des Gamuts des Endgeräts vorsieht, würde der Verlauf auf ein einheitliches Rot heruntergebrochen werden, was Webdesigner in der Regel vermeiden wollen.

Was macht die neue Media Query?

Für Webworker wäre es deshalb hilfreich, etwas über das Display des Nutzers zu wissen. Für diesen Zweck gibt es eine neue Media Query, die den Gamut abfragt und ebenfalls bereits in allen modernen Browsern funktioniert. Da Monitore sehr unterschiedliche Gamuts haben, fragt CSS hier nur den ungefähren Bereich in drei Schritten ab:

• srgb beinhaltet Geräte, die sRGB darstellen können, das sollten alle Farbdisplays können;
• p3 steht für Geräte, die den DCI-P3-Farbraum darstellen können;
• rec2020 beinhaltet Geräte, die den Farbraum Rec2020 beziehungsweise BT.2020 anzeigen können.

In der Praxis können Sie also zunächst eine Farbe – oder auch ein Logo oder Bild – für alle Geräte festlegen. Per Media Query überschreiben Sie dann die Farbe oder das Bild für moderne Monitore, die mehr Farben darstellen können:

header {
background-color:
/* Standard-RGB-Farbe */
}
@media (color-gamut: p3) {
header {
background-color:
/* leuchtendere DCI-P3-Farbe */
}
}

Mit einem solchen Fallback können Webworker die nächste Website nun bei Bedarf deutlich farbenfroher gestalten.

INFO: Neue Farbfunktionen in CSS

Neben modernen Farbräumen bietet CSS noch weitere neue Farbfunktionen.

Allerdings können Sie noch nicht alle Funktionen in der Praxis verwenden. Es lohnt sich, ab und zu auf caniuse.com vorbeizusehen, um den aktuellen Stand zu klären.

color-mix()

In allen modernen Browsern können Sie nun Farben direkt in CSS mischen. Sie geben einen Farbraum, die beiden Farben und das Mischverhältnis an. Im folgenden Beispiel wird Rot auf 30 Prozent festgelegt, so sind für Weiß automatisch 70 Prozent übrig.

.button {
background-color: color-mix(in
lch, red 30%, white);
}

Relative Colors

Mithilfe von relativen Farben könnten Sie Ihr komplettes Farbschema anhand einer einzelnen Basisfarbe konzipieren. Das funktioniert derzeit aber nur in Safari. In diesem Beispiel gehen Sie von einer Hex-Farbe aus, wandeln sie in LCH um, ändern die Helligkeit (L) und setzen die Transparenz auf 0.25.

header {
background: lch(from #DC143C
calc(l - 20%) c h / 0.25);
}

color-contrast()

Diese Funktion ist Teil des CSS Color Module Level 6 und kann momentan noch in keinem Browser verwendet werden. Es geht darum, Barrierefreiheit zu unterstützen. Im folgenden Beispiel ist wheat (#f5deb3) die Hintergrundfarbe. Das Ziel ist, eine Textfarbe zu finden, die die Anforderungen an Barrierefreiheit in der WCAG 2 auf dem Level AA erfüllt.

Dazu werden die Kontraste der Basisfarbe mit den folgenden aufgelisteten Farben ermittelt. Die erste Farbe, die einen ausreichend Kontrast erzeugt, gewinnt – in diesem Fall ist das darkgreen.

contrast-color(wheat tbd-bg'
wcag2(aa), bisque, olive,
sienna, darkgreen, maroon)