How To Generate Random Colors Using Variables In JavaScript?

Spread the love

If you are trying to generate random colors using JavaScript, then you are doing a quite interesting task. JavaScript is really a fun as you can play with HTML, CSS using variables and can create actions by just clicking or many other commands.

Open a Notepad or any editor you prefer. I prefer Sublime so i am going to use it. Let’s start by creating a simple page and name it as change-color.html.

Working With HTML

Now, lets start with basic HTML page. Type the below code in your file :

<!DOCTYPE html>
<html>
<head>
   <title>Change Random Colors With Javascript</title>
</head>
<body>

</body>

</html>

Now create a <div> and assign some id to it, say random-div. To create such <div> copy the code from below and paste it between <body> </body> tag.

<div id="random-div" style="width:300px; height:300px; background-color:red;">
   <p> This is the paragraph. </p>
</div>

Now create a button tag below the <div> to change <div> color on clicking. Assign some id to this button also.

<button id="random-but"> Click Me To Change Color </button>

The change-color.html will look like this in browser.

generate random colors using JavaScript

Working With JavaScript

We will now write JavaScript code to connect the button and div. Copy and paste the code written below after your <button> and before </body> tag.

<script type="text/javascript">
		document.getElementById("random-but").onclick=function()
		{
			var x, y, z, random_col;
			x = Math.round(Math.random()*256);
			y = Math.round(Math.random()*256);
			z = Math.round(Math.random()*256);
			random_col = 'rgb('+x+','+y+','+z+')';

			document.getElementById("random-div").style.backgroundColor = random_col;
		}
	</script>

Explanation of Code to Generate Random Colors using JavaScript

RGB code for colors is like rgb(x,y,z). Here x,y & z are variables from value 1-256 and when their value changes the color also changes. So we can change the color by changing these values on every click.

Here, first i generate a function on clicking the button. When we click on an element with id=”random-but” a function will execute.

Then i define four variables : x,y,z,random_col. To x,y & z i am assigning some value that will fetch random numbers using a function Math.random(). This function will get random value between 0-1 (The value will be in decimals). But as we want a value between 1-256, we will multiply this number with 256. So for the lowest number 0 we will get 0 and for the highest value of Math.random() we will get 256.

But even on multiplying this number with 256, it will be a decimal value. So we can further apply a function Math.round() to it to get a whole number. That’s why give variable x a value by calculating these things.

x = Math.round(Math.random()*256);

Similarly we will assign the same functions to variable y & z.

For variable random_col, we will assign a rgb value to it, i.e. it should pass the value rgb(x,y,z) to the <div> background color that we want to change.

random_col = 'rgb('+x+','+y+','+z+')';

Finally we will assign this value to <div id=”random-div”> by :

document.getElementById("random-div").style.backgroundColor=random_col;

Complete Code : Generate Random Colors Using JavaScript

Copy and paste the below code to run your script to change background colors. Similarly you can change font color, border color, border radius, font size, etc.

<!DOCTYPE html>
<html>
<head>
   <title>Change Random Colors With Javascript</title>
</head>
<body>
	<div id="random-div" style="width:300px; height:300px; background-color:red;">
   		<p> This is the paragraph. </p>
	</div>

	<button id="random-but"> Click Me To Change Color </button>

	<script type="text/javascript">
		document.getElementById("random-but").onclick=function()
		{
			var x, y, z, random_col;
			x = Math.round(Math.random()*256);
			y = Math.round(Math.random()*256);
			z = Math.round(Math.random()*256);
			random_col = 'rgb('+x+','+y+','+z+')';

			document.getElementById("random-div").style.backgroundColor = random_col;
		}
	</script>
 
</body>
 
</html>

I am a PHP Developer and WordPress lover. I love using CSS and JavaScript a lot in my work as I like animation and love things moving in a webpage.

You can CONTACT ME HERE.

Divyanshi Juneja

If you have any doubt or some better method, please comment below. 🙂

Was this post helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *