Farbräume fuer das Web: sRGB, DCI-P3, Rec.2020, Gamma und warum derselbe Hex-Wert auf zwei Bildschirmen unterschiedlich aussieht
Was ein Farbraum ist: Primaerfarben, Gamut und Referenzweiss
Ein Farbraum definiert drei Dinge: einen Satz von Primaerfarben, einen Referenzweisspunkt und eine Uebertragungsfunktion. Die Primaerfarben werden als genaue Farbortkoordinaten im CIE-1931-xy-Farbdiagramm angegeben - eine zweidimensionale Karte aller fuer einen Normalbetrachter sichtbaren Farben. Die drei Primaerfarben bilden ein Dreieck auf diesem Diagramm. Alle Farben innerhalb des Dreiecks koennen durch Mischen der Primaerfarben in verschiedenen Anteilen reproduziert werden; Farben ausserhalb koennen es nicht. Dieses Dreieck ist der Farbraum-Gamut.
Der Referenzweisspunkt ist die Farbe, die entsteht, wenn alle drei Primaerfarben mit maximaler Intensitaet betrieben werden. Fuer die meisten Verbraucher- und Webstandards ist das D65 - ein Normlichtart, die Tageslicht bei einer Farbtemperatur von etwa 6500 K modelliert. Zwei Displays mit identischen Gamut-Primaerfarben, aber unterschiedlichen Weisspunkten, werden neutrales Grau unterschiedlich darstellen. Wenn ein Browser den CSS-Wert #808080 interpretiert, nimmt er sRGB mit einem D65-Weisspunkt an und geht davon aus, dass das Display dieser Annahme entspricht.
sRGB: der universelle Web-Standard, normiert 1996
sRGB wurde 1996 von der Internationalen Elektrotechnischen Kommission als IEC 61966-2-1 definiert. Es wurde entwickelt, um die Eigenschaften eines typischen Verbraucher-CRT-Monitors Mitte der 1990er Jahre zu entsprechen. Die rote Primaerfarbe liegt bei CIE-xy-Koordinaten von ungefaehr (0,64; 0,33), Gruen bei (0,30; 0,60) und Blau bei (0,15; 0,06). Das resultierende Gamut-Dreieck deckt etwa 35 Prozent der fuer einen Normalbetrachter sichtbaren Farben gemaess dem CIE-1931-Farbdiagramm ab.
Jeder CSS-Hex-Farbwert, jede PNG- oder JPEG-Datei ohne eingebettetes ICC-Profil und jeder HTML-Canvas-Pixel liegt implizit in sRGB. Browser gehen von sRGB aus, sofern nichts anderes angegeben wird. Die praktische Grenze zeigt sich an den Raendern des Gamuts: Stark gesaettigte Rottoeone, kraeftige Gruentoene und reine Cyantoeone koennen nicht vollstaendig dargestellt werden. Eine reife Tomate, die im Freien fotografiert wurde, hat oft ein Rot, das ausserhalb des sRGB-Gamuts liegt; die Bilddatei beschneidet dieses Rot auf den naechstgelegenen sRGB-Wert, sodass die Farbe auf dem Bildschirm etwas weniger kraeftig erscheint als in der Realitaet.
DCI-P3: ein Kinostandard in Verbraucher-Displays
DCI-P3 entstand beim Digital Cinema Initiatives Konsortium. Die Primaerfarben sind gegenueber sRGB verschoben: Die rote Primaerfarbe bewegt sich leicht in Richtung Orange (xy ungefaehr 0,680; 0,320), und Gruen erstreckt sich weiter in Richtung reines Gruen (0,265; 0,690). Der resultierende Gamut deckt etwa 45,5 Prozent des CIE-1931-Farbdiagramms ab - etwa 26 Prozent mehr Flaeche als sRGB. Dieser breitere Gamut wurde entwickelt, damit digitale Kinoprojektoren gesaettigte Farben vergleichbar mit Analogfilm reproduzieren koennen.
Verbraucher-Displays begannen ab etwa 2015, P3-Primaerfarben zu integrieren, als Apple P3-faehige Panels im 27-Zoll-iMac einfuehrte, gefolgt vom iPhone 7 im Jahr 2016. Ein als #FF0000 gerenderter Pixel auf einem P3-Display mit P3-Farbraum erscheint merklich gesaettigter als derselbe Wert auf einem sRGB-Display. CSS stellt P3 ueber die Funktion color() bereit: color(display-p3 1 0 0) gibt das gesaettigtste P3-Rot an. Alle grossen Browser seit 2023 unterstuetzen diese Syntax und zeigen den erweiterten Gamut auf P3-faehiger Hardware an.
Rec.2020: der Broadcast-Zukunftsstandard und die aktuelle Display-Luecke
Rec.2020 (formal ITU-R BT.2020) wurde 2012 von der Internationalen Fernmeldeunion als Standard fuer Ultra-HD-Fernsehen definiert. Seine Primaerfarben naehern sich monochromatischem Licht: Rot wird nahe 630 nm definiert, Gruen nahe 532 nm und Blau nahe 467 nm. Der resultierende Gamut deckt etwa 75,8 Prozent des CIE-1931-Farbdiagramms ab - ungefaehr doppelt so viel wie sRGB.
Die Luecke zwischen Standard und Praxis ist erheblich: Kein Verbraucher-Display, das 2025 erhaeltlich ist, kann den vollstaendigen Rec.2020-Gamut reproduzieren. High-End-Referenzmonitore koennen etwa 75-80 Prozent des Rec.2020-Volumens im dreidimensionalen Farberscheinungsmodell CIECAM02 erreichen. HDR-Videoinhalte werden oft mit Rec.2020-Primaerfarben kombiniert mit einer PQ- oder HLG-Uebertragungsfunktion gemastert, aber Streaming-Plattformen liefern das finale Signal typischerweise auf Display P3 oder sRGB heruntergemapped.
Gamma und Uebertragungsfunktion: Warum die sRGB-Codierung kein reines Potenzgesetz ist
Der Ausdruck "Gamma 2.2" wird haeufig zur Beschreibung von sRGB verwendet, aber sRGB verwendet eine stueckweise Uebertragungsfunktion statt eines reinen Potenzgesetzes. Der Standard IEC 61966-2-1 definiert zwei Segmente: Fuer sehr niedrige Luminanzwerte (lineares C hoechstens 0,0031308) ist die Codierung linear - C multipliziert mit 12,92; oberhalb dieses Schwellenwerts folgt eine Potenzfunktion, die ungefaehr 1,055 mal C hoch 1/2,4 minus 0,055 entspricht. Das Ergebnis naehert sich Gamma 2,2 ueber den groessten Teil des nutzbaren Bereichs an.
Diese Codierung ist bei der Bildverarbeitung wichtig. Das Verkleinern eines Bildes durch Mitteln benachbarter Pixel im gamma-codierten Bereich ergibt ein leicht dunkleres Ergebnis als das Mitteln in linearem Licht - ein gut dokumentiertes Artefakt, das manchmal als Gamma-Dunkel-Mittelungsproblem bezeichnet wird. Korrektes Bild-Downscaling linearisiert die Werte zuerst, mittelt sie und codiert sie dann neu. CSS-Verlaeufe und color-mix() mischen standardmaessig im sRGB-Raum.
Warum derselbe Hex-Farbwert auf zwei Bildschirmen unterschiedlich aussieht
Mehrere unabhaengige Faktoren erklaeren, warum #FF6600 auf einem Bildschirm anders aussieht als auf einem anderen. Erstens: Wenn ein Display einen breiteren physischen Gamut (P3-Hardware) hat, aber keine Farbverwaltung durch das Betriebssystem nutzt, kann es sRGB-Signalwerte einfach auf seinen breiteren Primaerfarbgamut ausweiten, sodass alle Farben uebersaettigt erscheinen. Zweitens: Ein unkalibrierter Monitor kann einen anderen tatsaechlichen Weisspunkt, eine andere Gammakurve oder Farbtemperatur haben als der sRGB-Standard annimmt. Drittens: Die Unterstuetzung fuer Farbverwaltung in Browsern war historisch unterschiedlich.
Das ICC-Farbprofil, das in ein Bild eingebettet oder von einer Kalibriersoftware auf ein Display angewendet wird, beschreibt die Zuordnung vom codierten Farbraum des Inhalts zur tatsaechlichen gemessenen Antwort des Displays. Die Farbverwaltungspipeline des Betriebssystems - ColorSync unter macOS, Windows Color System unter Windows - fuehrt diese Konvertierung fuer jedes angeschlossene Display durch. Webentwickler, die auf Wide-Gamut-Displays abzielen, koennen @media (color-gamut: p3) verwenden, um color(display-p3 ...) Werte fuer lebhafte Oberflaeachenfarben bereitzustellen und einfaches Hex als sRGB-Fallback zu behalten. Die Farbpaletten- und Farbblindsimulationswerkzeuge von TeaFun arbeiten in sRGB.