Maximize color difference

[jareware]

This looks exactly like a lib that I'd soon need!

I see there's an option for providing a seed for having deterministic results, but is there any way of specifying "I want 5 colors (with these settings) that are as different from each other as possible"? So that if I ask for 3 colors, I won't get 3 different shades of red.

[davidmerfield]

No, not yet. This is number 1 on the to-do list. I'd be happy to hear your ideas!

[jareware]

Hmm, this might take a bit more understanding of color spaces, but my naive solution would be picking a random starting color, and then solving the next point that's furthest away within the 3D search space (from which some regions would be excluded, as we don't want the murky browns etc). Then repeat for as many points as you need.

Sounds like an O(n) algorithm, but I'd have to better understand how to avoid the murky regions etc.

Will be watching this space. ;)

[davidschlachter]

What could work well would be to convert the colour to HSL, then split the 360º of hue to get the number of colours desired.

Here's a pretty kludgy implementation: https://jsfiddle.net/32obz8jd/ (hit "Run" to get new colours)

I use something similar on my website to adjust the luminosity of the random colour for the menu.

[breznak]

Hi,
I'm very interested in this functionality as well.
To my knowledge, there is no other JS library providing generation of distinct colors.

There is a lot of interesting research on the "color perception" and "how to generate easily distinguishable set of colors":

• http://stackoverflow.com/questions/470690/how-to-automatically-generate-n-distinct-colors (answer 2)
• http://graphicdesign.stackexchange.com/questions/3682/where-can-i-find-a-large-palette-set-of-contrasting-colors-for-coloring-many-d
• http://stackoverflow.com/questions/7251872/is-there-a-better-color-scale-than-the-rainbow-colormap

It boils down to: RGB (even HSV) does not suitably model human color-perception; for smaller sets, it's best to use man-made (=evaluated) fixed color pallet and pick from it; for arbitrary number, use some specialized algorithm.

Note: In my opinion the idea of dividing HUE to a fixed sized steps does not work well. This is a problem in DyGraphs why I came here: https://github.com/danvk/dygraphs/blob/f71d9959ee259394813cc4434674e95033054842/src/dygraph.js#L1287 My aim is to create a better solution in JS and then use randomColor in DyGraphs. The current problematic results can be seen here: https://raw.githubusercontent.com/wiki/nupic-community/nupic.visualizations/images/nupic_visualizations.png

You can try a nice working solution at: http://phrogz.net/css/distinct-colors.html
I hope we could reuse the code: http://phrogz.net/JS/color_conversion.js to implement this feature.

[jackycute]

+1

[joadr]

+1

[Offirmo]

You might want to check chroma-js

[davidmerfield]

I just closed #87. Here's why:

It looks like the approach in this pull request is to keep generating colors until you find one that is dissimilar enough to any existing colors. This approach entails lots of unnecessary computation.

Here's one way to implement this feature:

I'd divide the 'attractive' color space into region, one region per generated color. For each region within the 'attractive' color space, pick a color from within.

Afterwards, we could then sort the generated colors to make neighbors as distinct as possible.

[jcubic]

+1

[davidmerfield]

Merged #106, closing this for now

[Angelk90]

@davidmerfield : Are there any news?
Link: codesandbox