Farbumfang (Gamut) erklärt: sRGB, Display P3 und Farben außerhalb des Gamuts
Der Gamut, auf Deutsch Farbumfang, ist die Menge an Farben, die ein Bildschirm oder Farbraum darstellen kann. Das Web wurde auf sRGB aufgebaut, doch die meisten Smartphones und viele Laptops zeigen heute Display P3 mit spürbar kräftigeren Rot-, Grün- und Orangetönen.
Lesezeit: 2 Min.
Was ein Gamut ist
Jeder Bildschirm mischt rotes, grünes und blaues Licht. Das reinste Rot, Grün und Blau, das er erzeugen kann, bilden die Ecken eines Dreiecks, und jede Farbe innerhalb dieses Dreiecks liegt in seinem Gamut. Farben außerhalb kann dieser Bildschirm schlicht nicht darstellen.
sRGB, Display P3 und Rec. 2020
sRGB ist der Standard im Web und bei den meisten Monitoren, die vor 2016 verkauft wurden. HEX, rgb() und hsl() beschreiben alle sRGB-Farben.
Display P3 umfasst etwa ein Viertel mehr Farben als sRGB, vor allem kräftige Grün-, Rot- und Orangetöne. iPhones, iPads, Macs sowie viele Android-Smartphones und hochwertige Laptops nutzen ihn. In CSS schreibt man ihn als color(display-p3 r g b) oder als OKLCH-Wert mit hohem Chroma.
Rec. 2020 ist noch größer und wird für HDR-Video verwendet. Nur sehr wenige Bildschirme decken ihn vollständig ab.
| Format | Wert |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Was mit Farben außerhalb des Gamuts passiert
Liegt eine CSS-Farbe außerhalb des Bildschirm-Gamuts, muss der Browser etwas anderes anzeigen. Einfaches Clipping schneidet jeden Kanal am Grenzwert ab und kann dabei den Farbton verändern. CSS Color 4 empfiehlt stattdessen Gamut-Mapping in OKLCH: Helligkeit und Farbton bleiben, das Chroma sinkt, bis die Farbe hineinpasst.
PickShade markiert jede Farbe außerhalb von sRGB und zeigt den umgerechneten Fallback. So weißt du genau, was Menschen mit älteren Bildschirmen sehen.
P3-Farben sicher in CSS verwenden
Schreib zuerst einen sRGB-Fallback und danach den Wide-Gamut-Wert, oder pack den kräftigen Wert in eine color-gamut-Media-Query.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Fragen und Antworten
Wie erkenne ich, ob eine Farbe innerhalb von sRGB liegt?
Füge sie in PickShade ein. Jede Farbe außerhalb von sRGB bekommt eine Gamut-Warnung, zusammen mit der nächstgelegenen Farbe, die hineinpasst.
Funktionieren P3-Farben unter Windows?
Ja, wenn der Monitor P3 abdeckt und der Browser das Displayprofil kennt. Auf einem sRGB-Bildschirm rechnet der Browser die Farbe in sRGB um, es geht also nichts kaputt.
Ist HEX auf sRGB beschränkt?
Ja. HEX, rgb(), hsl() und hwb() beschreiben immer sRGB-Farben. Für Wide-Gamut-Farben nimmst du oklch() oder color(display-p3 ...).