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

Версия функции: v1.0.0
Статистика сайта
Количество посещений594
Количество просмотренных файлов358 + 378

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

Диаграмма полной формулы CIEDE2000 с компонентами L*a*b* и корректировками

Функция Δ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.

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

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

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

Разница между академической формулировкой Шармы и упрощенной формулировкой Линдблума не превышает ±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, хотя в стандарте официальные ограничения для этих двух компонентов не указаны.

Пример двух цветов, имеющих незаметную разницу (JND), по мнению CIEDE2000
Цвет 1Цвет 2Значение ΔE2000
1
2
3
Примеры значений CIEDE2000, вычисленных между двумя различными цветами
Цвет 1Цвет 2Значение ΔE2000
5
10
15

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

Пример использования в 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

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

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

Статистика сайта : загрузки файлов
ФайлРазмерКоличество кликов
ciede-2000.ts4 KB110
ciede-2000-driver.ts5 KB96
ciede-2000-random.ts6 KB93
test-ts.yml4 KB59
reference-dataset.txt4 KB378
Нажмите на ts.zip, чтобы скачать все эти файлы в архиве.

Сообщество

Что вы думаете об этом исходном коде или CIEDE2000? Ваше мнение очень важно для нас! В гостевой книге уже 9 сообщений, в том числе 1 на русском языке. Посмотрите и поделитесь своим мнением.