# 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.