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