Fargeomfang (gamut) forklart: sRGB, Display P3 og farger utenfor
Fargeomfanget (gamut) er settet av farger en skjerm eller et fargerom kan vise. Nettet ble bygget på sRGB, men de fleste mobiler og mange bærbare viser nå Display P3, som har merkbart klarere røde, grønne og oransje farger.
2 min lesetid
Hva fargeomfang er
Alle skjermer blander rødt, grønt og blått lys. Det reneste røde, grønne og blå skjermen kan lage, markerer hjørnene i en trekant, og alle farger inne i trekanten er innenfor fargeomfanget. Farger utenfor kan rett og slett ikke vises på den skjermen.
sRGB, Display P3 og Rec. 2020
sRGB er standarden på nettet og for de fleste skjermer solgt før 2016. HEX, rgb() og hsl() beskriver alle sRGB-farger.
Display P3 dekker omtrent en firedel flere farger enn sRGB, mest fargesterke grønne, røde og oransje toner. iPhone, iPad, Mac og mange Android-telefoner og dyrere bærbare bruker det. I CSS skrives det som color(display-p3 r g b) eller som en OKLCH-verdi med høy kroma.
Rec. 2020 er enda større og brukes til HDR-video. Svært få skjermer dekker det helt.
| Format | Verdi |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Hva skjer med farger utenfor fargeomfanget
Ligger en CSS-farge utenfor skjermens fargeomfang, må nettleseren vise noe annet. Enkel klipping kutter hver kanal ved grensen og kan endre fargetonen. CSS Color 4 anbefaler i stedet gamut-tilpasning i OKLCH: behold lyshet og fargetone og senk kroma til fargen passer.
PickShade markerer alle farger som faller utenfor sRGB, og viser den tilpassede reservefargen, så du vet nøyaktig hva folk med eldre skjermer får se.
Slik bruker du P3-farger trygt i CSS
Skriv en sRGB-reserve først og verdien med bredt fargeomfang etterpå, eller legg den fargesterke verdien i en color-gamut-mediespørring.
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ørsmål og svar
Hvordan vet jeg om en farge er innenfor sRGB?
Lim den inn i PickShade. Alle farger utenfor sRGB får en advarsel om fargeomfang sammen med den nærmeste fargen som passer.
Virker P3-farger på Windows?
Ja, hvis skjermen dekker P3 og nettleseren kjenner skjermprofilen. På en sRGB-skjerm tilpasser nettleseren fargen til sRGB, så ingenting går i stykker.
Er HEX begrenset til sRGB?
Ja. HEX, rgb(), hsl() og hwb() beskriver alltid sRGB-farger. Bruk oklch() eller color(display-p3 ...) for farger med bredt fargeomfang.