Die CSS color()-Funktion: Farbräume jenseits von OKLCH

1. Warum CSS mehr als einen Farbraum braucht

Klassisches sRGB, der Standard-Farbraum des Webs seit den 1990er-Jahren, deckt nur einen Teil der Farben ab, die moderne Displays tatsächlich darstellen können. Ein aktuelles Smartphone- oder Laptop-Display mit Wide-Gamut-Panel kann satte Rot- und Grüntöne zeigen, die in sRGB gar nicht kodierbar sind, weil der Farbraum an dieser Stelle schlicht zu klein ist. Bilder oder Farbwerte, die auf sRGB begrenzt bleiben, wirken auf solchen Displays automatisch etwas blasser, als es die Hardware eigentlich hergeben würde.

Die generische Funktion color(<farbraum> <komponenten>) schließt diese Lücke, indem sie CSS erlaubt, Farbwerte explizit in einem von mehreren definierten Farbräumen anzugeben, statt implizit immer von sRGB auszugehen. Anders als oklch(), das ein eigenständiges, wahrnehmungsbasiertes Farbmodell beschreibt, ist color() ein generischer Container, dessen erster Parameter den gewünschten Farbraum benennt und dessen übrige Parameter die Farbwerte in diesem Raum angeben.

.hero-banner {
  /* sRGB als Basis */
  background: rgb(220, 38, 38);
}

.hero-banner.wide-gamut {
  /* display-p3 zeigt ein saettigteres Rot auf faehigen Displays */
  background: color(display-p3 0.86 0.15 0.15);
}

2. display-p3: der relevanteste Wide-Gamut-Farbraum für Consumer-Hardware

display-p3 ist der Farbraum, der auf aktuellen Apple-Geräten, vielen High-End-Android-Smartphones und modernen Monitoren tatsächlich zum Einsatz kommt. Er deckt gegenüber sRGB vor allem im Rot- und Grünbereich deutlich mehr Fläche des sichtbaren Farbraums ab und ist der einzige Wide-Gamut-Farbraum, der in der Praxis auf einem nennenswerten Anteil der im Umlauf befindlichen Endgeräte auch tatsächlich hardwareseitig darstellbar ist.

Für Produktfotos, insbesondere von Objekten mit satten Farben wie Textilien, Kosmetik oder Lebensmitteln, macht der Unterschied zwischen sRGB und display-p3 auf einem fähigen Display einen sichtbaren Unterschied in der Farbtiefe. Weil display-p3 zugleich der am breitesten unterstützte Wide-Gamut-Raum ist, ist er in den allermeisten Fällen die richtige erste Wahl, bevor man über exotischere Farbräume wie prophoto-rgb überhaupt nachdenkt.

3. a98-rgb und prophoto-rgb: Farbräume aus der professionellen Fotografie

a98-rgb entspricht dem klassischen Adobe-RGB-Farbraum, der seit Jahrzehnten in der professionellen Fotografie und im Druck verwendet wird und gegenüber sRGB vor allem im Cyan-Grün-Bereich mehr Farbtiefe bietet. Er ist relevant, wenn Bildmaterial bereits in Adobe RGB produziert wurde, etwa aus einer professionellen Kamera- oder Bildbearbeitungs-Pipeline, und ohne verlustbehaftete Konvertierung direkt im Web dargestellt werden soll.

prophoto-rgb geht noch einen Schritt weiter und deckt einen Farbraum ab, der größer ist als jedes aktuelle Consumer-Display tatsächlich darstellen kann. Er wird fast ausschließlich in professionellen RAW-Bildbearbeitungs-Workflows verwendet, als Zwischenformat mit maximaler Farbreserve. Für Web-Anwendungen ist prophoto-rgb in der Praxis selten die richtige Wahl, weil kein verbreitetes Display den vollen Umfang überhaupt zeigen kann und die Werte de facto auf das Display-Gamut heruntergerechnet werden.

4. rec2020: der Farbraum für HDR-Video und zukünftige Displays

rec2020, auch BT.2020 genannt, ist der Farbraum-Standard für UHD- und HDR-Video und deckt einen noch größeren Bereich ab als display-p3. Aktuelle Consumer-Displays können diesen Farbraum bislang nur teilweise ausschöpfen, weshalb der praktische Nutzen von rec2020 im normalen Web-Design heute noch begrenzt ist. Relevant wird er vor allem bei Videoinhalten, die bereits in rec2020 gemastert wurden, und bei Projekten, die gezielt auf zukünftige Display-Generationen vorbereitet sein sollen.

Wer heute schon rec2020-Werte im CSS verwendet, sollte sich bewusst sein, dass die tatsächlich sichtbare Farbe auf den meisten aktuellen Geräten ohnehin auf das jeweilige Display-Gamut begrenzt wird, der Browser also automatisch auf den bestmöglichen darstellbaren Wert zurückfällt. Das macht rec2020 zu einer Investition in die Zukunft, deren Wirkung sich erst mit breiterer Hardware-Unterstützung voll entfaltet.

.video-overlay {
  /* rec2020 fuer zukuenftige HDR-faehige Displays,
     Browser faellt automatisch auf darstellbares Gamut zurueck */
  background: color(rec2020 0.7 0.05 0.1 / 0.85);
}

5. color() im Vergleich zu oklch() und lab()

oklch() und lab() beschreiben eigenständige, wahrnehmungsbasierte Farbmodelle, in denen gleich große numerische Abstände auch als gleich große wahrgenommene Farbunterschiede empfunden werden, unabhängig vom darstellenden Gerät. Das macht sie ideal, um Farbverläufe, Farbpaletten oder algorithmisch generierte Farbtöne zu berechnen, weil Interpolationen in diesen Räumen gleichmäßiger wirken als in klassischem RGB.

Die generische color()-Funktion dagegen adressiert eine andere Frage: nicht wie eine Farbe berechnet oder gemischt wird, sondern in welchem Farbraum sie tatsächlich kodiert und dargestellt werden soll. In der Praxis schließen sich beide Konzepte nicht aus: Eine Farbe kann in oklch() berechnet und für die Darstellung anschließend in einen Wide-Gamut-Farbraum wie display-p3 konvertiert werden, wenn eine bestimmte Sättigung im sRGB-Raum gar nicht erreichbar wäre.

6. Fallback-Strategie für Browser und Displays ohne Wide-Gamut-Support

Nicht jeder Browser unterstützt color() mit Wide-Gamut-Farbräumen, und selbst wenn er es tut, kann das angeschlossene Display trotzdem nur sRGB darstellen. Deshalb gehört zu jeder Verwendung von color(display-p3 ...) ein sRGB-Fallback, der als reguläre rgb()- oder Hex-Deklaration vor der modernen Deklaration steht, weil CSS bei nicht erkannten Werten die letzte gültige Deklaration einer Eigenschaft behält.

Diese Kaskaden-Reihenfolge funktioniert automatisch: Ein Browser ohne Wide-Gamut-Support ignoriert die color()-Zeile komplett und bleibt beim vorangehenden sRGB-Wert, ganz ohne @supports-Abfrage. Wichtig ist nur, dass der sRGB-Fallback tatsächlich vor der Wide-Gamut-Deklaration steht, denn CSS wendet bei gleicher Spezifität immer die letzte gültige Deklaration an.

.brand-accent {
  /* sRGB-Fallback zuerst */
  color: rgb(217, 70, 239);
  /* Wide-Gamut-Wert danach -- wird ignoriert, wenn nicht unterstuetzt */
  color: color(display-p3 0.83 0.28 0.93);
}

7. Praxisbeispiel: Produktbilder und Branding-Farben mit display-p3

Ein Onlineshop mit farbintensiven Produkten, etwa Modeartikeln oder Kosmetik, profitiert am direktesten von display-p3, weil genau in diesem Marktsegment die Farbtreue der Produktdarstellung kaufentscheidend sein kann. Statt nur das Produktbild selbst in einem Wide-Gamut-Format auszuliefern, lohnt es sich, auch begleitende UI-Elemente wie Akzentfarben, Badges oder Call-to-Action-Buttons in display-p3 zu definieren, damit die gesamte Markenwahrnehmung konsistent satter wirkt.

Für das eigentliche Corporate-Branding, etwa das Primärfarbe eines Logos, lohnt sich display-p3 besonders dann, wenn die Markenfarbe nahe am Rand des sRGB-Farbraums liegt, zum Beispiel ein sehr sattes Pink oder Orange. Liegt die Markenfarbe dagegen ohnehin komfortabel innerhalb des sRGB-Raums, etwa ein gedecktes Blau oder Grau, bringt display-p3 kaum einen sichtbaren Unterschied und der zusätzliche Pflegeaufwand lohnt sich in diesem Fall selten.

8. Wide-Gamut-Werte ermitteln: Tooling und Konvertierung

Wide-Gamut-Farbwerte lassen sich nicht einfach aus einem bestehenden sRGB-Hexcode ableiten, weil eine echte Farbraum-Konvertierung nötig ist, keine bloße Zahlenumrechnung. Moderne Bildbearbeitungsprogramme wie Photoshop oder Affinity Photo zeigen Farbwerte direkt im gewählten Zielfarbraum an, und auch mehrere browserbasierte Farbwähler-Werkzeuge unterstützen inzwischen die direkte Ausgabe von color(display-p3 ...)-Syntax.

Wer Markenfarben konsequent in mehreren Farbräumen pflegen will, sollte sie in einem zentralen Design-Token-System als Paar aus sRGB-Fallback und display-p3-Wert hinterlegen, ähnlich wie bei light-dark()-Wertepaaren für Farbschemata. Das verhindert, dass Wide-Gamut-Werte nur punktuell an einzelnen Stellen im Projekt existieren, während der Rest des Stylesheets weiterhin auf reines sRGB begrenzt bleibt.

:root {
  --brand-pink-srgb: rgb(236, 72, 153);
  --brand-pink-p3: color(display-p3 0.87 0.36 0.58);
}

.badge {
  background: var(--brand-pink-srgb);
  background: var(--brand-pink-p3);
}

9. Browser-Support-Status für color() und Wide-Gamut-Farbräume

Safari unterstützt display-p3 über color() bereits seit mehreren Jahren vollständig, was angesichts der engen Kopplung an Apples eigene Wide-Gamut-Displays wenig überrascht. Chrome und Edge zogen mit vollständiger color()-Unterstützung nach, sodass die Funktion inzwischen in allen drei großen Browser-Engines produktionsreif verfügbar ist.

Die Displayseite bleibt trotzdem der limitierende Faktor: Selbst ein Browser mit vollständiger color()-Unterstützung kann auf einem klassischen sRGB-Monitor keinen sichtbaren Unterschied zeigen, weil die Hardware die zusätzlichen Farbtöne schlicht nicht darstellen kann. Der Fallback-Mechanismus über die CSS-Kaskade bleibt deshalb auch auf lange Sicht sinnvoll, unabhängig vom reinen Browser-Support-Status.

10. Zusammenfassung

11. FAQ: Die color()-Funktion in CSS: Das Wichtigste auf einen Blick