sRGB vs Display-P3 : ce que les designers doivent savoir

Un mystère de handoff bien connu : un designer choisit un rouge vif dans un outil de design sur un MacBook récent, le développeur implémente fidèlement la valeur hex, et sur ce même ordinateur portable le bouton livré paraît légèrement plus terne que la maquette posée juste à côté. Personne ne s’est trompé de frappe. L’outil de design affichait un rouge Display-P3 ; le code hex ne pouvait transporter que du sRGB.

L’explication tient au gamut — l’ensemble des couleurs qu’un écran ou un espace colorimétrique peut reproduire. sRGB est la référence du web depuis des décennies ; Display-P3 est un gamut plus large, environ 25 % plus grand, dont les couleurs supplémentaires se concentrent dans les tons moyens saturés — rouges, verts, oranges et bleus sarcelle éclatants. Les valeurs hex ne peuvent pas les exprimer ; la syntaxe CSS plus récente le peut. Cet article explique où la différence se voit réellement, ce que cela signifie pour le CSS, et quand ça vaut l’effort — cela fait partie de notre guide OKLCH, car le gamut étendu est la moitié de la raison pour laquelle les modèles de couleur modernes comptent.

Où vivent réellement les couleurs supplémentaires du P3 ?

Pas de façon uniforme. Près du blanc, près du noir et près du gris, les deux gamuts sont pratiquement identiques — un pastel clair ou un bleu marine foncé ne gagne rien avec le P3. L’écart s’ouvre dans le milieu coloré : le rouge, le vert ou le bleu sarcelle le plus saturé que le P3 puisse afficher se situe visiblement au-delà du plafond du sRGB. En termes OKLCH, l’axe de luminosité ne bouge pas ; ce que le P3 relève, c’est le plafond de chroma, et il le relève le plus dans les tons moyens, là où le plafond était déjà le plus haut.

Cette géographie explique à la fois la promesse et la déception du gamut étendu : les accents de marque, l’illustration et l’imagerie peuvent réellement ressortir davantage — tandis que le corps de texte, les bordures, les arrière-plans et tout le reste qui constitue l’essentiel d’une interface a exactement la même apparence.

Les utilisateurs ont-ils vraiment des écrans P3 ?

Majoritairement oui, désormais. Les iPhone embarquent des écrans P3 depuis 2016, les Mac presque aussi longtemps, et les appareils Android haut de gamme ainsi que les meilleurs moniteurs externes ont suivi ; une grande part du trafic actuel — surtout mobile — voit votre travail à travers une dalle compatible P3. La question de la capacité s’est discrètement inversée : le cas courant, c’est un écran qui peut afficher plus que le sRGB, mais à qui l’on envoie du sRGB.

Le public qui ne peut pas voir le P3 compte toujours, et c’est pourquoi la posture pratique est celle de l’amélioration progressive : concevez pour que le rendu sRGB tienne debout tout seul, et laissez les écrans P3 obtenir l’éclat supplémentaire par-dessus.

Pourquoi le hex ne peut-il pas transporter ces couleurs ?

Une valeur hex, ce sont trois nombres de 8 bits définis par rapport au sRGB — #ff0000 signifie « le rouge maximal du sRGB », pas « le rouge le plus rouge ». Il n’existe aucun point de code au-delà du bord du gamut. Atteindre le P3 exige une syntaxe qui nomme explicitement un espace colorimétrique :

.accent {
  color: #e0263f;                             /* repli sRGB              */
  color: color(display-p3 0.9 0.12 0.22);     /* rouge plus large si affiché */
}

color(display-p3 …) adresse directement le gamut P3, et les espaces capables de gamut étendu comme OKLCH peuvent exprimer ces couleurs tout naturellement — les trois mêmes valeurs L/C/H s’étendent simplement vers un chroma plus élevé. L’article de WebKit sur la couleur en gamut étendu détaille les mécanismes CSS en profondeur. Pour la mise en style, le motif de cascade ci-dessus suffit généralement : sRGB d’abord, P3 ensuite, chaque écran prend le meilleur qu’il puisse rendre.

À quoi ressemble la différence sur une vraie rampe ?

Ouvrez une rampe de rouge saturé générée contre le plafond sRGB — remarquez comme les étapes de tons moyens se situent juste au bord du gamut, là où le générateur plafonne le chroma juste en dessous de la limite pour garder une progression fluide.

Une rampe de couleur rouge saturé générée dans le gamut sRGB, ses étapes de tons moyens proches du plafond du gamut

Gardez cette image en tête pour la comparaison à la fin de l’article : même couleur de départ, même courbe de luminosité — seul le plafond bouge.

Quand le P3 vaut-il l’effort ?

Ça vaut le coup :

Accents de marque et CTA — le seul endroit où une UI dépense vraiment du chroma ; la version P3 d’une couleur de marque vive est celle que l’outil de design affichait.
Illustration et imagerie — les photos et les œuvres taguées avec des profils à gamut étendu ont visiblement plus de mordant.
Visualisation de données — une marge de chroma supplémentaire signifie des couleurs de séries saturées plus faciles à distinguer.

Ça ne vaut pas le coup :

Texte et habillage d’interface — les exigences de contraste contraignent bien avant le gamut, et la version sRGB doit de toute façon passer par elle-même.
Neutres et arrière-plans — les gamuts n’y diffèrent presque pas.
Tout ce que vous ne pouvez pas vérifier — si l’équipe relit sur des moniteurs sRGB, la couche P3 est livrée sans être vue ; ajoutez-la là où quelqu’un la contrôlera vraiment.

Voyez le plafond se lever

La façon la plus limpide de comprendre les deux gamuts, c’est d’en regarder un devenir l’autre : basculez la même rampe de rouge en P3. Les étapes de tons moyens gagnent du chroma — les chiffres le disent et les échantillons le montrent — tandis que la luminosité et la teinte restent parfaitement immobiles, et les extrémités proches du blanc et du noir bougent à peine. Voilà, en une seule interaction, toute l’histoire du sRGB face au P3 : pas des couleurs différentes, les mêmes couleurs avec un plafond plus haut exactement là où vit la couleur.