Generate nice random colors

random-color.js

const randomColor = (() => {
  "use strict";

  const randomInt = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  return () => {
    var h = randomInt(0, 360);
    var s = randomInt(42, 98);
    var l = randomInt(40, 90);
    return `hsl(${h},${s}%,${l}%)`;
  };
})();

Generating random colors by just using Math.random values often results in dark and unattractive colors. The randomColor function applies some restrictions in order to return more vibrant and appealing colors.

An example of use can be seen on this demo.

@bendc

Thank you!!

Thank you !

This is really nice!

Thank you :D

First of all, thanks for the function. I'm trying it in Dart (Flutter), in this CodePen.

Generating random colors by just using Math.random values often results in dark and unattractive colors. The randomColor function applies some restrictions in order to return more vibrant and appealing colors.

Just curious, the values of the restrictions (42, 98, etc.) - how did you select them?

An example of use can be seen on this demo.

The url of the demo no longer works.

First of all, thanks for the function. I'm trying it in Dart (Flutter), in this CodePen.

Generating random colors by just using Math.random values often results in dark and unattractive colors. The randomColor function applies some restrictions in order to return more vibrant and appealing colors.

Just curious, the values of the restrictions (42, 98, etc.) - how did you select them?

I eyeballed them -- feel free to tweak them!

An example of use can be seen on this demo.

The url of the demo no longer works.

Here you are :)

How could I use a seed to generate the same color with the same input, but still have it be nice and vibrant?

Thanks for the snippet. Is there a version for directly generating the hex format instead of the hsl format? I need to apply the generated colors on <input type="color">, which only accepts the hex format.

I can probably add a "hsl to hex" function into the snippet, but that would make the snippet unnecessarily longer.