DEV Community

ahmadullah
ahmadullah

Posted on

How to generate random background color in JS

In this article, you're going to learn how to generate random colors in JS.
First of all, we need to add a button into our HTML file then add some css code after that make our hands dirty with JS.

<!--html part*!-->

<button>Generate Random color</button>
<h2>color code goes here</h2>

/*css part*/

button{
padding:10px;
background-color:cyan;
color:#fff;
}

Enter fullscreen mode Exit fullscreen mode

And now it turns to JS if you are familiar JS math function then you should know how to generate random numbers in JS.

Math.random()
Enter fullscreen mode Exit fullscreen mode

generates a random number between 0 and 1. here we use the string method to get a portion of generated number and text.

we can also generate random alphanumeric text using Math.random().
then we convert that into text and get 6 characters of it.
Here is the code.

const btn = document.querySelector('button');
const colorCode = document.querySelector('h2');
btn.addEventListener('click', function () {
    const random = Math.random().toString(16).substring(2, 8);
    let randomColor = `#${random}`;
    colorCode.textContent = randomColor;
    document.querySelector('body').style.backgroundColor = randomColor;
})
Enter fullscreen mode Exit fullscreen mode

I used

const random = Math.random().toString(16).substring(2, 8);
Enter fullscreen mode Exit fullscreen mode

in my code this code generates alphanumeric characters in HEXA Decimal format which is between 'a' up to 'f' and number from 0 up to 9;

Top comments (0)