P3 Rosso Intenso
Rosso super saturo
P3 Verde Mela
Verde super saturo
P3 Arancione Cinema
Arancione qualità cinema
P3 Rosa Neon
Rosa super saturo
P3 Ciano Giada
Ciano super saturo
P3 Viola
Viola super saturo
/* sRGB fallback */
color: #ff4500;
/* P3 enhanced */
color: color(display-p3 1 0.3 0);
/* Media query detect */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
Campioni P3 più vivaci → Vero supporto P3
P3 tagliato → Solo gamut sRGB
Test Professionale Colore DCI-P3
Verifica con precisione se il tuo display supporta veramente il gamut ampio P3 attraverso campioni colore esclusivi P3, visualizzazione confine sRGB e test saturazione per canale.
Campioni Esclusivi P3
Visualizza colori che solo i monitor P3 possono renderizzare correttamente: rosso ultra-saturo, verde Apple, arancione grado cinema. Sui display sRGB, questi colori vengono tagliati ai valori sRGB più vicini, perdendo la loro vivacità.
Visualizzazione Confine sRGB
Barre gradiente transizionano dal confine gamut sRGB agli estremi gamut P3. Sui display P3, il gradiente continua oltre il confine sRGB; sui display sRGB, il gradiente si ferma al confine (i colori non cambiano più).
Verifica Colore CSS P3
Tutti i campioni renderizzati usando sintassi CSS color(display-p3 ...) — il supporto colore P3 nativo del browser. Combinato con query @media (color-gamut: p3), gli sviluppatori frontend possono offrire colori interfaccia più vivaci agli utenti gamut ampio.
Cos'è DCI-P3?
Comprendere le origini e le applicazioni dello standard gamut colore P3.
Standard Industria Cinema
DCI-P3 è stato stabilito nel 2005 da Digital Cinema Initiatives, originariamente per proiezione cinema digitale. Copre circa il 45% dei colori visibili dall'uomo, circa il 25% più grande del 35% di sRGB.
Preferito Ecosistema Apple
Apple ha adottato P3 pienamente a partire dal 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro e Pro Display XDR supportano tutti P3. La gestione colore macOS gestisce perfettamente i contenuti P3, rendendolo l'ecosistema P3 più maturo.
Standard Contenuti HDR
I formati HDR come HDR10 e Dolby Vision usano P3 come contenitore colore. Netflix, Disney+ e Apple TV+ masterizzano contenuti HDR nel gamut P3. I display senza P3 non possono renderizzare completamente i colori HDR.
Come Determinare il Supporto P3
Tre passaggi per verificare la capacità colore P3 del tuo display.
Visualizza Risultati Rilevamento
La pagina rileva automaticamente la media query color-gamut del browser al caricamento. Se mostra "P3 Supportato", la combinazione display + SO + browser può renderizzare colori P3.
Confronta Campioni Esclusivi
Osserva l'area campioni esclusivi P3. Se questi campioni appaiono notevolmente più vivaci dei controlli sRGB adiacenti (specialmente rossi e verdi), il tuo display sta effettivamente mostrando colori estesi P3 piuttosto che tagliare a sRGB.
Controlla Estensione Gradiente
Trova il marcatore confine sRGB nelle barre gradiente. Sui display P3, il gradiente continua a diventare più vivace oltre il marcatore; sui display sRGB, i colori smettono di cambiare oltre il marcatore — quello è il limite fisico del gamut sRGB.
Terminologia Chiave Colore P3
color(display-p3)
Funzione colore CSS Level 4 che permette di specificare colori P3 direttamente nelle pagine web. Sintassi: color(display-p3 r g b) con valori RGB gamma 0-1. Safari è stato il primo a supportarla; Chrome 111+ e Firefox 113+ la supportano ora.
Media Query Gamut Colore
@media (color-gamut: p3) rileva se il dispositivo dell'utente supporta P3. Usa in CSS o matchMedia JavaScript per implementare degradazione elegante o miglioramento progressivo per dispositivi gamut diversi.
Clipping
Quando i colori P3 sono visualizzati su un monitor sRGB, i valori che eccedono la gamma sRGB vengono tagliati ai valori confine sRGB più vicini. Questo causa perdita saturazione — un arancione P3 vivace diventa un arancione sRGB ordinario.
Gamut Ampio
Si riferisce genericamente a capacità gamut che eccedono sRGB. DCI-P3 è lo standard gamut ampio più comune, seguito da Adobe RGB. Display P3 è la variante display Apple di DCI-P3, usando il punto bianco D65.
Quali Dispositivi Supportano P3
Supporto gamut P3 tra i dispositivi mainstream.
Dispositivi Apple
Supporto P3:
• iPad Pro (tutti): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Pro Display XDR / Studio Display: 100% P3.
Monitor Windows
Supporto P3:
• Monitor gaming (fascia alta): 90-95% P3.
• Monitor ufficio standard: tipicamente solo sRGB.
• Nota: la gestione colore Windows richiede supporto profili ICC.
Dispositivi Android
Supporto P3:
• Google Pixel 6+: supporto gamut P3.
• Dispositivi fascia media: tipicamente solo sRGB o poco sotto.
• Gestione colore Android migliorata a partire da Android 10.
Supporto Browser
Renderizzazione Colore:
• Chrome 111+: supporto funzione colore CSS P3.
• Firefox 113+: supporto funzione colore CSS P3.
• Edge: segue Chromium, sincronizzato con supporto Chrome.
Pratiche Frontend Colore P3
Colori CSS P3
Usa color(display-p3 1 0.2 0.1) per colori brand ultra-saturi. Combina con @supports e valori fallback per retrocompatibilità.
Rilevamento Media Query
@media (color-gamut: p3) { } fornisce colori migliorati per dispositivi P3. In JS: matchMedia("(color-gamut: p3)") per rilevamento dinamico.
Asset Immagine
Servi immagini con profilo colore Display P3 ai dispositivi P3. Usa <picture> + media query per caricare immagini gamut diverso per capacità dispositivo.
Degradazione Elegante
Fornisci sempre un fallback sRGB prima dei valori P3. CSS: color: #ff4500; color: color(display-p3 1 0.3 0); — la seconda riga sovrascrive la prima.
Domande Frequenti
Q.Il browser riporta "P3 supportato" ma il mio schermo è sRGB?
macOS converte i colori P3 al display sRGB, quindi il browser riporta ancora supporto P3 a livello sistema. Ma lo schermo fisicamente non può mostrare colori estesi P3 — i valori in eccesso vengono tagliati. I confronti campioni di questa pagina aiutano a verificare la capacità effettiva del display.
Q.I colori P3 influenzano la velocità caricamento pagina?
No. color(display-p3) è una proprietà CSS nativa che non richiede librerie JS o risorse extra. L'unico impatto sulle prestazioni può venire da immagini con profili colore P3 incorporati, che sono tipicamente leggermente più grandi delle versioni sRGB.
Q.Gli screenshot iPhone preservano i colori P3?
Sì. Screenshot e foto iPhone usano per default lo spazio colore Display P3. Quando inviati a dispositivi sRGB, i colori vengono convertiti. Visualizzare questi screenshot su dispositivi compatibili P3 mostra colori più vivaci.
Q.Perché fornire sia valori P3 che sRGB?
La stragrande maggioranza dei display nel mondo è ancora sRGB. Usare solo valori P3 significa che i browser non supportati li ignoreranno o mostreranno colori incorretti. Il cascading CSS ti permette di scrivere prima un fallback sRGB, poi miglioramento P3 — il browser sceglie automaticamente la versione supportata.
Q.Il "95% DCI-P3" del mio display è sufficiente?
Sì. Copertura DCI-P3 95%+ può mostrare la stragrande maggioranza dei colori estesi P3. Le differenze appaiono solo in regioni confine rosso-verde estremamente sature. Copertura 100% è più un punto marketing — nell'uso reale, 95% e 100% sono quasi indistinguibili.
Q.Qual è la differenza tra Display P3 e DCI-P3?
Display P3 è la variante Apple che usa il punto bianco D65 (come sRGB), adatta per display. DCI-P3 usa un punto bianco leggermente verdastro come standard proiezione cinema. Entrambi hanno gamme gamut quasi identiche — solo il punto bianco differisce.
Consigli Sviluppo Colore P3
- • Sintassi CSS: color: color(display-p3 1 0.3 0); — nota i valori RGB gamma 0-1, non 0-255.
- • Retrocompatibilità: Scrivi sempre un fallback sRGB nella riga prima del tuo valore P3. Il browser sceglie automaticamente la regola supportata.
- • Strumenti Debug: Il color picker di Chrome DevTools supporta già anteprima e conversione gamut P3.
- • Consiglio Design: Usa miglioramento P3 solo per colori brand, pulsanti CTA e immagini chiave — non per ogni singolo colore.