Gestion de la couleur

En français
Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

Il y a peu de temps je suis tombé sur le livre Making Sense of Color Management dont la lecture a réveillé mon côté color geek :)

Dans la foulée j'en ai profité pour relire Real World Color Management, 2nd Edition qui commence à dater mais qui reste une bonne référence de la mise en pratique de la gestion de la couleur.

J'en profite pour mettre mes notes à plat en guise d'introduction à la gestion de la couleur, sujet vaste et complexe dont tout le monde semble parler en des termes différents.

Je commence par les concepts généraux pour finir avec la couleur sur le web, en passant par le print et Photoshop.

Lumière visible et modèles CIE

L'état des connaissances actuelles nous indique que la lumière est une onde électromagnétique.

De façon très schématique, l'œil humain est sensible à une petite partie du spectre électromagnétique : le spectre visible. Notre cerveau en interprète ensuite les différentes longueurs d'ondes pour reconstituer un grand nombre de couleurs.

Les couleurs visibles ont été représentées mathématiquement grâce aux travaux de la Commission internationale de l'éclairage (CIE). Plusieurs modèles colorimétriques ont ainsi été établi au fil des années dont CIE XYZ (1931) et CIE L*a*b* (1976) qui répertorient les couleurs vues par un œil humain "standard" dans des conditions spécifiques (distance, angle, éclairage etc.).

Modèle, espace et gamut de couleur

Ces trois termes sont souvent utilisés de manière interchangeable dans les articles traitant de la gestion de la couleur. Notamment en ce qui concerne la CIE dont les travaux sont tantôt qualifiés de modèles, tantôt d'espaces.

Ma compréhension actuelle :

  • un modèle de couleur décrit un système mathématique permettant d'assigner un nombre à une couleur
  • un espace de couleur est une instance de modèle dans lequel l'ensemble des couleurs possibles peut être représenté sous la forme d'un système de coordonnées cartésiennes en plusieurs dimensions
  • un gamut de couleur représente les limites visibles d'un espace (le blanc le plus blanc, le noir le plus noir, et les couleurs les plus saturées)

Bref, la nuance entre modèle et espace de couleur est très fine. Idem pour la nuance entre espace et gamut.

Dépendance et indépendance des couleurs

Un espace de couleur est dit dépendant d'un périphérique si la représentation de ses couleurs est basée sur les caractéristiques physiques de ce dernier. En clair, dans un tel espace, une valeur RVB ne produira pas la même couleur sur deux écrans différents.

Un espace de couleur est dit indépendant des périphériques si la représentation de ses couleurs est plus générique, par exemple basée sur un œil humain comme dans les espaces CIE. Dans un tel espace, on peut s'attendre à ce qu'une valeur RVB produise sensiblement le même résultat sur deux écrans différents.

Système de gestion de la couleur

L'objectif d'un système de gestion de la couleur est de pouvoir reproduire des couleurs homogènes entre périphériques différents.

Pour cela, l'International Color Consortium a mis en place un système universel basé sur 4 composants :

  1. un espace de connexion des profils : il représente les couleurs telles que vues par un œil humain (indépendant des périphériques) généralement exprimé en CIE XYZ ou en CIE L*a*b*
  2. des profils : ils décrivent la manière dont il faut restituer les couleurs grâce à des matrices ou des tables de correspondance entre un espace colorimétrique source et l'espace de connexion des profils ; ils peuvent être soit des fichiers autonomes (profil de moniteur) soit intégrés à d'autres fichiers (image, PDF etc.)
  3. un module de correspondance des couleurs : c'est l'algorithme permettant de convertir les couleurs grâce aux informations contenues dans les profils
  4. des intentions de rendu : ce sont 4 stratégies permettant de gérer les situations dans lesquelles un espace colorimétrique source a un gamut plus large que celui de destination, rendant la reproduction de certaines couleurs impossible

L'espace de connexion des profils est la solution astucieuse de la gestion des couleurs. Tout est basé sur la vision d'un œil standard.

Bien sûr tout ceci ne sert pas à grand chose si vous avez un écran pourri :) C'est pourquoi il est important de calibrer (ou étalonner) ses périphériques pour avoir des couleurs le plus proche possible d'un espace standard et d'en enregistrer le résultat dans un profil. Cela est plus ou moins simple à réaliser en fonction de la technologie et de la qualité des périphériques.

Convertir pour l'espace de destination

Lorsqu'on connaît l'espace de destination (là où aura lieu la restitution) de la couleur, ce qui est souvent le cas dans l'impression, il faut décider du moment auquel aura lieu la conversion des couleurs.

Historiquement cette question était résolue par deux scénarios, chacun ayant ses avantages et ses inconvénients :

  1. la conversion précoce ou early-binding, les couleurs sont converties vers l'espace de destination le plus tôt possible
  2. la conversion tardive ou late-binding, les couleurs sont converties vers l'espace de destination le plus tard possible

Mais dans les faits :

  • les gamuts des espaces sources sont parfois plus larges que ceux de destination
  • les espaces sources sont parfois peu adaptés à l'édition de la couleur (espaces perceptifs non uniformes, mauvaise balance des gris)

Par conséquent de nombreux flux de travail se basent sur un scénario de compromis en utilisant un espace intermédiaire (appelé espace de travail ou working space dans Photoshop) mieux adapté à l'édition des couleurs. Par exemple Adobe RGB (1998) qui est un espace perceptif uniforme, indépendant des périphériques et disposant d'une bonne balance des gris.

Tôt dans le processus, toutes les couleurs sont converties dans l'espace intermédiaire, et les nouvelles couleurs y sont également définies. Ce scénario fonctionne aussi longtemps que l'espace intermédiaire englobe les gamuts de tous les espaces de destination. Le critère principal de choix de l'espace intermédiaire est donc l'analyse de son gamut par rapport au gamut de destination.

Photoshop

Il vous sera dorénavant plus simple de comprendre les options proposées par Photoshop dans le cadre de sa gestion des couleurs. Par exemple lorsque la fenêtre de non-concordance des profils apparaît on peut choisir :

  • de "Préférer le profil incorporé" si on veut voir un résultat le plus proche possible de ce que la personne qui a créé le fichier voyait
  • de "Convertir les couleurs du document selon l'espace de travail" pour éditer dans l'espace configuré par défaut
  • de "Supprimer le profil incorporé" pour omettre complètement la gestion des couleurs

Photoshop affiche des symboles à côté du titre d'un fichier dans un onglet :

  • un # lorsque le fichier n'a pas de profil de couleur
  • un * lorsque le fichier dispose d'un profil de couleur différent de celui par défaut

Il semble parfois contre intuitif qu'un changement de profil d'une image n'entraîne pas une modification des valeurs de ses couleurs RVB alors que son apparence change. En fait, la seule chose qui change est la signification des valeurs RVB.

Enfin, il faut noter que chaque fois qu'une image ouverte dans une application qui gère la couleur est affichée sur un écran, une conversion de couleur a lieu depuis l'espace de l'image vers l'espace du moniteur si ces espaces sont différents.

Espace de couleur du web

Pour le web les choses sont plus compliquées car on ne connaît pas l'espace de destination.

C'est sans doute pourquoi la spécification CSS3 a tranché :

All RGB colors are specified in the sRGB color space. User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards.

sRGB est donc l'espace de couleur recommandé pour le web. Mais comme d'habitude avec les navigateurs, les résultats divergent.

Safari est le seul navigateur moderne qui supporte la gestion de la couleur. Il y a quelques années Microsoft Internet Explorer pour Mac pouvait déjà gérer ColorSync, il faudrait demander à Tantek Çelik de faire un effort pour Firefox ;)

Pour Safari, cela signifie qu'il convertit les couleurs CSS en sRGB conformément à la recommandation CSS. Il est finalement devenu Color Smart.

Concrètement, si vous comparez dans Safari et Chrome une couleur de background (de préférence située à une des extrémités du gamut sRGB car elle aura plus de chances d'être fortement décalée dans un autre espace) vous constaterez une différence. Safari prend la valeur brute CSS et la convertit dans un espace sRGB, puis le système de gestion de la couleur l'adapte au profil de l'écran, exactement comme avec un espace de travail sRGB dans Photoshop. Par conséquent méfiez-vous des valeurs affichées par un outil tiers type Colorimètre numérique sur Mac pour identifier les couleurs, faites bien attention d'afficher les résultats en sRGB pour avoir un résultat aussi cohérent que possible car l'outil suit un algorithme inverse en partant de l'espace de l'écran vers celui de Safari.

Les autres navigateurs ne touchent pas aux couleurs CSS et utilisent directement l'espace de l'écran sans l'entremise du système de gestion de la couleur. C'est, paraît-il, une décision pragmatique pour des produits qui doivent tourner sur différentes plates-formes : ces navigateurs assument que la plupart des moniteurs seront proches d'un espace sRGB et qu'aucune modification de la couleur n'est requise (sRGB étant l'espace de couleur par défaut de Windows).

Du côté de la couleur des autres éléments graphiques :

Bref, la chose essentielle à retenir est que vous ne devez pas incorporer de profil ICC dans vos images si ce sont des images d'interface qui doivent se fondre avec les couleurs CSS sous peine d'observer un décalage.

Pour les autres images (les photos etc.) vous pouvez intégrer un profil de couleur. Son inconvénient est d'augmenter la taille des fichiers. Cependant le poids d'un profil sRGB par exemple représente moins d'un kilobyte.

L'après sRGB

sRGB est un espace de couleur créé au milieu des années 90 pour pouvoir représenter le plus petit dénominateur commun : les couleurs visibles à la lumière du jour d'un moniteur à tube cathodique non étalonné pour un ordinateur sous Windows.

sRGB représente une grosse évolution comparé au temps où les moniteurs ne pouvaient afficher que 256 couleurs.

Son histoire est intéressante et je vous conseille de lire le résumé de la conférence sRGB – Work in Progress donné au meeting annuel ISCC 2011.

Une bonne pratique pour les photos à destination du web consiste à les convertir en sRGB dans un logiciel d'édition, puis à les enregistrer sans profil.

Mais la technologie des écrans évolue très vite. Le terme wide-gamut est utilisé pour désigner des écrans capable d'afficher un espace plus grand que celui de sRGB (Adobe RGB, DCI-P3, BT.2020 etc.).

Apple propose du DCI-P3 depuis fin 2015.

Et Apple est en première ligne pour améliorer les couleurs sur le web avec son prochain Safari 10.1.

D'une part on trouve une nouvelle media query à l'étude, color-gamut, permettant de détecter les écrans et d'afficher des images intégrant un profil DCI-P3 le cas échéant :

@media (min-resolution: 2dppx) and (color-gamut: p3) {
    div {
        background-image: url(picture-p3@2x.jpg);
    }
}

D'autre part on trouve un brouillon détaillant la fonction color() qui peut prendre un paramètre profile :

@supports (color: color(p3 0 0 0)) {
    strong {
      color: color(p3 1.0 0 0);
    }
}

Conclusion

Vous avez aimé le Responsive Web Design ? Vous avez adoré détecter le ratio du nombre de pixels à l'écran ?

Alors vous allez kiffer détecter l'espace de couleur des moniteurs et ajouter des profils à vos images ;)

Références

Avant Notes sur l'écosystème front-end avec Webpack en 2016 Après Unicode et Python

A Tag Kemar Joint