DEV Community

Cover image for JS: How to implement a Random Background Color Change to make your sites more professional
Lorenzo
Lorenzo

Posted on • Edited on

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

#webdev #tutorial #javascript #codequality

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (6)

Collapse
 
jackherizsmith profile image
Jack • • Edited

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
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
lorenzoblog profile image
Lorenzo •

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

Collapse
 
jonrandy profile image
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()})`
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lorenzoblog profile image
Lorenzo •

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

Collapse
 
klajdi44 profile image
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} )`;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lorenzoblog profile image
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.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

nenepo profile image

Optimizing React Re-Renders: Best Practices for Performance

Nenepo -

dotnetfullstackdev profile image

Experimental attribute in C# is a powerful tool : Let's explore

DotNet Full Stack Dev -

railsdesigner profile image

Store UI State in localStorage with Stimulus

Rails Designer -

koolkamalkishor profile image

Evaluating Medical Retrieval-Augmented Generation (RAG) with NVIDIA AI Endpoints and Ragas

KAMAL KISHOR -