Espaces colorimétriques pour le web : sRGB, DCI-P3, Rec.2020, gamma et pourquoi le même hex paraît différent sur deux écrans
Qu'est-ce qu'un espace colorimétrique : primaires, gamut et blanc de référence
Un espace colorimétrique définit trois choses : un ensemble de couleurs primaires, un point blanc de référence et une fonction de transfert. Les couleurs primaires sont spécifiées sous forme de coordonnées de chromaticité précises sur le diagramme de chromaticité CIE 1931 xy, une carte bidimensionnelle de toutes les couleurs visibles par un observateur humain standard. Les trois primaires forment un triangle sur ce diagramme. Toutes les couleurs à l'intérieur du triangle peuvent être reproduites en mélangeant ces primaires dans des proportions variables ; les couleurs extérieures ne le peuvent pas. Ce triangle est le gamut colorimétrique de l'espace.
Le blanc de référence est la couleur qui apparaît quand les trois primaires sont poussés à pleine intensité. Pour la plupart des standards grand public et web, c'est D65, un illuminant standard qui modélise la lumière du jour moyenne à environ 6500 K de température de couleur. Deux écrans avec des primaires de gamut identiques mais des points blancs différents rendront le gris neutre différemment. Quand un navigateur interprète la valeur CSS #808080, il suppose sRGB avec un point blanc D65, et suppose que votre écran correspond à cette hypothèse.
sRGB : la référence universelle du web, standardisée en 1996
sRGB a été défini en 1996 par la Commission Électrotechnique Internationale sous la norme IEC 61966-2-1. Il a été conçu pour correspondre aux caractéristiques d'un moniteur CRT grand public typique du milieu des années 1990. Son primaire rouge se situe aux coordonnées CIE xy approximativement en (0.64, 0.33), le vert en (0.30, 0.60) et le bleu en (0.15, 0.06). Le triangle de gamut résultant couvre environ 35% des couleurs visibles par un observateur humain standard selon le diagramme de chromaticité CIE 1931.
Chaque couleur hexadécimale CSS, chaque PNG ou JPEG sans profil ICC intégré et chaque pixel de canvas HTML est implicitement en sRGB. Les navigateurs supposent sRGB sauf indication contraire. La limite pratique apparaît aux bords du gamut : les rouges très saturés, les verts vifs et les cyans purs ne peuvent pas être pleinement représentés. Une tomate mûre photographiée en extérieur a souvent un rouge qui tombe hors du gamut sRGB ; le fichier image écrête ce rouge à la valeur sRGB la plus proche, faisant apparaître la couleur légèrement moins vive à l'écran qu'en personne.
DCI-P3 : un standard cinéma adopté par les écrans grand public
DCI-P3 est né avec le consortium Digital Cinema Initiatives. Ses primaires sont décalés par rapport à sRGB : le primaire rouge se déplace légèrement vers l'orange (xy environ 0.680, 0.320) et le vert s'étend davantage vers le vert pur (0.265, 0.690). Le gamut résultant couvre environ 45.5% du diagramme de chromaticité CIE 1931, soit environ 26% de surface de plus que sRGB. Ce gamut plus large a été conçu pour que les projecteurs de cinéma numérique puissent reproduire des couleurs saturées comparables au film analogique.
Les écrans grand public ont commencé à intégrer des primaires P3 vers 2015, quand Apple a introduit des panneaux compatibles P3 dans l'iMac 27 pouces, suivi par l'iPhone 7 en 2016. Un pixel rendu en #FF0000 sur un écran P3 utilisant l'espace colorimétrique P3 apparaît nettement plus saturé que la même valeur sur un écran sRGB. CSS expose P3 via la fonction color() : color(display-p3 1 0 0) spécifie le rouge P3 le plus saturé. Tous les navigateurs majeurs depuis 2023 comprennent cette syntaxe et affichent le gamut élargi sur le matériel compatible P3.
Rec.2020 : le standard broadcast du futur et l'écart actuel des écrans
Rec.2020 (formellement ITU-R BT.2020) a été défini par l'Union Internationale des Télécommunications en 2012 comme standard pour la télévision ultra haute définition. Ses primaires approchent la lumière monochromatique : le rouge est défini près de 630 nm, le vert près de 532 nm et le bleu près de 467 nm. Le gamut résultant couvre environ 75.8% du diagramme de chromaticité CIE 1931, soit environ deux fois la surface de sRGB.
L'écart entre le standard et la pratique est significatif : aucun écran grand public disponible en 2025 ne peut reproduire le gamut complet de Rec.2020. Les moniteurs de référence professionnels haut de gamme peuvent atteindre environ 75–80% du volume Rec.2020 mesuré dans le modèle d'apparence colorimétrique tridimensionnel CIECAM02. Le contenu vidéo HDR est souvent masterisé avec des primaires Rec.2020 combinés à une fonction de transfert PQ ou HLG, mais les plateformes de streaming livrent généralement le signal final mappé vers Display P3 ou sRGB avec la luminosité maximale gérée par le tone mapping.
Gamma et fonction de transfert : pourquoi l'encodage sRGB n'est pas une pure loi de puissance
L'expression 'gamma 2.2' est couramment utilisée pour décrire sRGB, mais sRGB utilise une fonction de transfert par morceaux plutôt qu'une pure loi de puissance. La norme IEC 61966-2-1 définit deux segments : pour les valeurs de luminance très basses (C linéaire ne dépassant pas 0.0031308) l'encodage est linéaire, C multiplié par 12.92 ; au-delà de ce seuil, il suit une courbe de puissance approximativement égale à 1.055 fois C élevé à la puissance de 1/2.4, moins 0.055. Le résultat se rapproche étroitement de gamma 2.2 sur la majeure partie de la plage utilisable.
Cet encodage est important dans le traitement d'image. Réduire une image en moyennant des pixels adjacents dans le domaine gamma encodé produit un résultat légèrement plus sombre qu'en moyennant en lumière linéaire, un artefact bien documenté parfois appelé le problème de moyennage sombre du gamma. Le redimensionnement correct linéarise d'abord les valeurs, les moyenne, puis les ré-encode. Les dégradés CSS et color-mix() mélangent dans l'espace sRGB par défaut, interpolant à travers des valeurs compressées par gamma plutôt qu'en lumière linéaire.
Pourquoi la même couleur hexadécimale s'affiche différemment sur deux écrans
Plusieurs facteurs indépendants expliquent pourquoi #FF6600 sur un écran se voit différemment que sur un autre. Premièrement, si un écran dispose d'un gamut physique plus large (matériel P3) mais ne bénéficie pas de la gestion des couleurs du système d'exploitation, il peut naïvement étendre les valeurs du signal sRGB vers son gamut de primaires plus large, rendant toutes les couleurs trop saturées. Deuxièmement, un écran non calibré peut avoir un point blanc réel, une courbe gamma ou une température de couleur différents de ceux que le standard sRGB suppose. Troisièmement, le support de gestion des couleurs dans les navigateurs a historiquement varié.
Le profil colorimétrique ICC intégré dans une image, ou le profil d'écran appliqué par le logiciel de calibration, décrit le mappage depuis l'espace colorimétrique encodé de ce contenu vers la réponse mesurée réelle de l'écran. Le pipeline de gestion des couleurs du système d'exploitation — ColorSync sur macOS, Windows Color System sur Windows — effectue cette conversion pour chaque écran connecté. Les développeurs web ciblant des écrans à large gamut peuvent utiliser @media (color-gamut: p3) pour fournir des valeurs color(display-p3 ...) pour les couleurs d'interface vives, tout en conservant l'hex simple comme repli sRGB. Les outils de palette de couleurs et de simulation de daltonisme de TeaFun fonctionnent en sRGB.