JS: How to implement a Random Background Color Change to make your sites more professional

Hello World! I decided to start a new series! - A CSS/JS trick in 5 minutes - It will be a concentrate of quick and useful tricks you can apply to your website. I will try to never exceed 20 lines of code and to always go straight to the point. I will start very easy, how to implement a random background color change.

For that we just need a javascript function:

function random_bg_color() {
    let x = Math.floor(Math.random() * 256);
    let y = Math.floor(Math.random() * 256);
    let z = Math.floor(Math.random() * 256);
    let bgColor =  `rgb( ${x}, ${y}, ${z} )`;
    document.body.innerText = bgColor;

    document.body.style.background = bgColor;
}

setInterval(random_bg_color, 2000); // You can easily change Interval here

I think there nothing really difficult to explain, we create 3 random variables and assign them to the background. We just need to know how RGB system work (or like Jack said in the comments we could also use HSL).

RGB defines the values of red (the first number), green (the second number), or blue (the third number). The number 0 signifies no representation of the color and 255 signifies the highest possible concentration of the color. Pluralsight

document.body.innerText = bgColor;
This line of code serves to show RGB of the color on screen.

---

You can have here a live preview:
Click Me

---

Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)

---

Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀

Article No Longer Available

---

Subscribe to our newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Comments

[Jack]

Fun! It's also worth promoting HSL, which is a more intuitive way of reading colour in code. Something like

const getRandom = n => Math.random() * n;

function random_bg_color() {
  const h = getRandom(360);
  const s = getRandom(100);
  const l = getRandom(100);
  // ... etc
}

HSL is great because if you see for example 120, 50%, 70% you know you're going to see a pale pastel green, which isn't as obvious with hex/RGB (140, 217, 140).

[Lorenzo]

Thanks for the comment! I will try following this advice next time.

[Jon Randy 🎖️]

Try using syntax formatting on your posts (write javascript after the opening 3 backticks). Then it looks nice, like this:

const randomColor = `rgb(${[0,0,0].map(_=>~~(Math.random()*256)).join()})`

[Lorenzo]

I just wrote an article on that if you're interested
dev.to/devlorenzo/js-why-we-should...

[Klajdi Ajdini]

Nice, I would take a more modern approach to this and use const/let instead of var and use template literals instead of concatenating the values with +.

const  bgColor =  `rgb( ${x}, ${y}, ${z} )`;

[Lorenzo]

Yes, you're right. The only problem is that I have an Italian keyboard and backtick are difficult to use. But we should always use it.