Subscribe

Vanilla JavaScript random colours

✍️

Learn how to get random hex colours in JavaScript

28 Oct, 2020 Β· 3 min read

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

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

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!

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

TypeORM viewEntity

30 Mar, 2022 Β· 5 min read

TypeORM viewEntity

The Record Utility Type in TypeScript

12 Mar, 2022 Β· 3 min read

The Record Utility Type in TypeScript

Join 1371 devs and subscribe to my newsletter