Display P3

Display P3 est un espace colorimétrique RGB à gamme étendue introduit par Apple en 2015. Il utilise les mêmes primaires rouge et bleu que DCI-P3 (la norme de projection cinéma de 2007) mais le point blanc et le gamma propres à Apple. Comparé à sRGB, P3 couvre ~25 % de volume de couleurs de plus — l’essentiel du supplément se trouve dans les rouges et verts saturés.

Apple équipe chaque Mac et iPhone depuis 2017 de panneaux de classe P3. D’autres fabricants ont suivi ; la plupart des téléphones Android haut de gamme, des moniteurs milieu et haut de gamme, et tous les téléviseurs OLED atteignent P3 ou au-delà.

Le module CSS Color Level 4 prend en charge P3 via la fonction color() : color(display-p3 1 0.4 0.2). La même couleur exprimée en sRGB serait écrêtée — l’orange saturé brillant n’existe pas en sRGB. Les navigateurs prenant en charge les deux effectueront un rendu P3 sur les écrans compatibles P3 et une transition gracieuse sur les autres.

Les convertisseurs de couleurs de Convertitive fonctionnent actuellement en sRGB uniquement. La prise en charge de P3 est sur la feuille de route.

La distinction DCI-P3, Display P3 et P3-D65 qui piège les designers : trois spécifications différentes portent « P3 » dans le nom. DCI-P3 est la norme cinéma SMPTE d’origine avec un point blanc décalé vers le vert (environ 6300 K) et un gamma de puissance pure 2,6 — utilisé par les projecteurs de cinéma. Display P3 est l’adaptation Apple avec le point blanc D65 de référence consommateur (6504 K) et la courbe gamma en morceaux de sRGB. P3-D65 est identique à Display P3 sous un autre nom. La fonction CSS color(display-p3 …) désigne Display P3 spécifiquement.

Détecter la prise en charge P3 dans le code, correctement : utilisez la requête média CSS @media (color-gamut: p3) pour conditionner les styles à gamme étendue, couplée à @supports (color: color(display-p3 0 0 0)) pour la propriété. Évitez l’erreur courante de déclarer uniquement des couleurs P3. La méthodologie couleur de Convertitive couvre le modèle de double déclaration. Voir aussi : sRGB, gamut. Référence : ICC — Caractérisation Display P3.

Exemple concret : un rouge de marque au-delà du sRGB

Une marque veut le rouge le plus saturé que ses clients iPhone peuvent afficher. En sRGB, le rouge maximum est rgb(255, 0, 0) avec des coordonnées de chromaticité CIE-1931 d’environ (0,640, 0,330). La primaire Display P3 équivalente se situe à (0,680, 0,320) — complètement en dehors du triangle sRGB. Déclaré comme color(display-p3 1 0 0), la couleur est environ 25 % plus saturée visuellement sur un panneau à gamme étendue. Sur un écran sRGB uniquement, la double déclaration CSS background: red; background: color(display-p3 1 0 0); revient gracieusement au sRGB.

Quand P3 importe et quand il n’importe pas

Pour l’identité de marque, les images marketing et les portfolios photographiques, P3 est une mise à niveau significative — les rouges saturés, les verts et les tons de peau gagnent en profondeur visible. Pour la plupart du travail UI (texte, neutres, accents atténués), la différence est imperceptible car les couleurs n’approchent jamais la limite de la gamme sRGB. La spécification CSS Color 4 du W3C est la source faisant autorité pour la syntaxe et les règles de rendu : CSS Color Module Level 4 — Display P3.