CIEDE2000 的 JavaScript 实现

本页介绍了 CIEDE2000 色差公式在 JavaScript 中的参考实现。为了确保与某些第三方实现完全兼容（精确到小数点后十位），可能需要修改源代码中的注释。以下链接可以帮助您自动执行此操作。

JavaScript 中的ΔE2000 函数

让我们考虑一下这两种表述中更常见 和 学术性的（Sharma，2005 年）的一种。

// 此 JavaScript 函数属于公共领域，
// 与 CIE（国际照明委员会）无关。

// 经典实现，接受两种颜色 L*a*b* 并返回它们的差值 CIEDE2000。
// "L" 分量在 0 到 100 之间变化；"a" 和 "b" 理论上无界，通常被映射到 -128 到 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"
	// 下面是用 JavaScript 计算 CIEDE2000 色差公式的过程。
	// k_l、k_c 和 k_h 是可调的参数因子，
	// 可根据具体的可视化需求（如纹理、背景）进行调整。
	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;
	// 为更准确地考虑色度的影响，
	// 与平均色度相关的项被提升至七次方。
	n = 1.0 + 0.5 * (1.0 - Math.sqrt(n / (n + 6103515625.0)));
	// 应用色度校正因子，以补偿其非线性特性。
	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);
	// 相比 atan，更优先使用 atan2 函数，因为它可以计算
	// 点 (x, y) 在所有象限中的角度，并考虑 x 与 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);
	// 避免分支逻辑依赖于编程语言的舍入模式（RoundingMode）。
	if (Math.PI - 1E-14 < n && n < Math.PI + 1E-14)
		n = Math.PI;
	// 当色相角位于不同象限时，
	// 简单的算术平均可能产生错误的角度，
	// 以下代码对这种角度偏差进行了修正。
	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;
	// 色相旋转校正项用于调整算法的行为，
	// 尤其在比较蓝色区域时效果更明显。
	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);
	// 明度。
	var l = (l_2 - l_1) / ((k_l || 1.0) * (1.0 + 0.015 * n / Math.sqrt(20.0 + n)));
	// 这些系数用于调节谐波分量
	// 在色相差计算中的影响。
	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;
	// 色相。
	var h = 2.0 * Math.sqrt(c_1 * c_2) * Math.sin(h_d) / ((k_h || 1.0) * (1.0 + 0.0075 * n * t));
	// 色度。
	var c = (c_2 - c_1) / ((k_c || 1.0) * (1.0 + 0.0225 * n));
	// 返回平方根可确保 dE00 表示的是
	// CIELAB 空间中的几何距离（范围约为 0 到 185）。
	return Math.sqrt(l * l + h * h + c * c + c * h * r_t);
}

//  GitHub 项目 : https://github.com/michel-leonard/ciede2000-color-matching
//      在线测试 : 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, ...)
// 不同实现之间的差异 ≈ 1.5e-5

// 请参阅源代码中的注释，以在这些 ΔE*00 实现变体之间进行切换。

您的性能测试

将此 JavaScript 函数加载到浏览器中，看看速度有多快

k_l、k_c 与 k_h 参数

CIEDE2000 公式中的参数 k_l、k_c 和 k_h 是分别应用于亮度 (ΔL*) 、彩度 (ΔC*) 和色相 (ΔH*) 成分的加权系数。在源代码中，它们被定义为常数，默认值为 1，与国际照明委员会（CIE）规定的标准观测条件一致。在实践中，您可能需要调整这些系数以反映特定的条件：例如，k_l = 2 有时用于增加亮度差异的权重（这在纺织业中很常见），而 k_c 或 k_h 则可根据要求减小，以增加对饱和度或色调变化的容忍度。根据具体情况，这些系数的范围通常在 0.5 到 2 之间。

源代码的准确性和可靠性

在最终的 ΔE2000 上，夏尔马的学术表述与林德布卢姆的简化表述之间的差异不超过 ±0.0003。这相当于通常测量的两个 32 位实现之间的差异，人眼无法察觉。我们的 64 位计算公式彼此一致，都能保证至少 10 位正确的小数位数，因此选择一种计算公式还是其他计算公式只是一个技术细节。本页中的默认公式是社区中最常使用的公式。

✎ 如果您发现源代码中的注释与英文注释不一致，请通知页面作者，以便更正。

如何将 RGB 颜色转换为 L*a*b*？

您需要使用 XYZ 中间色彩空间进行转换，如果需要帮助，本页底部提供了源代码（基于 D65 白点）。

CIELAB 中的数值范围和 ΔE2000 的解释

在 CIELAB 色彩空间中，L* 表示明度，通常在 0（黑色）到 100（白色）之间变化。a* 和 b* 成分代表颜色轴：a* 从绿色到红色，而 b* 从蓝色到黄色。实际上，a* 和 b* 的数值几乎总是限制在 -128 到 +127 之间，尽管标准并未对这两个分量规定正式的限制范围。

ΔE2000 （CIEDE2000）用于量化两种颜色的感知差异：0 表示完全相同，数值越大（最高可达185及以上）表示差异越明显。例如，ΔE2000 约为 5 表示颜色较接近，而约为 15 则表示颜色明显不同。当ΔE2000值超过 40 时，被比较的颜色几乎不再有任何共同点，我们也无法从中获得准确的信息。

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

测试结果

用 C99 语言编写的驱动程序经过 250 次精确的静态测试，证明该 JavaScript 函数与其他编程语言中的 CIEDE2000 函数具有互操作性。

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

⚡ 比较 RGB 和十六进制网络色彩

仅 3 KB – 简单、快速。该 JavaScript 函数体积紧凑，接受两种颜色格式（RGB 或十六进制），并使用标准光源 D65 计算 CIE ΔE2000 色差。

// 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);};

要下载的文件

下面的文件支持 JavaScript 中的任意精度计算（如果您在计量学中处理 ΔE2000，该文件将非常有用）。 请随意使用本方提供的这些文件，甚至用于商业目的。

社区

您认为此源代码或 CIEDE2000 如何？留言簿上已有 9 条留言，其中 1 条是中文留言。请看一看并分享您的意见。