# Vanilla JavaScript random colours

Ever wondered how you can create random colours using Vanilla JavaScript?

The other day we made a [JavaScript data-attribute filter](https://daily-dev-tips.com/posts/vanilla-javascript-data-attribute-filters/), and I wanted to give each block a random colour.

So today we are going to do just that.

The end result will be as this Codepen (Open or reload to see random new colours)

%[https://codepen.io/rebelchris/pen/oNLBNPd]

## JavaScript random hex colour

In our example, we will be generating a random hex number. These can be any six-characters from 0-9 and A-F.

Luckily in JavaScript, it's even easier to create a random hex string.

Let's break it down.

```js
Math.random()*10000000
```

This will give us a random number which will look like this:

```js
2773929.134011086
9192315.941572387
```

The next step is to floor this number to we will only get the first part.

```js
Math.floor(Math.random()*10000000)
```

Which would result in the following for the above examples:

```js
2773929
9192315
```

Now we need to create strings else we would only have numbers and one too many.

We can use the `toString()` method and specify the `radix` parameter as 16.

This will convert `254` to `fe`, for instance.

```js
Math.floor(Math.random()*10000000).toString(16)
```

This will get results like:

```js
'2a53a9'
'8c437b'
```

Awesome, Perfect hex values!

## Random colour blocks in JavaScript

Now let's give our blocks all a random colour.

```html
<ul>
  <li data-rating="4"><span>item 1</span><i>rating 4</i></li>
  <li data-rating="2"><span>item 2</span><i>rating 2</i></li>
  <li data-rating="3"><span>item 3</span><i>rating 3</i></li>
  <li data-rating="1"><span>item 4</span><i>rating 1</i></li>
  <li data-rating="4"><span>item 5</span><i>rating 4</i></li>
  <li data-rating="1"><span>item 6</span><i>rating 1</i></li>
  <li data-rating="4"><span>item 7</span><i>rating 4</i></li>
  <li data-rating="4"><span>item 8</span><i>rating 4</i></li>
  <li data-rating="1"><span>item 9</span><i>rating 1</i></li>
  <li data-rating="5"><span>item 10</span><i>rating 5</i></li>
  <li data-rating="1"><span>item 11</span><i>rating 1</i></li>
  <li data-rating="2"><span>item 12</span><i>rating 2</i></li>
  <li data-rating="3"><span>item 13</span><i>rating 3</i></li>
  <li data-rating="1"><span>item 14</span><i>rating 1</i></li>
  <li data-rating="3"><span>item 15</span><i>rating 3</i></li>
  <li data-rating="5"><span>item 16</span><i>rating 5</i></li>
  <li data-rating="3"><span>item 17</span><i>rating 3</i></li>
  <li data-rating="5"><span>item 18</span><i>rating 5</i></li>
  <li data-rating="1"><span>item 19</span><i>rating 1</i></li>
  <li data-rating="2"><span>item 20</span><i>rating 2</i></li>
</ul>
```

Now we need to get all our list items and loop over them.

```js
const elements = document.querySelectorAll("li");

[...elements].forEach((element) => {
  element.style.backgroundColor = "#" + (Math.floor(Math.random() * 1e7).toString(16));
});
```

It might not have the prettiest colours, but at least they're random!

You might have noted the `1e7` which is a shorthand Decimal Base Exponent.

It means one followed by seven zeroes.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)