Gamut dei colori spiegato: sRGB, Display P3 e colori fuori gamut
Il gamut è l’insieme dei colori che uno schermo o uno spazio colore può mostrare. Il web è nato su sRGB, ma oggi quasi tutti gli smartphone e molti portatili mostrano Display P3, con rossi, verdi e arancioni decisamente più vivaci.
Lettura: 2 min
Cos’è il gamut
Ogni schermo mescola luce rossa, verde e blu. Il rosso, il verde e il blu più puri che riesce a produrre segnano gli angoli di un triangolo, e ogni colore dentro quel triangolo fa parte del suo gamut. I colori che stanno fuori semplicemente non possono essere mostrati su quello schermo.
sRGB, Display P3 e Rec. 2020
sRGB è lo standard del web e della maggior parte dei monitor venduti prima del 2016. HEX, rgb() e hsl() descrivono tutti colori sRGB.
Display P3 copre circa un quarto di colori in più rispetto a sRGB, soprattutto verdi, rossi e arancioni vivaci. Lo usano iPhone, iPad, Mac e molti smartphone Android e portatili di fascia alta. In CSS si scrive come color(display-p3 r g b) oppure come valore OKLCH con croma alto.
Rec. 2020 è ancora più ampio e si usa per i video HDR. Pochissimi schermi lo coprono per intero.
| Formato | Valore |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Cosa succede ai colori fuori gamut
Se un colore CSS è fuori dal gamut dello schermo, il browser deve mostrare qualcos’altro. Il semplice clipping taglia ogni canale al limite e può cambiare la tonalità. CSS Color 4 raccomanda invece il gamut mapping in OKLCH: mantenere luminosità e tonalità e ridurre il croma finché il colore non rientra.
PickShade segnala ogni colore che esce da sRGB e mostra il fallback ricalcolato, così sai esattamente cosa vedrà chi usa uno schermo più vecchio.
Usare i colori P3 in CSS in sicurezza
Scrivi prima un fallback sRGB e poi il valore ad ampio gamut, oppure racchiudi il valore vivace in una 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);
}
}Domande e risposte
Come faccio a sapere se un colore rientra in sRGB?
Incollalo in PickShade. Ogni colore fuori da sRGB riceve un avviso di gamut insieme al colore più vicino che rientra.
I colori P3 funzionano su Windows?
Sì, se il monitor copre P3 e il browser conosce il profilo del display. Su uno schermo sRGB il browser riporta il colore in sRGB, quindi non si rompe nulla.
HEX è limitato a sRGB?
Sì. HEX, rgb(), hsl() e hwb() descrivono sempre colori sRGB. Per i colori ad ampio gamut usa oklch() o color(display-p3 ...).