Le gamut de couleurs expliqué : sRGB, P3 et Rec. 2020

Les couleurs sur votre écran sont délimitées par une limite à laquelle la plupart des utilisateurs ne pensent jamais : le gamut de couleurs. Pendant la majeure partie de l'histoire du web, cette limite était la même pour pratiquement chaque appareil — sRGB, un standard établi en 1996. Aujourd'hui, les téléphones, ordinateurs portables et moniteurs modernes affichent couramment bien plus de couleurs que sRGB ne le permet, et CSS dispose des outils pour en tirer parti — si vous savez comment.

Ce guide explique ce qu'est un gamut de couleurs, présente sRGB, Display P3 et Rec. 2020 comme les trois gamuts les plus pertinents pour le travail web, et montre exactement comment utiliser les couleurs grand gamut CSS avec la requête de fonctionnalité @media (color-gamut).

Qu'est-ce qu'un gamut de couleurs ?

Un gamut de couleurs est l'ensemble complet des couleurs qu'un système de couleurs peut représenter ou reproduire. Toutes les couleurs visibles par l'oeil humain ne peuvent pas être exprimées dans tous les systèmes de couleurs — les contraintes physiques et techniques font que chaque système ne couvre qu'un sous-ensemble de ce que nous percevons.

Le diagramme de chromaticité CIE 1931

Les colorimétriciens représentent visuellement les gamuts à l'aide du diagramme de chromaticité CIE 1931 — une carte 2D en forme de fer à cheval de toutes les couleurs perceptibles par l'oeil humain moyen. La limite extérieure du fer à cheval représente les couleurs spectrales les plus pures et les plus saturées. Les régions intérieures représentent des couleurs moins saturées et plus mélangées. Le blanc se situe près du centre.

Tout gamut de couleurs spécifique apparaît sur ce diagramme comme un polygone — généralement un triangle défini par ses trois couleurs primaires (rouge, vert, bleu). L'aire de ce triangle détermine le nombre de couleurs visibles couvertes par le gamut :

• Un petit triangle = un gamut étroit (moins de couleurs)
• Un grand triangle = un gamut large (plus de couleurs)

Les trois primaires de tout gamut déterminent la position des sommets du triangle. Pousser les primaires vers le bord extérieur du fer à cheval (des primaires plus saturées) élargit le triangle et le gamut.

Pourquoi les gamuts comptent pour le design web

Il n'y a pas si longtemps, c'était une préoccupation académique. Presque tous les écrans utilisés étaient compatibles sRGB, et les couleurs web étaient universellement des couleurs sRGB. Mais depuis que Display P3 est devenu standard sur les appareils Apple (tous les iPhone depuis 2016, tous les MacBook récents, iMac, iPad Pro et Studio Display), et que les moniteurs HDR se sont répandus sur Windows et les consoles de jeu, le paysage d'affichage pratique s'est fragmenté.

Le contenu web livré en sRGB s'affiche toujours correctement sur les écrans P3 et Rec. 2020 — les couleurs sRGB sont un sous-ensemble de ces gamuts plus larges. Mais le contenu spécifié dans des espaces colorimétriques grand gamut peut tirer parti des primaires plus riches et plus saturées qu'offrent P3 et Rec. 2020.

sRGB : le standard web depuis 1996

Histoire et adoption

L'espace colorimétrique sRGB (standard Red Green Blue) a été développé conjointement par HP et Microsoft en 1996 et normalisé par l'IEC sous la référence IEC 61966-2-1. Son objectif était de fournir une référence commune pour les moniteurs grand public, les imprimantes et le web — permettant une reproduction des couleurs cohérente sans nécessiter d'étalonnage des appareils.

sRGB est devenu l'espace colorimétrique par défaut pour : - Les navigateurs web (toutes les couleurs CSS sont en sRGB sauf indication contraire) - Les appareils photo numériques (les fichiers JPEG sont en sRGB par défaut) - La plupart des moniteurs grand public des années 2000 et 2010 - Le sous-système d'affichage Windows - Le contenu SDR standard (plage dynamique standard)

Couverture sRGB

sRGB couvre environ 35 % du gamut de couleurs visibles tel que défini par le diagramme de chromaticité CIE 1931. Cela semble limité, mais cela couvre une plage pratique englobant une grande variété de couleurs naturelles et fabriquées rencontrées dans la vie quotidienne.

Les primaires sRGB sont : - Rouge : environ x=0,64, y=0,33 (un rouge légèrement orangé) - Vert : environ x=0,30, y=0,60 (un vert jaune) - Bleu : environ x=0,15, y=0,06 (un bleu-violet)

sRGB en CSS

Toutes les couleurs CSS que vous avez jamais écrites sont en sRGB, sauf indication explicite contraire. Cela inclut :

• Les codes hexadécimaux : #3B82F6
• Les couleurs nommées : blue, coral, rebeccapurple
• rgb() et rgba() : rgb(59, 130, 246)
• hsl() et hsla() : hsl(217, 91%, 60%)

Toutes ces valeurs se résolvent en valeurs sRGB. Une valeur #FF0000 signifie précisément le rouge primaire sRGB — le rouge le plus rouge que sRGB puisse représenter. Sur un écran P3, ce rouge est rendu fidèlement mais ne tire pas parti du primaire rouge encore plus saturé natif de P3.

Display P3 : le standard moderne d'Apple

Qu'est-ce que Display P3 ?

Display P3 est un espace colorimétrique développé par Apple pour ses écrans Retina, dérivé de l'espace colorimétrique DCI-P3 utilisé pour la projection cinématographique numérique. Il utilise le même point blanc que sRGB (D65, l'illuminant de la lumière du jour standard) et la même courbe gamma, mais définit des couleurs primaires différentes et plus saturées.

Display P3 couvre environ 45 % du gamut de couleurs visibles — environ 26 % de surface en plus que sRGB. La couverture étendue est la plus prononcée dans les régions rouge et verte, avec une expansion moins spectaculaire dans le bleu.

Quels appareils supportent Display P3 ?

Apple a largement adopté Display P3 à partir de 2015-2016 :

• iPhone 7 et versions ultérieures — tous les modèles iPhone suivants
• iPad Pro (9,7 pouces, 2016) et versions ultérieures — tous les modèles iPad Pro suivants
• MacBook Pro (fin 2016) et versions ultérieures avec écran Retina
• iMac (Retina 5K, fin 2015) et versions ultérieures
• Apple Pro Display XDR, Studio Display

Côté Windows et Android, de nombreux ordinateurs portables et téléphones haut de gamme sont également livrés avec des écrans compatibles P3, bien que l'adoption soit moins uniforme. En 2025, la majorité des appareils grand public haut de gamme supportent au minimum P3.

Spécifier des couleurs P3 en CSS

CSS Color Level 4 fournit la fonction color() avec l'espace colorimétrique display-p3, vous permettant de spécifier des couleurs qui utilisent directement les primaires P3 :

/* Rouge P3 — plus vif que le rouge sRGB */
color: color(display-p3 1 0 0);

/* Un vert P3 vif */
color: color(display-p3 0 1 0);

/* Un corail riche en P3 */
color: color(display-p3 0.95 0.42 0.37);

Les trois valeurs dans color(display-p3 R G B) sont normalisées de 0 à 1 (pas de 0 à 255). C'est différent de la fonction rgb().

Voir la différence

L'impact pratique de P3 est le plus visible dans les couleurs très saturées. Un rouge P3 vif (comparable à color(display-p3 1 0 0)) est nettement plus saturé que le rouge sRGB #FF0000 sur un écran compatible P3. Pour les couleurs de marque et les visuels d'accroche qui nécessitent un maximum de vivacité, P3 offre une amélioration significative.

Rec. 2020 : l'avenir HDR et cinéma

Qu'est-ce que Rec. 2020 ?

Rec. 2020 (formellement ITU-R BT.2020) est le standard de couleur pour la télévision ultra haute définition (UHDTV) et le contenu HDR. Il a été défini par l'Union internationale des télécommunications en 2012 et représente un gamut dramatiquement plus large que tout ce qui est couramment utilisé par les consommateurs aujourd'hui.

Rec. 2020 couvre environ 75 % du gamut de couleurs visibles — plus du double de la surface de sRGB et bien plus large que P3. Ses primaires sont définies aux limites spectrales de longueurs d'onde laser spécifiques, ce qui signifie qu'elles représentent théoriquement les couleurs les plus saturées possibles à ces longueurs d'onde.

Support d'affichage actuel

Voici la mise en garde critique : presque aucun écran grand public actuellement disponible ne couvre pleinement le gamut Rec. 2020. Les téléviseurs HDR haut de gamme peuvent couvrir 75 à 90 % de Rec. 2020 ; les projecteurs de cinéma professionnels et les moniteurs HDR de masterisation spécialisés sont nécessaires pour une couverture complète.

Cependant, Rec. 2020 est le gamut de référence pour les standards de contenu HDR incluant HDR10, Dolby Vision et HLG. Même si un écran ne peut pas le reproduire pleinement, le contenu masterisé en Rec. 2020 sera transcodé pour l'affichage sur des écrans à gamut plus réduit.

Rec. 2020 en CSS

/* Vert Rec. 2020 — extrêmement vif, au-delà des capacités de la plupart des écrans */
color: color(rec2020 0 1 0);

/* Un rouge profond en Rec. 2020 */
color: color(rec2020 0.8 0.1 0.1);

Pour le travail web aujourd'hui, les couleurs Rec. 2020 s'afficheront sous la forme de la couleur reproductible la plus proche sur le gamut supporté par l'écran. Cela le rend compatible avec l'avenir : les navigateurs avec la capacité Rec. 2020 affichent la couleur complète ; les autres affichent la meilleure approximation.

Couleurs CSS grand gamut avec @media (color-gamut)

CSS fournit une requête média spécifiquement pour détecter la capacité du gamut d'affichage et servir les couleurs appropriées :

@media (color-gamut: srgb) {
  /* Supporté par pratiquement tous les écrans couleur */
}

@media (color-gamut: p3) {
  /* L'écran supporte au moins le gamut P3 */
}

@media (color-gamut: rec2020) {
  /* L'écran supporte au moins le gamut Rec. 2020 */
}

Les valeurs sont progressives — p3 signifie que l'écran supporte au moins P3 (sRGB est donc également couvert), et rec2020 signifie que l'écran supporte au moins Rec. 2020 (couvrant P3 et sRGB aussi).

Motif d'amélioration progressive

L'approche recommandée est de définir d'abord votre couleur sRGB de base, puis de l'améliorer progressivement pour les écrans à gamut plus large :

.hero-button {
  /* Repli sRGB — fonctionne sur tous les écrans */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* Rouge plus vif sur les écrans P3 */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Encore plus vif sur les écrans Rec. 2020 */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

Sur un moniteur sRGB standard, le bouton affiche le rouge hexadécimal #E63946. Sur un iPhone, MacBook Pro ou un moniteur grand gamut moderne, il affiche la version P3 plus vive. Sur un écran compatible Rec. 2020, il affiche la version la plus vive.

Utiliser oklch() pour le grand gamut

L'espace colorimétrique OKLCH n'est pas spécifique à un gamut mais peut naturellement adresser des couleurs en dehors de sRGB — les valeurs qui tombent en dehors de la plage 0-1 en termes sRGB sont automatiquement grand gamut. Cela rend OKLCH pratique pour le travail avec des couleurs multi-gamuts :

.accent {
  /* OKLCH peut exprimer P3 et au-delà */
  color: oklch(60% 0.25 27deg);
}

Le navigateur mappe la couleur OKLCH spécifiée vers la couleur reproductible la plus proche dans le gamut supporté par l'écran. Si l'écran est compatible P3, il mappe vers la couleur P3 ; si c'est sRGB, il coupe vers l'équivalent sRGB le plus proche.

C'est une raison convaincante d'utiliser OKLCH pour les systèmes de design : vous pouvez spécifier une perception de couleur souhaitée, et le navigateur gère automatiquement le mappage de gamut. Utilisez le Convertisseur de couleurs de ColorFYI pour passer entre les valeurs hexadécimales sRGB et leurs équivalents OKLCH.

La référence color-gamut: srgb

Chaque écran couleur supporte au moins color-gamut: srgb — cela correspond à tout écran non monochrome. Vous n'aurez besoin de cette valeur de requête média que si vous voulez cibler les écrans couleur par opposition aux hypothétiques écrans monochromes, ce qui est rarement nécessaire.

En pratique, la requête utile est color-gamut: p3, qui couvre l'écosystème Apple et une part croissante des appareils Android et Windows.

Support des navigateurs

En 2025 : - @media (color-gamut) — supporté dans tous les principaux navigateurs (Chrome, Firefox, Safari, Edge) - color(display-p3) — supporté dans tous les principaux navigateurs - color(rec2020) — supporté dans Chrome et Safari ; le support Firefox a suivi - oklch() — supporté dans tous les principaux navigateurs

Aucun navigateur couramment utilisé aujourd'hui n'échouera à analyser ces fonctionnalités ; ils afficheront soit la couleur grand gamut, soit retourneront gracieusement à la déclaration sRGB précédente.

Conseils pratiques pour les projets de design web

Devriez-vous utiliser des couleurs P3 aujourd'hui ?

Oui, avec une approche d'amélioration progressive. Le risque à la baisse est nul — les replis sRGB garantissent que votre design s'affiche correctement sur tous les écrans. L'avantage est qu'une part significative et croissante de votre audience voit des couleurs plus vives et plus riches.

Les cas d'utilisation les plus impactants sont : - Les couleurs de marque et accents qui doivent être aussi vifs que possible - Les visuels d'accroche et les graphiques promotionnels où la vivacité stimule l'engagement - La visualisation de données où une plage de couleurs plus large permet des couleurs catégorielles plus distinctes

Quelles couleurs bénéficient le plus de P3 ?

Les gains de P3 par rapport à sRGB sont les plus importants dans : - Les rouges et oranges vifs : le primaire rouge P3 est nettement plus saturé - Les verts saturés : P3 s'étend significativement dans la région vert-jaune - Les roses et magentas vibrants : P3 capture mieux la palette mode/beauté vive

Les couleurs neutres, sombres et pastel montrent une différence visible minimale entre sRGB et P3, car elles sont proches du centre du gamut où les deux espaces colorimétriques se chevauchent substantiellement.

Flux de travail pratique

1. Concevez votre système de couleurs en hexadécimal (sRGB) comme d'habitude
2. Identifiez les 2 à 5 couleurs où la vivacité maximale compte (couleur de marque principale, accent d'accroche, états UI clés)
3. Utilisez le Convertisseur de couleurs de ColorFYI pour trouver l'équivalent OKLCH de chacune
4. En CSS, spécifiez la valeur OKLCH (ou l'équivalent color(display-p3)) et laissez le navigateur gérer le mappage de gamut
5. Testez sur un écran compatible P3 (tout MacBook ou iPhone moderne) pour vérifier l'amélioration visuelle

Comparaison des gamuts

Points clés à retenir

• Un gamut de couleurs est la plage totale de couleurs qu'un système peut représenter, visualisée comme un triangle sur le diagramme de chromaticité CIE. Des primaires plus larges = un triangle plus grand = plus de couleurs.
• sRGB est le standard web universel depuis 1996, couvrant environ 35 % des couleurs visibles. Toutes les valeurs CSS standard (rgb(), hsl(), hex) sont en sRGB.
• Display P3 couvre environ 45 % des couleurs visibles et est standard sur tous les appareils Apple depuis 2016 (iPhone, MacBook, iPad Pro, iMac) et de nombreux appareils Windows et Android modernes.
• Rec. 2020 couvre environ 75 % des couleurs visibles et est utilisé comme gamut de référence pour le contenu HDR, mais peu d'écrans grand public le reproduisent pleinement aujourd'hui.
• Utilisez @media (color-gamut: p3) pour améliorer progressivement les couleurs pour les écrans compatibles P3, avec sRGB comme repli de base.
• color(display-p3 R G B) spécifie des couleurs dans l'espace colorimétrique P3 en CSS ; les valeurs sont normalisées de 0 à 1.
• oklch() exprime naturellement des couleurs grand gamut et est de plus en plus privilégié pour les systèmes de design — le navigateur gère automatiquement le mappage de gamut vers les capacités de l'écran.
• Utilisez le Convertisseur de couleurs de ColorFYI pour passer entre hexadécimal, OKLCH et d'autres espaces colorimétriques lors de la construction de systèmes de couleurs grand gamut.