DEV Community

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

Posted on • Updated 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 ๐Ÿš€

devlorenzo image

The ultimate Cheat sheets compilation (200+) - ๐Ÿ”ฅ๐ŸŽ / Roadmap to dev ๐Ÿš€

DevLorenzo ใƒป Mar 2 ใƒป 17 min read

#productivity #webdev #beginners #javascript

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
 
devlorenzo profile image
DevLorenzo •

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
 
devlorenzo profile image
DevLorenzo •

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
 
devlorenzo profile image
DevLorenzo •

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

alexmercedcoder profile image

Deep Dive into Functional Programming in Javascript

Alex Merced -

laznic profile image

Building a self-creating website with Supabase and AI

Niklas Lepistรถ -

coderonfleek profile image

Sending Data in HTMX Requests (3 Ways)

Fikayo Adepoju -

mathuraditya7 profile image

Deploying Hono Js App on Vercel

Aditya Mathur -