Mappage de gamut : convertir entre les espaces colorimétriques

Lorsque vous photographiez un coucher de soleil éclatant avec un appareil photo professionnel et que vous l'ouvrez dans un navigateur web, quelque chose se perd. Les oranges et violets profonds et saturés que le capteur à gamut élargi de l'appareil a enregistrés ne peuvent pas être reproduits exactement sur chaque affichage — et même lorsque c'est possible, les couleurs pourraient ne pas survivre à la conversion vers un format adapté au web. Ce processus d'adaptation des couleurs qui existent dans un espace colorimétrique pour s'adapter aux limites d'un autre s'appelle le mappage de gamut. C'est l'une des opérations les moins visibles mais les plus importantes de l'ensemble du pipeline de couleurs numériques, et la comprendre est essentielle pour quiconque se soucie de la précision des couleurs de la conception à la production.

Qu'est-ce que le mappage de gamut ?

Un gamut de couleurs est la gamme complète de couleurs qu'un appareil, un format ou un espace colorimétrique particulier peut représenter. Chaque gamut a des limites — les couleurs qui s'y trouvent peuvent être représentées avec précision ; celles qui en sont en dehors ne le peuvent pas.

Différents appareils et espaces colorimétriques ont des gamuts différents :

Lorsque vous déplacez une couleur d'un gamut plus grand vers un plus petit, certaines couleurs peuvent se retrouver en dehors du gamut cible. On les appelle des couleurs hors gamut. Le mappage de gamut est le processus qui consiste à décider quoi faire avec elles.

L'inverse — passer d'un gamut plus petit à un plus grand — est généralement sans perte, car toutes les couleurs sources s'inscrivent dans la destination. Un fichier sRGB affiché sur un moniteur Display P3 utilise simplement un sous-ensemble de la plage de ce moniteur. Aucun mappage de gamut n'est nécessaire.

Le problème des couleurs hors gamut

Considérez un cyan vif : #00FFFF (#00FFFF) en sRGB. Cette couleur se situe près de la limite du gamut sRGB. En Display P3, il existe des cyans plus saturés — des couleurs que sRGB ne peut pas du tout représenter.

Imaginez maintenant que vous conceviez une interface en Display P3, en utilisant un vert vif qui dépasse sRGB : approximativement color(display-p3 0.0 0.9 0.3) — un vert significativement plus saturé que #00E84A (#00E84A) en sRGB. Lorsqu'un utilisateur le voit sur un moniteur sRGB standard, le navigateur doit prendre une décision : quelle couleur sRGB doit représenter ce vert impossible à reproduire ?

Cette décision est le mappage de gamut, et il existe plusieurs approches avec des compromis différents.

Découpage versus compression perceptuelle

Les deux principales stratégies pour gérer les couleurs hors gamut sont le découpage (clipping) et le mappage perceptuel (compression).

Découpage

Le découpage est l'approche la plus simple : les couleurs en dehors du gamut sont ramenées au point le plus proche sur la limite du gamut. C'est analogue à prendre une valeur de 1,5 dans une échelle 0-1 et à la régler simplement à 1.

Pour une couleur avec une valeur de saturation hors gamut, le découpage définit cette saturation à la valeur maximale autorisée par le gamut cible, tout en laissant la luminosité et la teinte inchangées. Le résultat :

• Couleurs proches de la limite : changement visible minimal
• Couleurs bien au-delà du gamut : perte significative de précision de la teinte, couleurs qui peuvent sembler très différentes de l'original

Le plus grand problème avec le découpage est le glissement de teinte. De nombreuses couleurs hors gamut se découpent d'une manière qui décale leur teinte de façon perceptible. Un vert vif peut se découper vers un jaune-vert ; un violet profond peut se découper vers un bleu. La teinte originale n'est pas préservée.

Le découpage crée également du banding : une plage de couleurs sources différentes se découpe toutes vers le même point de saturation maximale à la limite, produisant des marches visibles dans les dégradés ou les transitions de couleur lisses qui devraient sembler continues.

Malgré ces inconvénients, le découpage est courant pour les images statiques et CSS car il est trivialement simple à calculer.

Intention de rendu perceptuel (compression)

Le rendu perceptuel — parfois appelé mappage de compression — adopte une approche différente. Au lieu de n'ajuster que les couleurs hors gamut, il met à l'échelle l'ensemble du gamut proportionnellement. Les couleurs les plus saturées de la source sont mappées vers les couleurs les plus saturées disponibles dans la destination, et tout le reste s'adapte en conséquence.

Imaginez que vous ajustez un grand tableau (gamut Display P3) sur une toile plus petite (gamut sRGB) en réduisant l'ensemble du tableau proportionnellement plutôt qu'en le recadrant. Aucune couleur n'est coupée ; au lieu de cela, toutes les relations entre les couleurs sont préservées — simplement comprimées.

Avantages de la compression perceptuelle : - Les dégradés lisses restent lisses (pas de banding) - Les relations relatives entre les couleurs sont préservées - Généralement plus agréable visuellement pour la photographie et les dégradés

Inconvénients : - Les couleurs dans le gamut sont également décalées (légèrement réduites en saturation), même si elles n'en avaient pas besoin - Les couleurs peuvent sembler légèrement moins vives que l'original, même là où elles auraient pu être reproduites avec précision

L'intention de rendu perceptuel est la valeur par défaut utilisée par les profils ICC dans les flux de travail d'impression et de photographie professionnelle. C'est également l'approche utilisée par l'algorithme de mappage de gamut CSS.

Colorimétrique relatif (avec compensation du point noir)

Une troisième approche — colorimétrique relatif — mappe exactement les couleurs dans le gamut et découpe les couleurs hors gamut, tout en ajustant la différence de point blanc entre la source et la destination. C'est un bon compromis pour les documents avec peu de couleurs hors gamut, car il préserve mieux la précision des couleurs dans le gamut que le perceptuel.

Intention de rendu de saturation

Une quatrième intention utilisée principalement en graphiques d'entreprise : maximiser la saturation au détriment de la précision de la teinte. Utilisée pour les graphiques à barres et à secteurs où des couleurs vives et distinctes importent plus qu'une reproduction de teinte précise.

Mappage de gamut CSS

CSS prend en charge plusieurs espaces colorimétriques depuis la spécification CSS Color Level 4, et le mappage de gamut est maintenant intégré dans l'algorithme de résolution des couleurs CSS.

Spécifier des couleurs à gamut élargi en CSS

/* sRGB (traditionnel) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (gamut élargi) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-large) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (perceptuellement uniforme, peut adresser des couleurs à gamut élargi) */
color: oklch(0.75 0.25 150);  /* Vert très vif — peut être hors sRGB */

Comment CSS gère le débordement de gamut

Lorsqu'une valeur de couleur CSS adresse une couleur qui est en dehors du gamut de l'affichage, le navigateur applique l'algorithme de mappage de gamut CSS défini dans CSS Color Level 4. L'algorithme utilise une recherche binaire dans l'espace colorimétrique OKLCH pour trouver la couleur dans le gamut la plus similaire en utilisant deltaE 2000 (une métrique de différence de couleur perceptuelle) comme mesure de distance.

Le résultat est une approche de mappage de gamut qui priorise : 1. Préserver la luminosité en premier (les décalages de luminosité sont les plus perceptibles) 2. Préserver la teinte en second 3. Réduire la chroma (saturation) jusqu'à ce que la couleur s'inscrive dans le gamut cible

C'est une amélioration significative par rapport au simple découpage sRGB. L'algorithme CSS produit des résultats plus proches de la compression perceptuelle pour les couleurs légèrement hors gamut, tout en se dégradant gracieusement pour les couleurs bien au-delà.

La requête média color-gamut

CSS fournit une requête média pour détecter quel gamut l'affichage prend en charge, vous permettant de servir différentes couleurs selon les capacités :

/* Par défaut : couleurs sRGB pour tous les affichages */
.brand-color {
  color: #22C55E;
}

/* Amélioré : couleurs P3 plus vives pour les affichages capables */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-large : vibrancy maximale pour les affichages Rec. 2020 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

Les trois valeurs pour color-gamut : - srgb — l'affichage couvre approximativement le gamut sRGB (le plus courant) - p3 — l'affichage couvre approximativement le gamut Display P3 (Mac, iPhone, Android haut de gamme modernes) - rec2020 — l'affichage couvre approximativement le gamut Rec. 2020 (affichages professionnels et HDR)

OKLCH et le gamut élargi

OKLCH est particulièrement bien adapté au travail de design à gamut élargi car les valeurs de chroma élevées adressent naturellement des couleurs en dehors de sRGB. Une valeur de chroma supérieure à environ 0,37 en OKLCH sera hors du gamut sRGB pour la plupart des teintes, atterrissant en Display P3 ou au-delà.

/* Dans sRGB : vert vif */
color: oklch(0.75 0.22 145);

/* Hors sRGB, en Display P3 : vert encore plus vif */
color: oklch(0.75 0.35 145);

/* Bien hors sRGB : le navigateur appliquera le mappage de gamut */
color: oklch(0.75 0.5 145);

Lorsqu'une couleur OKLCH est hors gamut, CSS applique automatiquement son algorithme de mappage de gamut. Vous n'avez pas besoin de gérer cela manuellement — le navigateur le résout.

Utilisez le Convertisseur de couleurs pour convertir des couleurs entre espaces colorimétriques et voir comment les valeurs changent lors du passage entre sRGB, Display P3 et les représentations OKLCH.

Solutions pratiques pour les designers

Comprendre le mappage de gamut change la façon dont vous abordez le travail chromatique pour les écrans :

1. Concevez dans le gamut cible

Si votre produit cible principalement des utilisateurs web sur un mélange d'appareils, concevez en sRGB. Si vous savez que votre audience est principalement sur du matériel Apple moderne (Mac, iPhone), envisagez de concevoir en Display P3 et de fournir des alternatives sRGB.

2. Connaissez le statut de gamut de vos couleurs vives

De nombreuses couleurs vives qui « fonctionnent » dans des outils comme Figma (qui utilise Display P3 sur le matériel Apple) peuvent sembler différentes lorsqu'elles sont exportées en sRGB pour le web. Vérifiez toujours les couleurs finales avec une valeur CSS que vous avez explicitement définie, pas seulement ce que Figma rend sur votre écran.

Certains verts, cyans et magentas extrêmement vifs en Display P3 n'ont pas d'équivalent sRGB. Si votre couleur de marque est color(display-p3 0.0 0.9 0.3) — un vert plus vif qu'aucun vert sRGB — vous devez décider quelle alternative sRGB utiliser, ou accepter que les utilisateurs sRGB voient une version moins vive.

3. Testez les transitions de dégradé entre les gamuts

Les dégradés entre deux couleurs à gamut élargi peuvent produire du banding lorsqu'ils sont affichés sur des moniteurs sRGB, car les couleurs intermédiaires qui semblaient distinctes en P3 se mappent toutes vers des valeurs sRGB similaires (découpage de couleurs au milieu du dégradé). Si vous voyez du banding dans un dégradé, essayez :

• Réduire la chroma des deux extrémités à des niveaux sRGB-safe
• Ajouter des arrêts de dégradé intermédiaires pour étaler la transition
• Acheminer le dégradé via OKLCH pour un espacement perceptuellement uniforme

4. Utilisez le bon format d'exportation

Pour les images contenant des couleurs à gamut élargi : - JPEG : Incorporez le profil colorimétrique (Display P3 ou Adobe RGB) — les navigateurs l'utiliseront pour la gestion des couleurs - PNG : Idem — incorporez le profil - WebP : Prend en charge les profils ICC ; incorporez-les pour une couleur précise - SVG : Les couleurs sont spécifiées en CSS — utilisez la fonction color() pour le gamut élargi

Les images sans profils incorporés sont supposées être en sRGB et seront affichées sans conversion de gamut. Une image à gamut élargi sans profil incorporé semblera plus délavée que prévu sur les affichages P3.

5. L'approche de gamut élargi sécurisée

Pour les designers qui veulent des couleurs plus riches sans la complexité de gérer plusieurs cibles de gamut, OKLCH avec une chroma modérée (0,18-0,25) reste principalement dans sRGB tout en fournissant des résultats légèrement plus vifs que les couleurs RVB typiques dans cette plage. Le mappage de gamut CSS gère automatiquement les cas limites.

/* Bleus vifs mais principalement sRGB-safe */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

Points clés

• Un gamut de couleurs est la plage de couleurs qu'un appareil ou un espace colorimétrique peut représenter. sRGB est le standard web ; Display P3 est ~26 % plus grand et disponible sur les appareils Apple modernes et les appareils haut de gamme.
• Les couleurs hors gamut sont des couleurs qui sortent d'un gamut cible et ne peuvent pas être reproduites avec précision sur cet appareil — quelque chose doit se passer pour les ramener dans les limites.
• Le découpage ramène les couleurs hors gamut à la limite du gamut — rapide mais peut causer des glissements de teinte et du banding. La compression perceptuelle met à l'échelle l'ensemble du gamut proportionnellement — plus lente mais préserve les relations de couleur et les dégradés.
• CSS Color Level 4 définit un algorithme de mappage de gamut qui utilise OKLCH et deltaE 2000 pour réduire intelligemment la chroma tout en préservant la luminosité et la teinte — bien supérieur au simple découpage sRGB.
• La requête média color-gamut vous permet de servir des couleurs color(display-p3) plus vives aux affichages capables tout en maintenant des alternatives sRGB pour les autres.
• Pièges du design à gamut élargi : Figma sur le matériel Apple rend Display P3 par défaut — les couleurs qui semblent vives dans Figma peuvent paraître moins saturées lorsqu'elles sont exportées en sRGB pour le web. Vérifiez toujours avec des valeurs CSS explicites.
• Utilisez le Convertisseur de couleurs pour inspecter comment une couleur se traduit entre sRGB, Display P3 et OKLCH afin de comprendre son statut de gamut et trouver l'équivalent dans le gamut le plus proche.