-2

We are building an app that generates several random colors and we need to make sure that no two colors are close together. Are there any good libraries or algorithms for this? (JavaScript)

Daniel Driskill
  • 1
  • 1
    `We need to make sure that no two colors are close together`. Can you further explain what you mean by this? Elements on the page close together? Hue of the colors? What defines if something is close? Your question doesn't give us any direction. Make sure you read [how to ask a question](https://stackoverflow.com/help/how-to-ask) before asking. – cb64 Feb 27 '19 at 22:15
  • Possible duplicate of [Fastest formula to get Hue from RGB](https://stackoverflow.com/questions/23090019/fastest-formula-to-get-hue-from-rgb) – MrDeal Feb 27 '19 at 22:16
  • I agree with @cb64, "close" is too subjective, thus just getting hue from RGB and then comparing them in your way seems like the way to go here. – MrDeal Feb 27 '19 at 22:17
  • 1
    Use HSL instead of RGB. – Graham P Heath Feb 27 '19 at 22:18
  • 1
    Take a look at this question/answer: https://stackoverflow.com/questions/9018016/how-to-compare-two-colors-for-similarity-difference – Doug Deden Feb 27 '19 at 22:30

1 Answers1

2

No, there are no such libraries. You can easily convert between RGB, CMYK, and/or HST representations, but these do not map exceptionally well to the perceptions of the human visual system. For any cognitive definition of "close", you'll have notable variations in the algebra needed to compute a metric of nearness.

For illustration, research the offerings of a typical artist's color tools. You can see how the perception-based tools differ from the HST system. The 3-D mapping in the Munsell color "wheel" shows the assymetries in our perceptions. JND (just-noticeable difference) may be a single degree in one place, 5 degrees in another.

You also have the complications of variations among individuals -- not merely the various types of genetic color-blindness, but everyday differences among people. The 1/5-degree difference is not an absolute, merely my recollection of "threshold", the point at which 50% of people will notice a difference.

I live with this daily: my spouse is an artist, so we're sensitive to color descriptions. I'm more sensitive to changes in the blue-green part of the spectrum; my Other Half sometimes vetoes my clothing choices in the reddish range.

SUGGESTED SOLUTION

I'm taking a guess that you're going to use this for some sort of graphic representation, and you simply want your visual units to be varied and easily differentiated.

Don't "randomly generate" your colors. Rather, design a large palette of pre-defined colors. Place these in a similarity matrix of some sort (a simple HST adjacency will likely serve you well). Choose your colors as a group or in succession, but balance for how well they spread around the matrix, keeping a "buffer zone" around each. For instance, if you've chosen a particular color, then you will not choose any other color within 2 matrix units of that one.

You might even consult some web sites on graphic design to get palette ideas. This could enhance your application by making the colors not only easy to differentiate, but pleasant in combination.

Prune
  • 76,765
  • 14
  • 60
  • 81