Rouge flamboyant P3
Rouge ultra-saturé
Vert pomme P3
Vert ultra-saturé
Orange cinéma P3
Orange qualité cinéma
Rose néon P3
Rose ultra-saturé
Cyan jade P3
Cyan ultra-saturé
Violet P3
Violet ultra-saturé
/* sRGB fallback */
color: #ff4500;
/* P3 amélioré */
color: color(display-p3 1 0.3 0);
/* Détection media query */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
Patchs P3 plus vifs → Vrai support P3
P3 écrêté → Gamut sRGB uniquement
Test professionnel de couleur DCI-P3
Vérifiez précisément si votre écran prend véritablement en charge le gamut étendu P3 grâce à des échantillons de couleur exclusifs P3, une visualisation des limites sRGB et des tests de saturation par canal.
Échantillons exclusifs P3
Affiche des couleurs que seuls les moniteurs P3 peuvent restituer correctement : rouge ultra-saturé, vert Apple, orange cinéma. Sur les écrans sRGB, ces couleurs sont écrêtées aux valeurs sRGB les plus proches, perdant leur éclat.
Visualisation des limites sRGB
Les barres de dégradé passent de la frontière du gamut sRGB aux extrêmes du gamut P3. Sur les écrans P3, le dégradé continue au-delà de la frontière sRGB ; sur les écrans sRGB, le dégradé s'arrête à la frontière (les couleurs ne changent plus).
Vérification CSS couleur P3
Tous les échantillons sont rendus avec la syntaxe CSS color(display-p3 ...) — le support natif P3 du navigateur. Combiné avec les requêtes @media (color-gamut: p3), les développeurs front-end peuvent offrir des couleurs d'interface plus vibrantes aux utilisateurs disposant d'un gamut étendu.
Qu'est-ce que le DCI-P3 ?
Comprendre les origines et les applications du standard de gamut de couleur P3.
Standard de l'industrie cinématographique
Le DCI-P3 a été établi en 2005 par Digital Cinema Initiatives, à l'origine pour la projection cinéma numérique. Il couvre environ 45 % des couleurs visibles par l'homme, soit environ 25 % de plus que les 35 % du sRGB.
Préféré de l'écosystème Apple
Apple a pleinement adopté le P3 à partir de 2015 : iMac 5K, iPhone 7+, iPad Pro, MacBook Pro et Pro Display XDR prennent tous en charge le P3. La gestion des couleurs de macOS traite parfaitement le contenu P3, en faisant l'écosystème P3 le plus mature.
Standard de contenu HDR
Les formats HDR comme HDR10 et Dolby Vision utilisent le P3 comme conteneur de couleur. Netflix, Disney+ et Apple TV+ masterisent le contenu HDR dans le gamut P3. Les écrans sans P3 ne peuvent pas restituer entièrement les couleurs HDR.
Comment déterminer le support P3
Trois étapes pour vérifier la capacité de couleur P3 de votre écran.
Consulter les résultats de détection
La page détecte automatiquement la requête média color-gamut du navigateur au chargement. Si elle affiche « P3 supporté », la combinaison écran + système + navigateur peut restituer les couleurs P3.
Comparer les échantillons exclusifs
Observez la zone d'échantillons exclusifs P3. Si ces échantillons apparaissent nettement plus vifs que les contrôles sRGB adjacents (surtout les rouges et verts), votre écran affiche réellement les couleurs étendues P3 plutôt que de les écrêter au sRGB.
Vérifier l'extension du dégradé
Trouvez le marqueur de limite sRGB dans les barres de dégradé. Sur les écrans P3, le dégradé continue à devenir plus vif au-delà du marqueur ; sur les écrans sRGB, les couleurs cessent de changer après le marqueur — c'est la limite physique du gamut sRGB.
Terminologie clé des couleurs P3
color(display-p3)
Fonction de couleur CSS Level 4 permettant de spécifier des couleurs P3 directement dans les pages web. Syntaxe : color(display-p3 r g b) avec des valeurs RGB de 0 à 1. Safari a été le premier à la supporter ; Chrome 111+ et Firefox 113+ la supportent désormais aussi.
Requête média de gamut couleur
@media (color-gamut: p3) détecte si l'appareil de l'utilisateur supporte le P3. Utilisable en CSS ou via window.matchMedia en JavaScript pour implémenter une dégradation gracieuse ou une amélioration progressive pour les appareils de différents gamuts.
Écrêtage (Clipping)
Lorsque des couleurs P3 sont affichées sur un moniteur sRGB, les valeurs dépassant la plage sRGB sont écrêtées aux valeurs limites sRGB les plus proches. Cela cause une perte de saturation — un orange P3 vif devient un orange sRGB ordinaire.
Gamut étendu (Wide Gamut)
Désigne de manière générale les capacités de gamut dépassant le sRGB. Le DCI-P3 est le standard de gamut étendu le plus courant, suivi par l'Adobe RGB. Display P3 est la variante d'affichage d'Apple du DCI-P3, utilisant le point blanc D65.
Quels appareils supportent le P3
Support du gamut P3 sur les appareils courants.
Appareils Apple
Support P3 :
• iPad Pro (tous) : 100 % P3.
• MacBook Pro 2016+ : 100 % P3.
• Pro Display XDR / Studio Display : 100 % P3.
Moniteurs Windows
Support P3 :
• Moniteurs gaming (haut de gamme) : 90-95 % P3.
• Moniteurs de bureau standard : typiquement sRGB uniquement.
• Note : la gestion des couleurs Windows nécessite un support de profil ICC.
Appareils Android
Support P3 :
• Google Pixel 6+ : support du gamut P3.
• Appareils milieu de gamme : typiquement sRGB uniquement ou légèrement en dessous.
• La gestion des couleurs Android s'est améliorée à partir d'Android 10.
Support navigateur
Rendu des couleurs :
• Chrome 111+ : support de la fonction couleur CSS P3.
• Firefox 113+ : support de la fonction couleur CSS P3.
• Edge : suit Chromium, synchronisé avec le support Chrome.
Bonnes pratiques P3 pour le front-end
Couleurs CSS P3
Utilisez color(display-p3 1 0.2 0.1) pour des couleurs de marque ultra-saturées. Combinez avec @supports et des valeurs de repli pour la rétrocompatibilité.
Détection par requête média
@media (color-gamut: p3) { } fournit des couleurs améliorées pour les appareils P3. En JS : matchMedia("(color-gamut: p3)") pour la détection dynamique.
Ressources images
Servez des images profilées en Display P3 aux appareils P3. Utilisez <picture> + requêtes média pour charger des images de gamut différent selon la capacité de l'appareil.
Dégradation gracieuse
Fournissez toujours un repli sRGB avant les valeurs P3. CSS : color: #ff4500; color: color(display-p3 1 0.3 0); — la seconde ligne remplace la première.
Questions fréquentes
Q.Le navigateur indique « P3 supporté » mais mon écran est sRGB ?
macOS convertit les couleurs P3 pour l'affichage sRGB, donc le navigateur signale toujours le support P3 au niveau système. Mais l'écran ne peut physiquement pas afficher les couleurs étendues P3 — les valeurs excédentaires sont écrêtées. Les comparaisons d'échantillons de cette page aident à vérifier la capacité réelle de l'écran.
Q.Les couleurs P3 affectent-elles la vitesse de chargement ?
Non. color(display-p3) est une propriété CSS native ne nécessitant ni bibliothèques JS ni ressources supplémentaires. Le seul impact de performance peut provenir d'images avec des profils de couleur P3 intégrés, qui sont typiquement légèrement plus volumineuses que les versions sRGB.
Q.Les captures d'écran iPhone conservent-elles les couleurs P3 ?
Oui. Les captures d'écran et photos iPhone utilisent par défaut l'espace couleur Display P3. Lorsqu'elles sont envoyées à des appareils sRGB, les couleurs sont converties. Visualiser ces captures sur des appareils compatibles P3 montre des couleurs plus vibrantes.
Q.Pourquoi fournir les valeurs P3 et sRGB ?
La grande majorité des écrans dans le monde sont encore sRGB. Utiliser uniquement des valeurs P3 signifie que les navigateurs non compatibles les ignoreront ou afficheront des couleurs incorrectes. La cascade CSS vous permet d'écrire d'abord un repli sRGB, puis l'amélioration P3 — le navigateur choisit automatiquement la version supportée.
Q.Les « 95 % DCI-P3 » de mon écran sont-ils suffisants ?
Oui. Une couverture DCI-P3 de 95 %+ peut afficher la grande majorité des couleurs étendues P3. Les différences n'apparaissent que dans les régions de frontière rouge-vert extrêmement saturées. La couverture 100 % est davantage un argument marketing — en utilisation réelle, 95 % et 100 % sont quasi indiscernables.
Q.Quelle est la différence entre Display P3 et DCI-P3 ?
Display P3 est la variante Apple utilisant le point blanc D65 (identique au sRGB), adaptée aux écrans. Le DCI-P3 utilise un point blanc légèrement verdâtre comme standard de projection cinéma. Les deux ont des gammes de gamut quasi identiques — seul le point blanc diffère.
Conseils de développement couleur P3
- • Syntaxe CSS : color: color(display-p3 1 0.3 0); — notez que les valeurs RGB vont de 0 à 1, pas de 0 à 255.
- • Rétrocompatibilité : Écrivez toujours un repli sRGB sur la ligne précédant votre valeur P3. Le navigateur choisit automatiquement la règle supportée.
- • Outils de débogage : Le sélecteur de couleur des DevTools Chrome supporte déjà la prévisualisation et la conversion du gamut P3.
- • Conseil design : Utilisez l'amélioration P3 uniquement pour les couleurs de marque, les boutons CTA et les images clés — pas pour chaque couleur.