Les espaces colorimétriques expliqués aux designers

« Espace colorimétrique » recouvre deux types de choses différents, et la plupart de la confusion autour du terme vient de ce qu’on les mélange. Les gamuts — sRGB, Display-P3, Rec.2020 — sont des ensembles de couleurs produisibles : ce qu’un écran donné peut physiquement afficher. Les systèmes de coordonnées — HSL, LAB, OKLCH — sont des façons d’adresser les couleurs avec des nombres, indépendamment de tout écran. Au sens large, un espace colorimétrique est tout système organisé de représentation de la couleur ; la compétence pratique consiste à reconnaître auquel des deux types un nom donné se réfère.

Cet article est la carte d’orientation : les deux types, comment ils se combinent, et quelle association convient à quel travail. Il fait partie de notre guide OKLCH, qui couvre en profondeur le versant système de coordonnées.

Qu’est-ce qu’un gamut ?

Un gamut est l’ensemble des couleurs qu’un appareil ou une norme peut reproduire. Les trois noms que vous rencontrerez le plus forment des anneaux imbriqués :

• sRGB — la référence de base, normalisée au milieu des années 1990 et toujours l’hypothèse sûre pour le web : pratiquement tous les écrans en usage peuvent l’afficher en totalité.
• Display-P3 — environ 25 % plus large, avec les couleurs supplémentaires concentrées dans les demi-teintes saturées : rouges, verts et bleu-vert éclatants. Standard sur les iPhone depuis 2016 et sur les Mac presque aussi longtemps ; la plupart des téléphones actuels et de nombreux ordinateurs portables sont livrés avec des dalles compatibles P3.
• Rec.2020 — la spécification de diffusion pour la vidéo ultra-haute définition, plus large encore. C’est davantage une cible qu’une réalité actuelle : les écrans grand public d’aujourd’hui n’en couvrent qu’une partie.

Chaque anneau contient le précédent, donc une couleur sûre en sRGB est sûre partout, tandis que les couleurs P3 les plus éclatantes n’ont aucun équivalent sRGB. Un gamut répond à exactement une question — ce matériel peut-il produire cette couleur ? — et ne dit rien sur la façon dont vous devriez nommer, comparer ou manipuler les couleurs. C’est le travail de l’autre type.

Qu’est-ce qu’un modèle colorimétrique ?

Un modèle colorimétrique — un système de coordonnées — est un schéma pour adresser les couleurs avec des nombres :

• HSL réarrange les valeurs RGB en un cylindre teinte/saturation/luminosité. Pratique à lire, mais sa « luminosité » est une fraction géométrique du RGB, non un énoncé sur la perception.
• LAB (CIELAB) a été conçu pour la mesure perceptuelle et reste l’ossature des flux de travail d’impression et de gestion des couleurs.
• OKLCH (la forme cylindrique d’OKLab) est le modèle perceptuel moderne : les couleurs ayant le même L paraissent réellement aussi claires les unes que les autres, ce qui explique pourquoi les fonctionnalités et outils de couleur CSS plus récents s’y sont standardisés.

La propriété cruciale est ce qu’un modèle n’est pas : il n’est pas lié à un gamut. Un système de coordonnées peut adresser toutes les couleurs visibles, et même davantage ; un gamut est une région à l’intérieur de cet espace. Vous pouvez décrire une couleur sRGB en OKLCH, et une couleur exclusivement P3 en OKLCH, avec les trois mêmes nombres signifiant les mêmes choses. (HSL est l’exception qui confirme la règle — il est défini sur les valeurs sRGB, ce qui est l’une des raisons pour lesquelles il ne peut pas atteindre les couleurs à large gamut.)

Devrais-je utiliser P3 ou OKLCH ?

La question compare des choses de catégories différentes — comme demander si l’on voyage en passeport ou en avion. P3 est un gamut ; OKLCH est un système de coordonnées. Vous ne choisissez pas entre les deux : vous choisissez un de chaque, et toute combinaison est cohérente.

Une analogie utile — et ce n’est qu’une analogie — est celle de la langue parlée. Le système de coordonnées est la langue dans laquelle vous décrivez les couleurs ; le gamut est le vocabulaire qu’un écran particulier sait prononcer. Un écran sRGB et un écran P3 parlent le même OKLCH, l’un dispose simplement de plus de mots. « P3 ou OKLCH ? » se dissout en deux questions indépendantes aux réponses claires : dans quelle langue devrais-je penser ? (une langue perceptuelle, car les jugements de design — « même couleur, plus claire », « aussi éclatante d’une teinte à l’autre » — sont des jugements perceptuels, et vous voulez des mots qui leur correspondent) et quel vocabulaire devrais-je viser ? (le sRGB comme socle que tout le monde peut restituer, le P3 comme amélioration là où les écrans le permettent).

À quoi ressemble la même couleur dans différentes notations ?

Prenez le bleu #2563eb. Chaque ligne de ce tableau nomme le même point dans l’espace colorimétrique :

Quatre notations, une seule couleur. Poussez maintenant le chroma de 0,215 à 0,26, en maintenant la luminosité et la teinte. À cette luminosité et cette teinte, le plafond sRGB est de ≈0,251, donc la nouvelle couleur a quitté le sRGB — mais le plafond du P3 ici est de ≈0,269, elle reste donc produisible sur un écran P3. Observez les notations diverger :

• OKLCH le nomme toujours exactement : oklch(0.546 0.26 262.9). La langue se moque que certains écrans ne sachent pas le prononcer.
• La notation P3 peut toujours le produire : ≈ color(display-p3 0.154 0.345 0.981).
• Le Hex n’a aucun code pour cela. La valeur sRGB la plus proche, ≈ #0b59ff, est une couleur voisine mais différente — légèrement plus sombre et plus terne que ce qui était demandé.

Deux notations suivent la couleur au-delà de la barrière ; une seule s’y arrête. Cette seule observation, c’est la distinction gamut/modèle sous forme concrète.

Ouvrez ce bleu dans Scale Composer — la même couleur de départ générée en une échelle complète face à la référence sRGB, avec les coordonnées oklch() et la valeur hex de chaque étape côte à côte.

Quel espace colorimétrique utiliser pour quel travail ?

Un de chaque type, choisi selon le travail :

Pour le travail d’interface, générez et raisonnez en OKLCH, livrez des valeurs qui s’affichent sans risque en sRGB, et superposez color(display-p3 …) par-dessus là où cela en vaut la peine — les accents et la couleur de marque, surtout. Pour l’imagerie, la couleur voyage à l’intérieur du fichier ; le travail consiste en un étiquetage de profil correct plutôt qu’en une notation. Pour l’impression, le papier est un gamut tout à fait différent, et LAB sert depuis longtemps de langue neutre entre l’écran et la presse.

Observez les deux types évoluer indépendamment

La preuve la plus nette que gamut et modèle sont des choses distinctes consiste à en changer un pendant que l’autre reste immobile : basculez la même palette en Display-P3. Le système de coordonnées ne bouge pas — L, C et H restent l’affichage — tandis que le vocabulaire s’enrichit : les étapes de demi-teinte prennent un chroma que le sRGB n’avait pas les mots pour dire, chaque étape porte désormais une chaîne color(display-p3 …), et la colonne hex reste bloquée à la barrière du sRGB. Même langue, vocabulaire plus large, et rien dans la logique de la palette n’a eu à changer.