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

Question

我有一组 RGB 值:

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

我想使用属于 https://github.com/markusn/color-diff 的 CIEDE2000 根据可见差异排列我的 RGB 值以便相似的颜色靠在一起。

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

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

想象一下以下场景:

原始颜色:[[深蓝色]、[橙色]、[浅蓝色]、[稍亮的橙色]](为了清楚起见，我没有写 RGB 值。)

这将被分类为[[深蓝色]、[橙色]、[略浅的橙色]、[浅蓝色]]

问题是布鲁斯 split 了。它们被分开是因为深蓝色实际上在视觉上最接近黑色，而浅蓝色最远。尽管它们远离橙色，但它们与黑色的距离不同。

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

以上内容应排序为:

[[深蓝色]、[浅蓝色]、[橙色]、[略浅的橙色]]

虽然蓝调是在橙子之前还是之后并不重要。只要他们都在一起。在真实场景中，我会有数千种不同的颜色。

谢谢!

Answer 1

如果您对其他方法持开放态度，请尝试将颜色转换为 HSL。 HSL 的好处在于它为您提供了一个线性“色调”值，您可以按该值进行排序。这应该确保你有相似的颜色彼此相邻。现在棘手的事情是如何在同一色调内对饱和度和亮度进行排序，但按此顺序排序可能看起来没问题:

1. 色调(升序、降序，无所谓)
2. 饱和度
3. 亮度

如果您无法确定饱和度或亮度的接近程度是否比色调的接近程度更重要，那么您就会遇到与 RGB 相同的问题；三维空间内的排序不明确。但 HSL 比 RGB 更理智地感知值的“接近度”。