A better way to generate a random color with vanilla JS

On Wednesday, I wrote about how to generate a random color using vanilla JS.

Wes Bos replied to me on Twitter to let me know about an even better approach that he picked up from Paul Irish.

var createColor = function () {
	return '#' + Math.floor(Math.random() * 16777215).toString(16);
};

Let’s break down how this works.

First, we use Math.random() to generate a random number between 0 and 1.

var createColor = function () {
	return Math.random();
};

Next, we multiply it by a longish number. Paul Irish uses 16777215 because it’s the decimal representation of ffffff.

var createColor = function () {
	return Math.random() * 16777215;
};

This gives us a returned value that looks something like this (it varies each time because of Math.random(), but follows a similar pattern).

14220420.962586708

Next, we need to remove the decimal places. There are a few ways to do this, including parseInt(), but Paul’s approach uses Math.floor() to get the smallest whole number from a number with decimals.

var createColor = function () {
	return Math.floor(Math.random() * 16777215);
};

We’re almost there!

Now we use the toString() method to convert the number to a string. The method accepts an optional argument for the radix, the mathematical base used for representing numeric values. A value of 16 gets you a hexcode value (with numbers and letters).

var createColor = function () {
	return Math.floor(Math.random() * 16777215).toString(16);
};

And finally, we add the leading hash.

var createColor = function () {
	return '#' + Math.floor(Math.random() * 16777215).toString(16);
};

Here’s a demo on CodePen. I also added this to the Vanilla JS Toolkit.