A színtartomány (gamut) érthetően: sRGB, Display P3 és a tartományon kívüli színek
A színtartomány (gamut) azoknak a színeknek a halmaza, amelyeket egy képernyő vagy színtér meg tud jeleníteni. A web az sRGB-re épült, de ma már a legtöbb telefon és sok laptop Display P3-at jelenít meg, amelyben érezhetően élénkebbek a pirosak, a zöldek és a narancsok.
2 perc olvasás
Mi a színtartomány
Minden képernyő piros, zöld és kék fényt kever. A legtisztább piros, zöld és kék, amit elő tud állítani, egy háromszög csúcsait jelöli ki, és minden szín, amely ezen a háromszögön belül van, a képernyő színtartományába tartozik. Az ezen kívül eső színeket az adott képernyő egyszerűen nem tudja megjeleníteni.
sRGB, Display P3 és Rec. 2020
Az sRGB a web és a 2016 előtt forgalomba került monitorok többségének alapértelmezése. A HEX, az rgb() és a hsl() mind sRGB színeket írnak le.
A Display P3 nagyjából negyedével több színt fed le, mint az sRGB, főleg élénk zöldeket, pirosakat és narancsokat. Az iPhone-ok, iPadek, Macek, valamint sok Android telefon és prémium laptop ezt használja. CSS-ben color(display-p3 r g b) alakban vagy magas krómájú OKLCH értékként írható le.
A Rec. 2020 még ennél is nagyobb, a HDR videóknál használják. Nagyon kevés képernyő fedi le teljesen.
| Formátum | Érték |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Mi történik a tartományon kívüli színekkel
Ha egy CSS szín kívül esik a képernyő színtartományán, a böngészőnek valami mást kell megjelenítenie. Az egyszerű levágás (clipping) minden csatornát a határértékre vág, ami megváltoztathatja a színezetet. A CSS Color 4 ehelyett az OKLCH-ban végzett színtartomány-leképezést (gamut mapping) ajánlja: a világosság és a színezet marad, a króma pedig addig csökken, amíg a szín bele nem fér.
A PickShade minden sRGB-n kívül eső színt megjelöl, és megmutatja a leképezett tartalék színt, így pontosan tudod, mit látnak azok, akik régebbi képernyőt használnak.
P3 színek biztonságos használata CSS-ben
Először írj egy sRGB tartalékértéket, utána a széles színtartományú értéket, vagy tedd az élénk értéket egy color-gamut media querybe.
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);
}
}Kérdések és válaszok
Honnan tudom, hogy egy szín az sRGB-n belül van-e?
Illeszd be a PickShade-be. Minden sRGB-n kívüli szín színtartomány-figyelmeztetést kap, a legközelebbi beleférő színnel együtt.
Működnek a P3 színek Windowson?
Igen, ha a monitor lefedi a P3-at, és a böngésző ismeri a kijelzőprofilt. sRGB képernyőn a böngésző az sRGB-be képezi le a színt, így semmi sem romlik el.
A HEX csak az sRGB-re korlátozódik?
Igen. A HEX, az rgb(), a hsl() és a hwb() mindig sRGB színeket ír le. Széles színtartományú színekhez az oklch() vagy a color(display-p3 ...) függvényt használd.