Farveomfang forklaret: sRGB, Display P3 og farver uden for gamut
Et farveomfang (gamut) er de farver, en skærm eller et farverum kan vise. Nettet blev bygget på sRGB, men de fleste telefoner og mange bærbare viser nu Display P3, som har tydeligt mere intense røde, grønne og orange farver.
2 min. læsetid
Hvad et farveomfang er
Alle skærme blander rødt, grønt og blåt lys. Den reneste røde, grønne og blå, skærmen kan frembringe, danner hjørnerne i en trekant, og alle farver inde i trekanten ligger i dens farveomfang. Farver uden for trekanten kan den skærm simpelthen ikke vise.
sRGB, Display P3 og Rec. 2020
sRGB er standarden på nettet og på de fleste skærme solgt før 2016. HEX, rgb() og hsl() beskriver alle farver i sRGB.
Display P3 rummer omkring en fjerdedel flere farver end sRGB, især intense grønne, røde og orange. iPhone, iPad, Mac og mange Android-telefoner og dyrere bærbare bruger det. I CSS skrives det som color(display-p3 r g b) eller som en OKLCH-værdi med høj kroma.
Rec. 2020 er endnu større og bruges til HDR-video. Meget få skærme dækker det helt.
| Format | Værdi |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Hvad sker der med farver uden for farveomfanget
Hvis en CSS-farve ligger uden for skærmens farveomfang, må browseren vise noget andet. Simpel klipning skærer hver kanal ned til grænsen og kan ændre farvetonen. CSS Color 4 anbefaler i stedet tilpasning i OKLCH: bevar lyshed og farvetone, og sænk kroma, indtil farven passer.
PickShade markerer alle farver, der falder uden for sRGB, og viser den tilpassede reservefarve, så du ved præcis, hvad folk med ældre skærme vil se.
Sådan bruger du P3-farver sikkert i CSS
Skriv først en fallback i sRGB og derefter værdien med bredt farveomfang, eller pak den intense værdi ind i en color-gamut-medieforespørgsel.
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);
}
}Spørgsmål og svar
Hvordan ved jeg, om en farve ligger inden for sRGB?
Indsæt den i PickShade. Alle farver uden for sRGB får en advarsel om farveomfanget sammen med den nærmeste farve, der passer.
Virker P3-farver på Windows?
Ja, hvis skærmen dækker P3, og browseren kender skærmprofilen. På en sRGB-skærm tilpasser browseren farven til sRGB, så intet går i stykker.
Er HEX begrænset til sRGB?
Ja. HEX, rgb(), hsl() og hwb() beskriver altid farver i sRGB. Brug oklch() eller color(display-p3 ...) til farver med bredt farveomfang.