Реализация CIEDE2000 на TypeScript

На этой странице представлена эталонная реализация формулы цветовой разницы CIEDE2000 на TypeScript. Если вы хотите получить точное совпадение со сторонними реализациями до 10 знаков после запятой, вам может потребоваться внести некоторые изменения в исходный код, в частности, закомментировать и разкомментировать несколько строк, которые могут быть применены автоматически по ссылке ниже.

Функция ΔE2000 в TypeScript

Рассмотрим более распространенную и академическую (Sharma, 2005) из двух формулировок.

// This function written in TypeScript 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.

// The classic CIE ΔE2000 implementation, which operates on two L*a*b* colors, and returns their difference.
// "l" ranges from 0 to 100, while "a" and "b" are unbounded and commonly clamped to the range of -128 to 127.
function ciede_2000(l_1: number, a_1: number, b_1: number, l_2: number, a_2: number, b_2: number): number {
	// Working in TypeScript with the CIEDE2000 color-difference formula.
	// k_l, k_c, k_h are parametric factors to be adjusted according to
	// different viewing parameters such as textures, backgrounds...
	const k_l = 1.0, k_c = 1.0, k_h = 1.0;
	let 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;
	// A factor involving chroma raised to the power of 7 designed to make
	// the influence of chroma on the total color difference more accurate.
	n = 1.0 + 0.5 * (1.0 - Math.sqrt(n / (n + 6103515625.0)));
	// Application of the chroma correction factor.
	const c_1 = Math.sqrt(a_1 * a_1 * n * n + b_1 * b_1);
	const c_2 = Math.sqrt(a_2 * a_2 * n * n + b_2 * b_2);
	// atan2 is preferred over atan because it accurately computes the angle of
	// a point (x, y) in all quadrants, handling the signs of both coordinates.
	let h_1 = Math.atan2(b_1, a_1 * n), h_2 = Math.atan2(b_2, a_2 * n);
	if (h_1 < 0.0)
		h_1 += 2.0 * Math.PI;
	if (h_2 < 0.0)
		h_2 += 2.0 * Math.PI;
	n = Math.abs(h_2 - h_1);
	// Cross-implementation consistent rounding.
	if (Math.PI - 1E-14 < n && n < Math.PI + 1E-14)
		n = Math.PI;
	// When the hue angles lie in different quadrants, the straightforward
	// average can produce a mean that incorrectly suggests a hue angle in
	// the wrong quadrant, the next lines handle this issue.
	let h_m = (h_1 + h_2) * 0.5, h_d = (h_2 - h_1) * 0.5;
	if (Math.PI < n) {
		h_d += Math.PI;
		// 📜 Sharma’s formulation doesn’t use the next line, but the one after it,
		// and these two variants differ by ±0.0003 on the final color differences.
		h_m += Math.PI;
		// h_m += h_m < Math.PI ? Math.PI : -Math.PI;
	}
	const p = 36.0 * h_m - 55.0 * Math.PI;
	n = (c_1 + c_2) * 0.5;
	n = n * n * n * n * n * n * n;
	// The hue rotation correction term is designed to account for the
	// non-linear behavior of hue differences in the blue region.
	const 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);
	// Lightness.
	const l = (l_2 - l_1) / (k_l * (1.0 + 0.015 * n / Math.sqrt(20.0 + n)));
	// These coefficients adjust the impact of different harmonic
	// components on the hue difference calculation.
	const 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;
	// Hue.
	const h = 2.0 * Math.sqrt(c_1 * c_2) * Math.sin(h_d) / (k_h * (1.0 + 0.0075 * n * t));
	// Chroma.
	const c = (c_2 - c_1) / (k_c * (1.0 + 0.0225 * n));
	// Returning the square root ensures that dE00 accurately reflects the
	// geometric distance in color space, which can range from 0 to around 185.
	return Math.sqrt(l * l + h * h + c * c + c * h * r_t);
}

// GitHub Project : https://github.com/michel-leonard/ciede2000-color-matching
//   Online Tests : https://michel-leonard.github.io/ciede2000-color-matching

// L1 = 81.8   a1 = 47.2   b1 = -2.1
// L2 = 82.0   a2 = 41.1   b2 = 2.0
// CIE ΔE00 = 2.9944536917 (Bruce Lindbloom, Netflix’s VMAF, ...)
// CIE ΔE00 = 2.9944393990 (Gaurav Sharma, OpenJDK, ...)
// Deviation between implementations ≈ 1.4e-5

// See the source code comments for easy switching between these two widely used ΔE*00 implementation variants.

Точность и надежность исходного кода

Разница между формулировками Шармы и Линдблума никогда не превышает ±0,0003 по финальному ΔE2000, что соответствует обычной разнице между двумя 32-битными реализациями и незаметно для невооружённого глаза. Наши 64-битные реализации, все согласованные между собой, гарантируют как минимум 10 правильных десятичных знаков, поэтому выбор одной формулы вместо другой в основном зависит от желаемой совместимости. Наиболее часто используется формула, которая по умолчанию отображается на этой странице (ее микродостоинство в том, что она основана на сообществе и при векторизации легче своего аналога).

✎ Если вы обнаружили в исходном коде комментарий, который не соответствует другому языку, пожалуйста, сообщите об этом автору сайта, который изучит ваше предложение и включит его в исходный код.

Как преобразовать цвета RGB в L*a*b*?

Перейдите на страницу AWK, C, Dart, Java, JavaScript, Kotlin, Lua, PHP, Python, Ruby или Rust, где такой конвертер (с использованием осветителя D65) уже реализован в дополнение к функции сравнения цветов.

Диапазоны значений в CIELAB и интерпретация ΔE2000

В цветовом пространстве CIELAB компонент L* обозначает светлоту и обычно изменяется от 0 (черный) до 100 (белый). Компоненты a* и b* описывают цветовые оси: a* идет от зеленого к красному, а b* — от синего к желтому. На практике значения a* и b* чаще всего находятся в диапазоне от -128 до +127, хотя в зависимости от конверсии они могут немного выходить за эти пределы.

Параметры k_l, k_c и k_h

Параметры k_l, k_c и k_h являются весовыми коэффициентами, применяемыми к компонентам яркости (ΔL*), хроматичности (ΔC*) и оттенка (ΔH*) в формуле CIEDE2000. Их значение по умолчанию — 1, что соответствует стандартным условиям наблюдения, рекомендованным Международная комиссия по освещению. На практике эти коэффициенты настраиваются для отражения конкретных условий: например, k_l = 2 иногда используется для придания большего веса различиям яркости (часто в печати), тогда как k_c или k_h могут быть уменьшены для повышения допустимости вариаций насыщенности или оттенка в зависимости от требований контроля качества. В зависимости от контекста эти коэффициенты обычно варьируются от 0,5 до 2.

ΔE2000 (CIEDE2000) измеряет воспринимаемую разницу между двумя цветами: 0 означает идентичные цвета, а более высокие значения (до примерно 185 в крайних случаях) показывают большую разницу. Например, значение ΔE2000 около 5 означает близкие цвета, а около 15 — явно разные.

Пример использования в TypeScript

// Example usage of the CIEDE2000 function in TypeScript

const l1 = 17.6, a1 = 39.4, b1 = -1.7;
const l2 = 17.2, a2 = 45.1, b2 = 2.2;

const deltaE: number = ciede_2000(l1, a1, b1, l2, a2, b2);
console.log(deltaE);

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

Результаты испытаний

Драйвер, написанный на языке C99, с помощью 250 точных статических тестов доказал, что эта функция TypeScript совместима с функцией CIEDE2000, доступной на других языках программирования.

CIEDE2000 Verification Summary :
  First Verified Line : 87.51,-44.14,-14,60,53,98.4,58.874366927055824
             Duration : 37.78 s
            Successes : 10000000
               Errors : 0
      Average Delta E : 62.9377
    Average Deviation : 6.0699611337255987e-15
    Maximum Deviation : 2.4158453015843406e-13

Файлы для загрузки

Не стесняйтесь использовать эти файлы, предоставленные Мишелем, даже в коммерческих целях.

Сообщество

Если вы хотите оставить своё мнение об этом исходном коде TypeScript или о CIEDE2000 в целом, то в гостевой книге уже есть 1 сообщения на русском языке и 9 сообщений в целом, так что, пожалуйста, дайте нам знать, что вы думаете по этому поводу.