sorting - Javascript - sort colors based on visible difference -

i have array of rgb values:

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

i wanting arrange rgb values based on visible difference using ciede2000 part of https://github.com/markusn/color-diff similar colors close together.

what have been doing far converting rgb values lab, creating second array of arrays. each value [i, difference] i represents original place in first array difference value refers to. , difference value difference calculated ciede2000 between specific color in original array , black.

then sort second array ascending difference. problem doesn't result in sorted array i'm looking for.

imagine following scenario:

original colors: [[dark blue], [orange], [light blue], [slightly brighter orange]] (i'm not writing rgb values clarity sake.)

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

the problem blues split up. split because dark blue closest visually black , light blue farthest. though far away orange, of differing amounts away black.

so how can sort original colour array return sorted array?

the above should sorted as:

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

although doesn't matter if blues before or after oranges. long together. in real scenario have thousands of different colors.

thanks!

if open other approaches, try converting color hsl instead. nice thing hsl gives linear "hue" value sort instead. should ensure have similar colors next each other. tricky thing on how order saturation , luminosity within same hue, sorting in order ok:

1. hue (ascending, descending, doesn't matter)
2. saturation
3. luminosity

if can't decide whether closeness in saturation or luminosity more important closeness in hue, you're stuck same problem rgb; ordering ambiguous within three-dimensional space. hsl more sane rgb perceived "closeness" of values.