Nice Random Colors in Javascript

I needed to generate random colours for series in a chart, so my initial start was generating a random RGB hex string. However, this resulted in 2 problems:

  1. RGB definitions seem to skew dark, and
  2. No guarantee that similar shades wouldn’t be chosen

To solve 1, instead of using RGB I used HSL. This allows you to fix the Saturation and Light, and just change the Hue (a value between 0-360), meaning the colours can be set to be a bit lighter.

For 2, since the HSL definition automatically takes the modulo of the value passed through, if we are able to find a suitable value we can just increment it by this each time and generate colours that are different enough.

So we have the following code:

var hue = 0;

function getRandomishColor() {
     hue += 222.5;
     return 'hsla(' + hue + ', 75%, 50%, 0.5)';
}
Advertisements