Färgomfång förklarat: sRGB, Display P3 och färger utanför omfånget
Ett färgomfång (gamut) är den mängd färger som en skärm eller en färgrymd kan visa. Webben byggdes på sRGB, men de flesta mobiler och många bärbara datorer visar i dag Display P3, som har märkbart intensivare röda, gröna och orange toner.
2 min läsning
Vad ett färgomfång är
Varje skärm blandar rött, grönt och blått ljus. Det renaste röda, gröna och blåa den kan återge bildar hörnen i en triangel, och alla färger inuti triangeln ligger inom dess färgomfång. Färger utanför går helt enkelt inte att visa på den skärmen.
sRGB, Display P3 och Rec. 2020
sRGB är standard på webben och på de flesta skärmar som såldes före 2016. HEX, rgb() och hsl() beskriver alla sRGB-färger.
Display P3 rymmer ungefär en fjärdedel fler färger än sRGB, främst intensiva gröna, röda och orange. iPhone, iPad, Mac och många Android-telefoner och premiumdatorer använder det. I CSS skrivs det som color(display-p3 r g b) eller som ett OKLCH-värde med hög kroma.
Rec. 2020 är ännu större och används för HDR-video. Mycket få skärmar täcker det helt.
| Format | Värde |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Vad som händer med färger utanför omfånget
Om en CSS-färg ligger utanför skärmens färgomfång måste webbläsaren visa något annat. Enkel klippning kapar varje kanal vid gränsen och kan ändra färgtonen. CSS Color 4 rekommenderar i stället anpassning till färgomfånget (gamut mapping) i OKLCH: behåll ljushet och färgton och sänk kroma tills färgen ryms.
PickShade markerar varje färg som hamnar utanför sRGB och visar den anpassade reservfärgen, så att du vet exakt vad personer med äldre skärmar kommer att se.
Så använder du P3-färger säkert i CSS
Skriv en sRGB-reserv först och värdet med brett färgomfång efter, eller lägg det intensiva värdet i en mediefråga för color-gamut.
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);
}
}Frågor och svar
Hur vet jag om en färg ligger inom sRGB?
Klistra in den i PickShade. Varje färg utanför sRGB får en varning om färgomfånget tillsammans med närmaste färg som ryms.
Fungerar P3-färger i Windows?
Ja, om skärmen täcker P3 och webbläsaren känner till skärmprofilen. På en sRGB-skärm flyttar webbläsaren färgen in i sRGB, så inget går sönder.
Är HEX begränsat till sRGB?
Ja. HEX, rgb(), hsl() och hwb() beskriver alltid sRGB-färger. Använd oklch() eller color(display-p3 ...) för färger med brett färgomfång.