Javascript-基于可见差异对颜色进行排序

我有一个RGB值数组：

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

我想使用的

CIEDE2000

是的一部分，根据可见差异排列我的RGB值，以便相似的颜色接近

到目前为止，我一直在做的是将所有RGB值转换为LAB，然后创建第二个数组。每个值都是

[i，difference]

，其中

i

表示

difference

值所指的第一个数组中的原始位置。而

差值

值是由

CIEDE2000

计算的原始数组中特定颜色与黑色之间的差值

然后我通过升序差对第二个数组进行排序。问题是，这不会产生我正在寻找的排序数组

想象一下以下场景：

原始颜色：

[[深蓝色]，[橙色]，[浅蓝色]，[稍亮的橙色]]

（我不是为了清晰起见而写RGB值。）

这将被分为

[[深蓝色]，[橙色]，[稍浅的橙色]，[浅蓝色]]

问题是蓝军已经分裂了。它们分开是因为深蓝色实际上在视觉上最接近黑色，而浅蓝色最远。尽管它们远离橙色，但它们远离黑色的数量却不尽相同

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

以上内容应分类为：

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

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

---

谢谢

如果您对其他方法持开放态度，请尝试将颜色转换为HSL。HSL的优点是它给了你一个线性的“色调”值，你可以用它来代替排序。这样可以确保你们有相似的颜色。现在棘手的问题是如何在同一色调内对饱和度和亮度进行排序，但按此顺序排序可能看起来还可以：

色调（上升、下降、无所谓）

饱和

光度

---

如果你不能决定饱和度或亮度的接近度是否比色调的接近度更重要，那么你会遇到与RGB相同的问题；在三维空间中，排序是不明确的。但是HSL比RGB在感知到的价值“接近度”方面更理智。

如果你愿意接受其他方法，试着将颜色转换为HSL。HSL的优点是它给了你一个线性的“色调”值，你可以用它来代替排序。这样可以确保你们有相似的颜色。现在棘手的问题是如何在同一色调内对饱和度和亮度进行排序，但按此顺序排序可能看起来还可以：

色调（上升、下降、无所谓）

饱和

光度

---

如果你不能决定饱和度或亮度的接近度是否比色调的接近度更重要，那么你会遇到与RGB相同的问题；在三维空间中，排序是不明确的。但HSL比RGB更能感知价值观的“亲密度”。

这似乎有点注定；RGB是一个三维值，因此将其排序为线性顺序的正确方法似乎不明确。您对其他方法持开放态度吗？那么您是否有一个公式来计算差异或为颜色提供某种“值”？来自

color diff

的函数只需获取两个实验室值并输出一个从1到100的差异值。1视觉上相同。100在视觉上是相反的。当然，这会给你一个线性值，但不同程度的光谱不会给你类似色调的颜色。另外，你必须选择一个任意的起点。这似乎有点注定了；RGB是一个三维值，因此将其排序为线性顺序的正确方法似乎不明确。您对其他方法持开放态度吗？那么您是否有一个公式来计算差异或为颜色提供某种“值”？来自

color diff

的函数只需获取两个实验室值并输出一个从1到100的差异值。1视觉上相同。100在视觉上是相反的。当然，这会给你一个线性值，但不同程度的光谱不会给你类似色调的颜色。另外，你必须选择一个任意的起点。这很有趣——我会给它一个机会，然后再报告。谢谢这很有趣，我会试一试，然后再报告。谢谢