Generate a Random Color in JavaScript

In this trick, we will see how we can generate the random number in javascript and make a random color code from it.

We will use the Math.floor(), Math.random() and toString() methods. The Math.floor() method is used to round the number down to the nearest, the Math.random() method is used to generate the random number, and the toString() method used to convert the string object to string.

Generate Random Color in JavaScript

We will make a function with logic to use these methods to return a 6-digit of random numbers because the hex color code is in 6-digit numbers format. See the following javascript code snippet to generate the random color.

<!DOCTYPE html>
<html>
<body>

<h1>Generate Random Color</h1>

<p id="color"></p>
<button onclick="randomColor()">Generate Random Color</button>

<script>

function randomColor() {
  const color = Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroundColor = "#" + color;
  document.getElementById("color").innerHTML = "#" + color;
}

</script>

</body>
</html>

So in the above code, we take an <p> element with the id of “color” and then take a button to generate the color with onclick() function.

Then made a randomColor() function using the Math functions and set the generated color to the body background and also show it in the <p> element.

That’s it!!!

Being Tricky 😉

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Generate Random Color in JavaScript

Leave a Reply Cancel reply