Vanilla JavaScript random colours

— 10 minute read

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

The other day we made a JavaScript data-attribute filter, 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)

See the Pen Vanilla JavaScript random colours by Chris Bongers (@rebelchris) on CodePen.

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.

Math.random()*10000000

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

2773929.134011086
9192315.941572387

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

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

Which would result in the following for the above examples:

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.

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

This will get results like:

'2a53a9'
'8c437b'

Awesome, Perfect hex values!

Random colour blocks in JavaScript

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

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

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 or Twitter