Create Random Colors

This essay was implemented while exploring some color functions - no real serious use-case but for some fun.

Generating random colors algorithms are available in many articles. Here is a summary on some functions that have different color effects.

Bright colors

When you need bright colors the hsl notation for colors can be used by specifying a fixed saturation and lightness ond only vary the hue factor. You can use this for dark and light colors as well.

  brightColorValue = `hsl(${Math.floor(Math.random() * 256)}, 100%, 50%)`;
  lightColorValue = `hsl(${Math.floor(Math.random() * 256)}, 100%, 75%)`;
  darkColorValue = `hsl(${Math.floor(Math.random() * 256)}, 100%, 25%)`;

Dark colors

All colors

const colValue =
  '#' + 
  ('000000' + Math.floor(Math.random() * 0x1000000).toString(16))
  .slice(-6);

See also

• HSL Color Calculator https://www.w3schools.com/colors/colors_hsl.asp

Tags