Bonjour,

J'ai récemment eu besoin d'une solution de conversion colorimétrique efficace, exacte et fonctionnelle côté client (notamment pour effectuer des conversions CMJN vers RVB et inversement).

L'idée était d'obtenir des conversions qui collent relativement bien avec celles obtenues via ACE (adobe color engine : le moteur de conversion colorimétrique qu'adobe utilise dans ses logiciels comme Photoshop ou Illustrator) pour utilisation en relation avec le domaine de l'imprimerie et du graphisme à destination de l'imprimerie.

En effet, les convertisseurs que l'on peut trouver actuellement en ligne proposent des conversions qui sont systématiquement fausses d'un point de vue du rendu (comparaison entre sortie écran et sortie de press). Par exemple, pour des conversions CMJN vers RVB, cela s'explique par le fait que les conversions sont effectuées de manière très (trop) simpliste entre ces deux espaces colorimétriques.

Citation Envoyé par Méthode de calcul classique que l'on peut retrouver sur le web
The red (R) color is calculated from the cyan (C) and black (K) colors:
R = 255 × (1-C) × (1-K)
The green color (G) is calculated from the magenta (M) and black (K) colors:
G = 255 × (1-M) × (1-K)
The blue color (B) is calculated from the yellow (Y) and black (K) colors:
B = 255 × (1-Y) × (1-K)
Source : https://shorturl.at/kFP02
Citation Envoyé par Voici une conversion typique qui témoigne du problème
Pour les valeurs CMJN suivantes :
  • Cyan : 100%
  • Magenta : 0%
  • Jaune : 0%
  • Noir : 0%

L'équivalent RVB donné par Google est le suivant :
  • Rouge : 0
  • Vert : 255
  • Bleu : 255

L'équivalent RVB Photoshop est le suivant (Fogra39 => sRGB) :
  • Rouge : 0
  • Vert : 159
  • Bleu : 227

Source : https://shorturl.at/blEJ0
Et voici la différence de rendu qui peut être attendu entre ce que l'on obtient d'une press ou de n'importe quelle imprimante pour ces valeurs CMJN et ce que la conversion classique donne :


  • Rendu sorti de press attendu (obtenu par la conversion Photoshop) :
    Nom : CMJN correcte.jpg Affichages : 144 Taille : 7,8 Ko
  • Rendu Google :
    Nom : CMJN incorrecte.jpg Affichages : 135 Taille : 8,2 Ko


Sans trop rentré dans les détails, il y a une différence de gamut, c'est à dire d'étendu du domaine colorimétrique, entre l'espace colorimétrique CMJN et l'espace RVB qui explique qu'une conversion obtenue par des calculs très simples ne peut être exacte.

Pour palier à ce problème d'exactitude lors des conversions, les systèmes de gestion de couleur comme ACE d'Adobe ou MSCMS de Microsoft tirent parti des fichiers tiers que sont les profiles ICC pour réaliser leurs conversions. Chaque profile ICC fait le lien entre un espace colorimétrique tel que CMJN ou RGB et un espace colorimétrique de connexion qui est soit Lab, soit XYZ.

En résumé, pour réaliser une conversion CMJN vers RVB exacte, il est donc nécessaire d'utiliser un module de gestion de couleur qui fera de deux profils ICC un pont entre deux espaces colorimétriques différents (CMJN et RGB la plupart du temps).

Citation Envoyé par Schéma du principe du module de gestion de couleur
Couleur CMJN => [Profil ICC CMJN] => Couleur équivalent Lab ou XYZ => [Profil ICC RGB] => Couleur équivalente RGB



N'ayant pas trouvé de solution adaptée à mes besoins, j'ai donc réalisé ma propre solution en Javascript.

Vous pouvez :


Pour utiliser le système :
  1. ajouter le module jsCMM.js de cette façon :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="jsCMM.js" type="module"></script>
  2. créer deux nouveaux objets "ICCProfile" avec pour argument l'URL des profils ICC :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    const inputProfile = new ICCProfile(URL du profil d entré); // Par exemple, l'URL d'un profil CMJN tel que Fogra39 ou USWebCoated
const outputProfile = new ICCProfile(URL du profil de sorti); // Par exemple, l'URL d'un profil RGB tel que sRGB
  3. créer un objet "interProfileTransform" (ou "ipt") avec comme argument les profils d'entré et de sorti :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    const IPT = new ipt(inputProfile, outputProfile);
  4. réaliser vos conversions de la manière suivante :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const CMYK = [1, 0, 0, 0]; // Valeurs de la couleur à convertir dans une gamme comprise entre 0 et 1. Ici : 100% de cyan, 0% de magenta, 0% de jaune, 0% de noir
const intent = renderingIntent.relativeColorimetric; // "renderingIntent" est un énumérateur dont les valeurs possibles sont comprises entre 0 et 3 inclues. 0 = renderingIntent.perceptual, 1 = renderingIntent.relativeColorimetric, 2 = renderingIntent.saturation, 3 = renderingIntent.absoluteColorimetric
const BPC = true;
let RGB;
IPT.promise.then(function() { // On attend que les profiles soit prêts avant toutes conversion
RGB = IPT.apply(CMYK, intent, BPC); // "CMYK" : Array de valeur de la couleur d'entrée
// intent (facultatif) : rendu colorimétrique souhaité (par défaut = renderingIntent.relativeColorimetric)
// BPC (facultatif) : activation de la compensation du point noir (par défaut = true)
RGB = RGB.map(x => x*255);
console.log(RGB);
});
  5. résultat : [0, 158.1600404918517, 227.2068992870391]


Pour le moment, le système ne fonctionne pas avec les profils ICC utilisant les tags de type multiProcessElement typiques des profils ICC V4 (version 4 de la norme). Toutefois, la plupart des profils colorimétriques d'usage aujourd'hui ne sont pas tout jeunes, n'utilisent pas ce type de tag et en conséquence devraient être exploitables.
Les profils ICC mis à disposition dans la démo sont ceux distribués par Adobe et peuvent tous être utilisés avec ce module (ces profils respectent la version 2 de la norme).

L'un des freins actuellement au support des profils V4 est en réalité lié au fait que les profils ICC v4 sont plutôt rares et que ça n'est pas bien pratique pour faire des tests .

Voici un récapitulatif des différents objets d’intérêt :


  • fileReader : Permet d'obtenir un Uint8Array du contenu des profils ICC
  • ICCProfile : Permet d'analyser le contenu d'un profil ICC
  • transform (ou t) : Permet la conversion depuis l'espace colorimétrique de base d'un profil ICC vers l'espace colorimétrique de connexion (PCS-Lab ou PCS-XYZ)
  • interProfileTransform (ou ipt) : Permet de faire un pont entre deux objets transform pour passer d'un espace colorimétrique à un autre (hors PCS-Lab et PCS-XYZ)
  • LabColour (ou Labc) : Un objet définissant une couleur Lab
  • XYZColour (ou XYZc) : Un objet définissant une couleur XYZ
  • XYZNumber (ou XYZn) : Un objet définissant des coordonnées
  • matrix : Un objet pour réaliser des calculs matriciels
  • utilities (ou u) : Un objet contenant une panoplie de méthodes statiques
  • profileClass, profileTransformType, colourSpaceName, colourSpaceType, colourSpaceComponentCount, colourSpaceBlack, colourSpaceWhite, primaryPlatform, renderingIntent, tag, tagType, curveTypeType, phosphorOrColorantType, standardObserver, measurementGeometry, standardIlluminant : Des énumérateurs maison (certain sont inutiles pour la conversion colorimétrique, mais traduisent certaine données contenues dans les profils ICC)
  • dateTimeNumber (ou dtn) : Un objet contenant une date et une heure (celles de la création des profils ICC)
  • parametricCurve (ou pCurve), curve, CLUT : Des objets permettant les transformations colorimétriques
  • ICCProfileFolder : Une constante modifiable dans le fichier jsCMM.params.js qui contient l'URL relative ou absolue vers le dossier qui contient les profils ICC
  • sRGBProfile : Une constante modifiable dans le fichier jsCMM.params.js qui contient le nom du profil ICC sRGB (qui est le profil ICC de base pour les rendu RVB sur écran) contenu dans le dossier désigné par la constante ICCProfileFolder.



Les sources qui m'ont été particulièrement utiles pour monter ce projet :
http://www.color.org/specification/ICC1v43_2010-12.pdf
http://www.brucelindbloom.com/
http://www.color.org/AdobeBPC.pdf