Generating Random Colors in JS + Dark, Light colors

Generating random colors in JS easily with all representations.

Generating random colors — HEX

function generateRandomColorHex() {
  return "#" + ("00000" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16)).slice(-6);
}

Example generated color: #958e00

Explanation

Color hexes range from #000000 (black) to #FFFFFF (white). In decimal, 0xFFFFFF is equal to 16⁶ -1. This is the maximum value a HEX color can have.

Like many solutions suggest around the internet, the easiest way is to randomize a decimal number and convert it back to a hex value, however, it’s possible to produce an invalid color if you’re not careful.

This is why we pad the random HEX number with “00000” at the start, since Math.floor(Math.random() * Math.pow(16, 6)).toString(16) may produce HEX numbers with less than 6 digits (in the worst case, “0”).

We then slice out the last 6 digits as required by the color hex to get what we want. There are other shorter solutions using ES6, but this works across all browsers.

Generating random colors — RGB

function generateRandomColorRgb() {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);
  return "rgb(" + red + ", " + green + ", " + blue + ")";
}

Example generated color: rgb(65, 170, 178)

Explanation

Both color hexes and R G B values are a combination of red (R), green (G), and blue (B). Each primary color can range from 0 to 255 values.

Here, all we need to do is randomize each primary color, floor it to stay within range, then add everything together.

Generating random colors — HSL

function generateRandomColorHsl() {
  const hue = Math.floor(Math.random() * 360);
  const saturation = Math.floor(Math.random() * (100 + 1)) + "%";
  const lightness = Math.floor(Math.random() * (100 + 1)) + "%";
  return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
}

Example generated color: hsl(78, 96%, 32%)

Explanation

HSL representation uses the hue which ranges from 0 to 359 (angle in the color wheel), saturation which ranges from 0 to 100%, and lightness which also ranges from 0 to 100%

The code above implements the random values for each parameter. For saturation and lightness, we do 100 + 1 because the value can be 100%. You could also do Math.round(Math.random() * 100), but the values 0 and 100 wouldn’t have the same probability as the numbers in-between.

Generating random dark colors

HEX

function generateDarkColorHex() {
  let color = "#";
  for (let i = 0; i < 3; i++)
    color += ("0" + Math.floor(Math.random() * Math.pow(16, 2) / 2).toString(16)).slice(-2);
  return color;
}

Example generated color: #7e5e3a

RGB

function generateDarkColorRgb() {
  const red = Math.floor(Math.random() * 256/2);
  const green = Math.floor(Math.random() * 256/2);
  const blue = Math.floor(Math.random() * 256/2);
  return "rgb(" + red + ", " + green + ", " + blue + ")";
}

Example generated color: rgb(23, 5, 95)

HSL

function generateDarkColorHsl() {
  const hue = Math.floor(Math.random() * 360);
  const saturation = Math.floor(Math.random() * (100 + 1)) + "%";
  const lightness = Math.floor(Math.random() * (100/2 + 1)) + "%";
  return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
}

Example generated color: hsl(340, 48%, 23%)

Explanation

As mentioned before, both HEX and RGB colors are an addition of red, green, and blue (primary colors). In rgb() function, each color is explicitly written with a decimal value, however, in HEX, it follows the pattern: #FF FF FF (that’s why #FF0000 is red, #00FF00 is green, and #0000FF is blue). Once again, each primary color ranges from 0 to 255 (16² -1) for both cases.

In these colors, 0 is dark and 255 is the lightest. We can now use this information to build the functions, as we just need to randomize each color up to 16²/2.

For HSL representation, we simply limit the last parameter (lightness) to 100%/2. Easy enough, right?

Generating random light colors

HEX

function generateLightColorHex() {
  let color = "#";
  for (let i = 0; i < 3; i++)
    color += ("0" + Math.floor(((1 + Math.random()) * Math.pow(16, 2)) / 2).toString(16)).slice(-2);
  return color;
}

Example generated color: #acdddf

RGB

function generateLightColorRgb() {
  const red = Math.floor((1 + Math.random()) * 256/2);
  const green = Math.floor((1 + Math.random()) * 256/2);
  const blue = Math.floor((1 + Math.random()) * 256/2);
  return "rgb(" + red + ", " + green + ", " + blue + ")";
}

Example generated color: rgb(233, 166, 149)

HSL

function generateLightColorHsl() {
  const hue = Math.floor(Math.random() * 360);
  const saturation = Math.floor(Math.random() * (100 + 1)) + "%";
  const lightness = Math.floor((1 + Math.random()) * (100/2 + 1)) + "%";
  return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
}

Example generated color: hsl(302, 97%, 77%)

Explanation

If you managed to follow along with the explanation with the dark colors, it’s analogous for light colors. The only difference here is, we want the colors to fall in the second half of each parameter.

Hence, instead of Math.random(), we do (1 + Math.random()).

As always, if you have any questions, I’ll be sure to reply to them!