Display P3

Display P3 è uno spazio colore RGB ad ampia gamma introdotto da Apple nel 2015. Utilizza gli stessi primari rosso e blu di DCI-P3 (lo standard di proiezione cinematografica del 2007) ma con il punto di bianco e la gamma di Apple. Rispetto a sRGB, P3 copre circa il 25% in più di volume cromatico — la maggior parte dell’extra si trova nei rossi e verdi saturi.

Apple distribuisce ogni display Mac e iPhone dal 2017+ con pannelli di classe P3. Altri produttori hanno seguito; la maggior parte dei telefoni Android premium, i monitor di fascia media e alta e tutti i TV OLED raggiungono P3 o oltre.

Il CSS Color Module Level 4 supporta P3 tramite la funzione color(): color(display-p3 1 0.4 0.2). Lo stesso colore espresso in sRGB verrebbe troncato — l’arancione brillante e saturo non esiste in sRGB. I browser che supportano entrambi renderizzeranno la versione P3 sui display compatibili P3 e si degraderanno automaticamente sugli altri.

I convertitori di colori di Convertitive attualmente funzionano solo in sRGB. Il supporto P3 è nel piano di sviluppo.

La distinzione tra DCI-P3, Display P3 e P3-D65 che confonde i designer: tre diverse specifiche portano “P3” nel nome. DCI-P3 è il originale standard SMPTE per il cinema con un punto di bianco spostato verso il verde (circa 6300 K) e una gamma di potenza pura 2,6 — usato dai proiettori cinematografici, non dai display consumer. Display P3 è l’adattamento di Apple con il punto di bianco consumer standard D65 (6504 K) e la curva gamma a tratti di sRGB. P3-D65 è lo stesso di Display P3 con un altro nome. Il color(display-p3 …) del CSS significa Display P3 specificamente; gli asset esportati da pipeline cinematografiche come DCI-P3 appariranno leggermente verdi se trattati come Display P3 senza conversione.

Rilevare il supporto P3 nel codice, correttamente: usa la media query CSS @media (color-gamut: p3) per delimitare gli stili ad ampia gamma, abbinata a @supports (color: color(display-p3 0 0 0)) per la proprietà. I browser senza rendering ad ampia gamma o in esecuzione su display sRGB si degraderanno alla dichiarazione sRGB fornita a fianco. Evita il comune errore di dichiarare solo colori P3 — i browser solo-sRGB ignoreranno la regola e il tuo CSS tornerà ai valori predefiniti ereditati. La metodologia dei colori di Convertitive copre il pattern a doppia dichiarazione. Correlati: sRGB, gamut, cromaticità. Riferimento: ICC — Caratterizzazione Display P3.

Esempio pratico: un rosso brand oltre sRGB

Un brand vuole il rosso piú saturo che i propri clienti iPhone possano visualizzare. In sRGB il rosso massimo è rgb(255, 0, 0) con coordinate di cromaticità CIE-1931 approssimativamente (0.640, 0.330). Il primario Display P3 equivalente si trova a (0.680, 0.320) — completamente al di fuori del triangolo sRGB. Dichiarato come color(display-p3 1 0 0), il colore è circa il 25% piú saturo per l’occhio su un pannello ad ampia gamma. Su un display solo-sRGB la doppia dichiarazione CSS background: red; background: color(display-p3 1 0 0); si degrada automaticamente. Fotografando i due affiancati su un telefono P3, la differenza è visibile a distanza di un braccio — in particolare sui rossi Coca-Cola, Ferrari e altri colori brand che storicamente erano troncati sul web.

Quando P3 è importante e quando non lo è

Per l’identità del brand, le immagini di marketing e i portfolio fotografici, P3 è un aggiornamento significativo — i rossi saturi, i verdi e le carnagioni acquistano profondità visibile. Per la maggior parte del lavoro di interfaccia utente (testo, neutri, accenti smorzati), la differenza è impercettibile perché i colori non si avvicinano mai al confine della gamma sRGB. Per i flussi di lavoro di stampa, P3 è in gran parte irrilevante; le gamme delle stampanti sono piú piccole di sRGB nelle regioni sature e la conversione avviene comunque tramite profili CMYK. La specifica W3C CSS Color 4 è la fonte autorevole per la sintassi e le regole di rendering: CSS Color Module Level 4 — Display P3.