Random Hex Color (semi-golfed)

document.body.innerHTML += 'click anywhere...'

onclick = () =>
  document.body.style.background = 
    `#${Math.random().toString(16).substr(-6)}`

I golfed this snippet slightly for no reason in particular. I recently posted a nice readable way to make random hsl colors. This snippet generates a random hexidecimal color.

How it works

Math.random() // random number between 0 and 1

.toString(16) // convert to hex string (something like "0.2d6bcee4198d4")

.substr(-6) // grab the last 6 characters

Here is a non-golfed version:

const instructionsEl = document.createElement('p');
instructionsEl.innerHTML = 'click anywhere...';
document.body.appendChild(instructionsEl);

const randomHexColor = () => 
  `#${Math.random().toString(16).substr(-6)}`;

document.addEventListener('click', () => {
  document.body.style.background = randomHexColor();
});

See more stuff like this over @ Snippet Zone

Blog

Random Hex Color (semi-golfed)

Zevan Rosser

How it works

Join Our Newsletter. No Spam, Only the good stuff.

Related