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に変換してから、2番目の配列の配列を作成することでした。各値は[i, difference]です。iは、differenceの値が参照する最初の配列の元の場所を表します。そして、difference値は、元の配列のその特定の色と黒の間のCIEDE2000によって計算される差です。

次に、2番目の配列を昇順でソートします。問題は、これが私が探しているソートされた配列にはならないということです。

次のシナリオを想像：

オリジナル色：[[dark blue], [orange], [light blue], [slightly brighter orange]]（私は、明確にするためにRGB値を書いていないよ。）

問題はブルースということです[[dark blue], [orange], [slightly lighter orange], [light blue]]

に分類されます分割されます。ダークブルーは実際には視覚的に黒色に最も近く、薄い青色が最も遠いので、それらは分割されます。たとえ彼らがオレンジから遠く離れていても、黒とは異なる量のものです。

元のカラー配列を並べ替えて、適切に並べ替えられた配列を返すにはどうすればよいですか？

上記のようにソートする必要があります。ブルースは、オレンジの前または後にある場合、それは問題ではありませんが

[[dark blue], [light blue], [orange], [slightly lighter orange]]

。彼らがすべて一緒である限り。実際のシナリオでは、私は何千もの色を持っていました。

ありがとうございます！

Answer 1

他の方法がある場合は、代わりにHSLに変換してみてください。 HSLについての素晴らしい点は、代わりに並べ替えることができる線形の "色相"値を与えることです。そうすれば、お互いに隣り合った色が似ていることが保証されます。彩度

1. 色相（重要ではありません、降順、昇順）
2. ：トリッキーなことは、今同じ色相内彩度や明度の注文方法になりますが、この順でソートすることは、おそらくOKになります
3. 光度

あなたは彩度や明度での近さは、色相の近さよりも重要であるかどうかを決めることができない場合、あなたはRGBと同じ問題で立ち往生しています。順序付けは3次元空間内であいまいである。しかし、HSLは、RGBよりも、値の「近い」感覚に対して、より穏やかです。