Javascript 给定一个随机十六进制颜色列表，根据“排序”；“相似性”；

例如，此十六进制值列表：

{
"colors" : [{"hex"   : "#fe4670"},
            {"hex"   : "#5641bc"},
            {"hex"   : "#d53fc3"},
            {"hex"   : "#6b5e09"},
            {"hex"   : "#4dd685"},
            {"hex"   : "#88d63f"},
            {"hex"   : "#eb93f3"},
            {"hex"   : "#f44847"},
            {"hex"   : "#32d159"},
            {"hex"   : "#6e9bde"},
            {"hex"   : "#c3ec64"},
            {"hex"   : "#81cce5"},
            {"hex"   : "#7233b6"},
            {"hex"   : "#bb90c3"},
            {"hex"   : "#728fde"},
            {"hex"   : "#7ef46a"},
            {"hex"   : "#f7cfff"},
            {"hex"   : "#c8b708"},
            {"hex"   : "#b45a35"},
            {"hex"   : "#589279"},
            {"hex"   : "#51f1e1"},
            {"hex"   : "#b1d770"},
            {"hex"   : "#db463d"},
            {"hex"   : "#5b02a2"},
            {"hex"   : "#909440"},
            {"hex"   : "#6f53fe"},
            {"hex"   : "#4c29bd"},
            {"hex"   : "#3b24f8"},
            {"hex"   : "#465271"},
            {"hex"   : "#6243"},
            {"hex"   : "#dbcc4"},
            {"hex"   : "#187c6"},            
            {"hex"   : "#1085e2"},
            {"hex"   : "#b521e9"},
            {"hex"   : "#4bd36d"},             
            {"hex"   : "#11bc34"},
            {"hex"   : "#455c47"},
            {"hex"   : "#a71bbf"},
            {"hex"   : "#988fc2"},
            {"hex"   : "#226cfe"}]
}

理想情况下，它应该分为“绿色”、“蓝色”、“紫色”等

我还没有想出一个很好的方法来把他们分组。将颜色转换为HSV，然后按色调排序，然后是Sat和Val，效果几乎不错，但也有一些例外：

我读过的另一种方法是将它们转换为实验室颜色空间，然后计算三角形。我在这方面取得了多种成功：

---

（这是根据一种颜色对整个列表进行排序）。我想根据每种颜色对每种颜色的距离进行排序。

下面的示例选择第一种颜色作为比较颜色。它首先将该颜色添加到一个新数组中，然后遍历其余颜色，比较寻找最相似颜色的颜色

对于它迭代的每种颜色，它都会将比较中的第二种颜色中的红色从第一种颜色中减去，然后是绿色，然后是蓝色。然后找到绝对值（没有负数）。然后将这些值相加，再除以三。这个数字是两种颜色之间的平均差值

一旦找到最接近的颜色，它将选择该颜色作为新的比较颜色，将其从原始颜色数组中移除，并将其推送到已排序的数组中。它会一直这样做，直到没有颜色为止

它确实需要一些工作，正如在提供更大的数据集时所看到的，但这是我昨晚仅有的时间。我会继续努力，直到我有更好的东西

const sort=data=>{
数据=对象。分配（[]，数据）；
常量排序=[data.shift（）]；
while（data.length）{
常数[a]=排序，c={d:无穷大}；
for（让[i，b]为对象条目（数据））{
const average=Math.floor((
数学abs（a.r-b.r）+
数学abs（a.g-b.g）+
数学abs（a.b-b.b）
) / 3);
if（平均值{
document.body.insertAdjacentHTML（'beforeend'，'${title}'）；
对于（让c表示数据）{
document.body.insertAdjacentHTML（'beforeend'，`'）；
}
回归试验；
}
常数数据=[
{“hex”：“fe4670”}，{“hex”：“5641bc”}，{“hex”：“d53fc3”}，{“hex”：“6b5e09”}，
{“hex”：“#4dd685”}，{“hex”：“#88d63f”}，{“hex”：“#eb93f3”}，{“hex”：“#f44847”}，
{“hex”：“#32d159”}，{“hex”：“#6e9bde”}，{“hex”：“#c3ec64”}，{“hex”：“#81cce5”}，
{“hex”：“#7233b6”}，{“hex”：“#bb90c3”}，{“hex”：“#728fde”}，{“hex”：“#7ef46a”}，
{“hex”：“#f7cfff”}，{“hex”：“#c8b708”}，{“hex”：“#b45a35”}，{“hex”：“#589279”}，
{“hex”：“#51f1e1”}，{“hex”：“#b1d770”}，{“hex”：“#db463d”}，{“hex”：“#5b02a2”}，
{“hex”：“#909440”}，{“hex”：“#6f53fe”}，{“hex”：“#4c29bd”}，{“hex”：“#3b24f8”}，
{“hex”：“#465271”}，{“hex”：“#6243”}，{“hex”：“#dbcc4”}，{“hex”：“#187c6”}，
{“hex”：“#1085e2”}，{“hex”：“#b521e9”}，{“hex”：“#4bd36d”}，{“hex”：“#11bc34”}，
{“十六进制”：“#455c47”}，{“十六进制”：“#a71bbf”}，{“十六进制”：“#988fc2”}，{“十六进制”：“#226cfe”}
].reduce（（m，e）=>（m.push）对象分配（e{
r:parseInt（e.hex.substring（1,3），16）| | 0，
g:parseInt（例如十六进制子串（3，5），16）| | 0，
b:parseInt（e.hex.substring（5，7），16）| | 0
}))，m），[]）；
常量bigdata=（（）=>{
常量数据=[]；
const rand=（）=>Math.floor（Math.random（）*256）；
对于（设i=0；i<1000；++i）{
push（{r:rand（），g:rand（），b:rand（）}）；
}
返回数据；
})();
测试（'Unsorted'，data）（'Sorted'，sort（data））（'A bigdata'，sort（bigdata））
swatch{显示：内联块；边框：1px实心；左边距：1px；边距顶部：1px；宽度：20px；高度：20px；}
h2{margin:0；font-family:Verdana，Tahoma，“Sans-Serif”}
仅此而已（我想你已经读过这篇文章了）