Vanilla JavaScript random colours

Have you ever wondered how to create random colors using Vanilla JavaScript?

We made a JavaScript data-attribute filter. I wanted to give each block a random color.

So today, we are going to do just that.

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

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

JavaScript random hex color permalink

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

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

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 only to get the first part.

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

This 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';

Excellent, Perfect hex values!

Random color blocks in JavaScript permalink

Now let’s give our blocks all a random color.

<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 colors, but at least they’re random!

You might have noted the 1e7, a shorthand Decimal Base Exponent.

It means one followed by seven zeroes.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter