Implémentation de CIEDE2000 en JavaScript

Cette page présente une implémentation de référence de la formule de différence de couleur CIEDE2000, écrite en langage de programmation JavaScript. Si vous souhaitez assurer une compatibilité parfaite (à la dixième décimale) avec certaines implémentations tierces, vous devrez peut-être modifier les commentaires dans le code source. Pour vous faciliter la tâche, le lien suivant automatise cette opération.

La fonction ΔE2000 en JavaScript

Considérons la plus courante et académique (Sharma, 2005) des deux formulations.

// Cette fonction écrite en JavaScript est placée dans le domaine public et
// n’est pas affiliée à la CIE (Commission Internationale de l’Éclairage).

// L’implémentation CIEDE2000 classique qui accepte deux couleurs L*a*b* et renvoie leur différence.
// La composante "L" varie de 0 à 100. "a" et "b", non bornées, sont souvent projetées entre -128 et 127.
function ciede_2000(l_1, a_1, b_1, l_2, a_2, b_2, k_l, k_c, k_h, canonical) {
	"use strict"
	// Traite la formule de différence de couleurs CIEDE2000 en JavaScript.
	// k_l, k_c et k_h sont des facteurs paramétriques qu’on ajuste
	// selon des recommandations propres au secteur industriel.
	var n = (Math.sqrt(a_1 * a_1 + b_1 * b_1) + Math.sqrt(a_2 * a_2 + b_2 * b_2)) * 0.5;
	n = n * n * n * n * n * n * n;
	// Un facteur impliquant la chroma moyenne à la puissance 7,
	// conçu pour modéliser plus précisément son influence.
	n = 1.0 + 0.5 * (1.0 - Math.sqrt(n / (n + 6103515625.0)));
	// Application du facteur de correction de la chroma pour compenser sa non-linéarité.
	var c_1 = Math.sqrt(a_1 * a_1 * n * n + b_1 * b_1);
	var c_2 = Math.sqrt(a_2 * a_2 * n * n + b_2 * b_2);
	// La fonction atan2 est préférée à atan car elle calcule l’angle d’un
	// point (x, y) dans tous les quadrants, en tenant compte du signe de x et y.
	var h_1 = Math.atan2(b_1, a_1 * n), h_2 = Math.atan2(b_2, a_2 * n);
	h_1 += 2.0 * Math.PI * (h_1 < 0.0);
	h_2 += 2.0 * Math.PI * (h_2 < 0.0);
	n = Math.abs(h_2 - h_1);
	// Prévient le branchement de dépendre du RoundingMode du langage de programmation.
	if (Math.PI - 1E-14 < n && n < Math.PI + 1E-14)
		n = Math.PI;
	// Lorsque les angles de teinte sont dans différents quadrants,
	// la moyenne arithmétique simple peut donner un angle incorrect,
	// les lignes suivantes prennent en compte cette correction angulaire.
	var h_m = (h_1 + h_2) * 0.5, h_d = (h_2 - h_1) * 0.5;
	if (Math.PI < n) {
		h_d += Math.PI;
		if (canonical) // Sharma’s implementation, OpenJDK, ...
			h_m += h_m < Math.PI ? Math.PI : -Math.PI;
		else // Lindbloom’s implementation, Netflix’s VMAF, ...
			h_m += Math.PI;
	}
	var p = 36.0 * h_m - 55.0 * Math.PI;
	n = (c_1 + c_2) * 0.5;
	n = n * n * n * n * n * n * n;
	// Le terme de correction de la rotation de teinte ajuste le comportement
	// de l’algorithme, d’autant plus si la comparaison porte sur des teintes bleues.
	var r_t = -2.0 * Math.sqrt(n / (n + 6103515625.0))
		* Math.sin(Math.PI / 3.0 * Math.exp(p * p / (-25.0 * Math.PI * Math.PI)));
	n = (l_1 + l_2) * 0.5;
	n = (n - 50.0) * (n - 50.0);
	// Luminosité.
	var l = (l_2 - l_1) / ((k_l || 1.0) * (1.0 + 0.015 * n / Math.sqrt(20.0 + n)));
	// Ces coefficients modulent l’influence des composantes
	// harmoniques dans le calcul de la différence de teinte.
	var t = 1.0	+ 0.24 * Math.sin(2.0 * h_m + Math.PI * 0.5)
			+ 0.32 * Math.sin(3.0 * h_m + 8.0 * Math.PI / 15.0)
			- 0.17 * Math.sin(h_m + Math.PI / 3.0)
			- 0.20 * Math.sin(4.0 * h_m + 3.0 * Math.PI / 20.0);
	n = c_1 + c_2;
	// Teinte.
	var h = 2.0 * Math.sqrt(c_1 * c_2) * Math.sin(h_d) / ((k_h || 1.0) * (1.0 + 0.0075 * n * t));
	// Chroma.
	var c = (c_2 - c_1) / ((k_c || 1.0) * (1.0 + 0.0225 * n));
	// Retourner la racine carrée assure que dE00 représente une distance
	// géométrique (comprise entre 0 et environ 185) dans l’espace CIELAB.
	return Math.sqrt(l * l + h * h + c * c + c * h * r_t);
}

//    Projet GitHub : https://github.com/michel-leonard/ciede2000-color-matching
//   Tests en ligne : https://michel-leonard.github.io/ciede2000-color-matching

// L1 = 54.8   a1 = 23.5   b1 = 2.0
// L2 = 53.3   a2 = 29.5   b2 = -2.2
// CIE ΔE00 = 4.1622955128 (Bruce Lindbloom, Netflix’s VMAF, ...)
// CIE ΔE00 = 4.1622807178 (Gaurav Sharma, OpenJDK, ...)
// Écart entre les implémentations ≈ 1.5e-5

// Voir les commentaires du code source pour passer d’une de ces variantes d’implémentation de ΔE*00 à l’autre.

Votre test de performance

Chargez cette fonction JavaScript dans le navigateur pour évaluer sa vitesse

Paramètres k_l, k_c et k_h

Les paramètres k_l, k_c et k_h de la formule CIEDE2000 sont des facteurs de pondération appliqués respectivement aux composantes de luminosité (ΔL*), de chroma (ΔC*) et de teinte (ΔH*). Dans le code source, ils sont définis comme des constantes dont la valeur par défaut est 1, ce qui correspond aux conditions d’observation standard prévues par la Commission internationale de l’éclairage (CIE). En pratique, il peut être nécessaire d’ajuster ces coefficients en fonction de conditions spécifiques : par exemple, k_l = 2 est parfois utilisé pour donner plus de poids aux différences de luminosité (cas fréquent dans l’industrie textile), tandis que k_c ou k_h peuvent être réduits pour augmenter la tolérance aux variations de saturation ou de teinte. En résumé, ces coefficients varient généralement entre 0,5 et 2, la valeur la plus courante étant 1.

Précision et fiabilité du code source

La différence entre la formulation académique de Sharma et la formulation simplifiée de Lindbloom ne dépasse pas ±0,0003 sur le ΔE2000 final. L’implémentation présentée ici est en 64 bits et garantit de plus de 10 décimales correctes ; le choix d’une formulation plutôt qu’une autre relève donc d’un détail technique. En haut de la page, vous pouvez choisir entre les deux formulations ; celle qui s’affiche actuellement est la formulation simplifiée.

Comment déterminer si une implémentation donnée de CIEDE2000 est de type académique ou simplifié ?

• Évaluez ciede_2000(56.6, 43.6, 41.1, 68.4, 9.4, -8.6)
• Si le résultat est 30.0001, il s’agit du type académique (comme Sharma, OpenJDK, etc.)
• Si le résultat est 29.9999, il s’agit du type simplifié (comme Lindbloom, Netflix VMAF, etc.)

Comment convertir les couleurs RGB en L*a*b* ?

Vous devrez utiliser l’espace colorimétrique intermédiaire XYZ pour la conversion, et si vous avez besoin d’aide, le code source est fourni au bas de cette page (en utilisant le point blanc D65 formalisé en 1964).

Plages de valeurs dans CIELAB et interprétation du ΔE2000

Dans l’espace colorimétrique CIELAB, la composante L* représente la luminosité et varie de 0 (noir) à 100 (blanc). Les composantes a* et b* décrivent les axes de couleur : a* s’étend du vert au rouge, tandis que b* va du bleu au jaune. Dans la pratique, les valeurs de a* et b* sont presque toujours comprises entre -128 et +127, bien que la norme ne fixe pas de limite officielle pour ces deux composantes.

Le ΔE2000 (CIEDE2000) quantifie la différence perceptuelle entre deux couleurs : 0 signifie deux couleurs identiques, et des valeurs plus élevées (jusqu’à 185 et plus) indiquent une différence plus marquée. Par exemple, une valeur ΔE2000 autour de 5 correspond à des couleurs proches, tandis qu’une valeur autour de 15 correspond à des couleurs clairement distinctes. Lorsque la valeur ΔE2000 dépasse 40, les couleurs comparées n’ont pratiquement plus rien en commun, et nous ne pouvons plus en tirer d’informations précises.

Exemple d’utilisation en JavaScript

// Define color 1 in L*a*b* space
const l1 = 43.2, a1 = 31.2, b1 = 4.1;

// Define color 2 in L*a*b* space
const l2 = 43.0, a2 = 35.5, b2 = -4.3;

// Calculate ΔE2000 color difference
const deltaE = ciede_2000(l1, a1, b1, l2, a2, b2);
console.log(deltaE);

// .................................................. This shows a ΔE2000 of 5.2895865658
// As explained in the comments, compliance with Gaurav Sharma would display 5.2895721943

Résultats des tests

Notre programme de tests, écrit en C99, comprend 250 tests statiques précis. Ces tests assurent que vos calculs s’effectueront sans erreur, même dans des cas limites critiques, par exemple lorsque la fonction arc tangente renvoie une valeur mathématiquement indéfinie. Les résultats montrent que cette fonction CIEDE2000 en JavaScript est interopérable avec les 41 autres langages de programmation que nous proposons.

CIEDE2000 Verification Summary :
  First Verified Line : 19.8,86.4,126,87,48.32,-70.5,86.66139766452334
             Duration : 36.48 s
            Successes : 10000000
               Errors : 0
      Average Delta E : 62.9463
    Average Deviation : 6.0717893379802488e-15
    Maximum Deviation : 2.2737367544323206e-13

⚡ Comparaison des couleurs RVB et hexadécimales pour le web

Seulement 3 Ko – Simple. Rapide. Cette fonction JavaScript compacte accepte deux couleurs au format RVB ou hexadécimal et retourne la différence de couleur CIE ΔE2000 en utilisant l’illuminant standard D65.

// This function written in JavaScript is not affiliated with the CIE (International Commission on Illumination),
// and is released into the public domain. It is provided "as is" without any warranty, express or implied.

// This function accepts both RGB and hexadecimal color formats and computes the color difference using the CIE ΔE2000 formula.
// Examples of use :
// - ciede_2000('#00F', '#483D8B')
// - ciede_2000('#483d8b', 75,0,130)
// - ciede_2000(75, 0, 130, '#00008b')
// - ciede_2000(0, 0, 139, 0, 0, 128)

// GitHub : https://github.com/michel-leonard/ciede2000-color-matching

;function ciede_2000(a,b,c,d,e,f){"use strict";var k_l=1.0,k_c=1.0,k_h=1.0,g,h,i,j,k,l,m,n,o,p,q,r,s=0.040448236277105097;if(typeof a=='string'){g=parseInt((a.length===4?a[0]+a[1]+a[1]+a[2]+a[2]+a[3]+a[3]:a).substring(1),16);if(typeof b=='string'){h=parseInt((b.length===4?b[0]+b[1]+b[1]+b[2]+b[2]+b[3]+b[3]:b).substring(1),16);d=h>>16&0xff;e=h>>8&0xff;f=h&0xff;}else{f=d;e=c;d=b;}a=g>>16&0xff;b=g>>8&0xff;c=g&0xff}else if(typeof d=='string'){g=parseInt((d.length===4?d[0]+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]:d).substring(1),16);d=g>>16&0xff;e=g>>8&0xff;f=g&0xff;}a/=255.0;b/=255.0;c/=255.0;a=a<s?a/12.92:Math.pow((a+0.055)/1.055,2.4);b=b<s?b/12.92:Math.pow((b+0.055)/1.055,2.4);c=c<s?c/12.92:Math.pow((c+0.055)/1.055,2.4);g=a*41.24564390896921145+b*35.75760776439090507+c*18.04374830853290341;h=a*21.26728514056222474+b*71.51521552878181013+c*7.21749933075596513;i=a*1.93338955823293176+b*11.91919550818385936+c*95.03040770337479886;a=g/95.047;b=h/100.0;c=i/108.883;a=a<216.0/24389.0?((841.0/108.0)*a)+(4.0/29.0):Math.cbrt(a);b=b<216.0/24389.0?((841.0/108.0)*b)+(4.0/29.0):Math.cbrt(b);c=c<216.0/24389.0?((841.0/108.0)*c)+(4.0/29.0):Math.cbrt(c);g=(116.0*b)-16.0;h=500.0*(a-b);i=200.0*(b-c);d/=255.0;e/=255.0;f/=255.0;d=d<s?d/12.92:Math.pow((d+0.055)/1.055,2.4);e=e<s?e/12.92:Math.pow((e+0.055)/1.055,2.4);f=f<s?f/12.92:Math.pow((f+0.055)/1.055,2.4);j=d*41.24564390896921145+e*35.75760776439090507+f*18.04374830853290341;k=d*21.26728514056222474+e*71.51521552878181013+f*7.21749933075596513;l=d*1.93338955823293176+e*11.91919550818385936+f*95.03040770337479886;d=j/95.047;e=k/100.0;f=l/108.883;d=d<216.0/24389.0?((841.0/108.0)*d)+(4.0/29.0):Math.cbrt(d);e=e<216.0/24389.0?((841.0/108.0)*e)+(4.0/29.0):Math.cbrt(e);f=f<216.0/24389.0?((841.0/108.0)*f)+(4.0/29.0):Math.cbrt(f);j=(116.0*e)-16.0;k=500.0*(d-e);l=200.0*(e-f);d=(Math.sqrt(h*h+i*i)+Math.sqrt(k*k+l*l))*0.5;d=d*d*d*d*d*d*d;d=1.0+0.5*(1.0-Math.sqrt(d/(d+6103515625.0)));m=Math.sqrt(h*h*d*d+i*i);n=Math.sqrt(k*k*d*d+l*l);o=Math.atan2(i,h*d);p=Math.atan2(l,k*d);o+=2.0*Math.PI*(o<0.0);p+=2.0*Math.PI*(p<0.0);d=Math.abs(p-o);if(Math.PI-1E-14<d&&d<Math.PI+1E-14)d=Math.PI;q=(o+p)*0.5;r=(p-o)*0.5;if(Math.PI<d){r+=Math.PI;q+=Math.PI;}e=36.0*q-55.0*Math.PI;d=(m+n)*0.5;d=d*d*d*d*d*d*d;s=-2.0*Math.sqrt(d/(d+6103515625.0))*Math.sin(Math.PI/3.0*Math.exp(e*e/(-25.0*Math.PI*Math.PI)));d=(g+j)*0.5;d=(d-50.0)*(d-50.0);f=(j-g)/(k_l*(1.0+0.015*d/Math.sqrt(20.0+d)));a=1.0+0.24*Math.sin(2.0*q+Math.PI*0.5)+0.32*Math.sin(3.0*q+8.0*Math.PI/15.0)-0.17*Math.sin(q+Math.PI/3.0)-0.20*Math.sin(4.0*q+3.0*Math.PI/20.0);d=m+n;b=2.0*Math.sqrt(m*n)*Math.sin(r)/(k_h*(1.0+0.0075*d*a));c=(n-m)/(k_c*(1.0+0.0225*d));return Math.sqrt(f*f+b*b+c*c+c*b*s);};

Fichiers à télécharger

Un fichier ci-dessous prend en charge les calculs en précision arbitraire en JavaScript (utile si vous traitez ΔE2000 en métrologie). Utilisez librement ces fichiers mis à disposition par Michel, même à des fins commerciales.

Communauté

Que pensez-vous de ce code source ou de CIEDE2000 ? Votre avis nous intéresse ! Ce site web spécialisé comporte un livre d’or qui inclut déjà 9 messages dont 1 en français. Faites-y un tour et partagez votre avis.