Javascript - 根据可见差异对颜色进行排序

Question

我有一个RGB值数组：

var arr = [[255, 255, 255], [100, 100, 100], [255, 0, 0], etc...]

我想根据CIEDE2000使用[i, difference]作为https://github.com/markusn/color-diff的一部分来根据可见差异排列我的RGB值，以便相似的颜色靠近在一起。

到目前为止，我一直在做的是将所有RGB值转换为LAB，然后创建第二个数组数组。每个值都为i，其中difference表示difference值引用的第一个数组中的原始位置。 CIEDE2000值是[[dark blue], [orange], [light blue], [slightly brighter orange]]在原始数组中的特定颜色与黑色之间计算的差异。

然后我按升序差异排序第二个数组。问题是这不会导致我正在寻找的排序数组。

想象一下以下场景：

原色：[[dark blue], [orange], [slightly lighter orange], [light blue]]（为清晰起见，我不是在写RGB值。）

将分类为[[dark blue], [light blue], [orange], [slightly lighter orange]]

问题是布鲁斯分裂了。它们被分开是因为深蓝色实际上是最接近黑色的，而浅蓝色是最远的。即使它们远离橙色，它们与黑色的距离也不同。

那么如何对原始颜色数组进行排序以返回正确排序的数组呢？

以上内容应按以下方式排序：

hasManyThrough

虽然蓝色在橘子之前或之后无关紧要。只要他们都在一起。在真实场景中，我会有数千种不同的颜色。

谢谢！

Answer 1

如果您对其他方法持开放态度，请尝试将颜色转换为HSL。 HSL的优点在于它为您提供线性的色调＆＃34;你可以改为排序的价值。这应该确保你有相似的颜色彼此相邻。现在最棘手的问题是如何在同一个色调中对饱和度和亮度进行排序，但按此顺序排序可能看起来不错：

1. Hue（升序，降序，无关紧要）
2. 饱和度
3. 光度

如果你不能确定饱和度或亮度的接近度是否比色调的接近度更重要，那么你就会遇到与RGB相同的问题;在三维空间内排序是模糊的。但是HSL对于感知＆＃34;亲密度＆＃34;而言比RGB更健全。价值观。