🎨 Generate Random Colors in JavaScript

I’ve been playing around with <canvas> lately and have had a frequent need to generate random colours. I have written my own functions for doing this, which I now use all the time. The first function below generates a simple array of RGB values, while the second snippet generates a hexadecimal string.

Generating RGB Values

The snippet for generating RGB values is quite simple. We use the Math.random() function to generate a 3-element Array of whole numbers between 0 and 255. It can be tricky to wrap your head around how to get a random integer between 0 and 255 using the Math.random() function so here is an expanded version of the process.

// Decimal value between 0 and 1
var rand = Math.random();

// Decimal value between 0 and 256 exclusive
var randFloat = rand*256;

// Whole number between 0 and 255 inclusive
var randInt = Math.floor(randFloat);

We can now use this technique in our colour generation snippet.

/**
 * Returns an RGB colour of the
 * form [ 255, 255, 255 ]
 */
var randomColor = function() {
  var c = [ ];

  for (var i=0; i<3; i++) {
    // Push random integer between 0 and 255
    c.push(Math.floor(Math.random()*256));
  }

  return c;
};

As you can see, we multiply the random number by 256 to transform its range from (0, 1) to (0, 256). We then make use of Math.floor() which rounds the number down to the nearest integer, leaving a whole number with a range of [0, 255].

Generating a HEX Value

Hexadecimal colour strings are made up of six hexadecimal digits. Each digit can be one of fifteen possible values ranging from 0-9 or A-F. The following snippet is similar to the first one except instead of picking a random integer between 0 and 255 it generates a random integer between 0 and 15 which is then used as an array index that maps to one of the fifteen digits.

/**
 * Returns a HEX colour of the
 * form "#AAAAAA"
 */
var randomColor = function() {

  // Define possible hex digits
  var chars = [
    '0', '1', '2', '3',
    '4', '5', '6', '7',
    '8', '9', 'a', 'b',
    'c', 'd', 'e', 'f'
  ];

  var c = [ ];

  for (var i=0; i<6; i++) {
    // Choose random digit
    var index = Math.floor(Math.random()*chars.length);

    // Push random digit to array
    c.push(chars[index]);
  }

  // Transform the array to the form "#AAAAAA"
  return '#'+c.join('');
};

Wrap Up

And that’s it. Feel free to take these snippets and use them in your own work. If you have any questions, feel free to leave a comment below.

Happy Coding :)

If you enjoyed this tutorial, please consider sponsoring my work on GitHub 🤗