Gamutul de culori explicat: sRGB, Display P3 și culorile din afara gamutului
Gamutul este setul de culori pe care le poate afișa un ecran sau un spațiu de culoare. Webul a fost construit pe sRGB, dar majoritatea telefoanelor și multe laptopuri afișează acum Display P3, cu roșuri, verzi și portocalii vizibil mai vii.
Citire: 2 min
Ce este gamutul
Orice ecran amestecă lumină roșie, verde și albastră. Cel mai pur roșu, verde și albastru pe care le poate produce marchează colțurile unui triunghi, iar fiecare culoare din interiorul acestui triunghi se află în gamutul lui. Culorile din afara lui pur și simplu nu pot fi afișate pe acel ecran.
sRGB, Display P3 și Rec. 2020
sRGB este standardul implicit al webului și al majorității monitoarelor vândute înainte de 2016. HEX, rgb() și hsl() descriu toate culori sRGB.
Display P3 acoperă cu aproximativ un sfert mai multe culori decât sRGB, mai ales verzi, roșuri și portocalii vii. Îl folosesc iPhone, iPad, Mac și multe telefoane Android și laptopuri premium. În CSS se scrie ca color(display-p3 r g b) sau ca o valoare OKLCH cu cromă mare.
Rec. 2020 este și mai mare și se folosește pentru video HDR. Foarte puține ecrane îl acoperă complet.
| Format | Valoare |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Ce se întâmplă cu culorile din afara gamutului
Dacă o culoare CSS iese din gamutul ecranului, browserul trebuie să afișeze altceva. Tăierea simplă (clipping) limitează fiecare canal la maxim și poate schimba nuanța. CSS Color 4 recomandă în schimb maparea gamutului în OKLCH: păstrezi luminozitatea și nuanța și scazi croma până când culoarea încape.
PickShade marchează fiecare culoare care iese din sRGB și arată varianta de rezervă după mapare, ca să știi exact ce vor vedea oamenii pe ecranele mai vechi.
Cum folosești în siguranță culori P3 în CSS
Scrie mai întâi o valoare de rezervă sRGB și apoi valoarea cu gamut larg, sau pune valoarea vie într-un media query 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);
}
}Întrebări și răspunsuri
Cum aflu dacă o culoare este în sRGB?
Lipește-o în PickShade. Orice culoare din afara sRGB primește un avertisment de gamut, împreună cu cea mai apropiată culoare care încape.
Funcționează culorile P3 pe Windows?
Da, dacă monitorul acoperă P3 și browserul cunoaște profilul ecranului. Pe un ecran sRGB, browserul mapează culoarea în sRGB, deci nu se strică nimic.
Este HEX limitat la sRGB?
Da. HEX, rgb(), hsl() și hwb() descriu mereu culori sRGB. Pentru culori cu gamut larg folosește oklch() sau color(display-p3 ...).