Random Hex Color Generator Using HTML,CSS and JavaScript

Welcome to the Codewithrandom blog. In this blog, we learn how to create the Unlimited Random Color Generator and you can use this Color ode in your project. We use Html, Css, and JavaScript for this Random Hex Color Generator.

I hope you enjoy our blog so let's start with a basic HTML structure for the Random Color Generator.

HTML Code Random Color Generator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css"></link>
<title>Random Color Generator</title>
</head>
<body>
<div class="container">
<h1>Welcome to Random Color Generator</h1>
<p>Click on the HexCode to Copy</p>
<button class="btn-grad" onclick="randomColor()">Generate</button>
</div>
<div class="colorizer" id="colorizer1">
<div id="pallete1" class="color" onclick="copyToClipboard('pallete1')">#967b28</div>
<div id="pallete2" class="color" onclick="copyToClipboard('pallete2')">#df9d4f</div>
<div id="pallete3" class="color" onclick="copyToClipboard('pallete3')">#af704f</div>
<div id="pallete4" class="color" onclick="copyToClipboard('pallete4')">#97013b</div>
<div id="pallete5" class="color" onclick="copyToClipboard('pallete5')">#14ae2e</div>
</div>
<script src="./app.js"></script>
</body>
</html>

There is all the Html code for the Random Color Generator. Now, you can see an output with Css and JavaScript. then we write Css Code for the styling project and use JavaScript for the Random Color Generator.

CSS Code Random Color Generator

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(to right,
#967b28 0%, #967b28 20%,
#df9d4f 20%, #df9d4f 40%,
#af704f 40%, #af704f 60%,
#97013b 60%, #97013b 80%,
#14ae2e 80%, #14ae2e 100%);
}
#pallete1,
#pallete2,
#pallete3,#pallete4,#pallete5 {
color: #ffffff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aliceblue;
height: 25vh;
}
.container p {
margin: 5px;
}
.colorizer {
display: flex;
justify-content: space-around;
text-align: center;
height: 75vh;
align-items: center;
}
.colorizer .color {
padding: 100px;
background-color: transparent;
}
.btn-grad {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%)}
.btn-grad {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
display: block;
border-radius: 0.5rem;
border-color: transparent;
cursor: pointer;
}
.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}

JavaScript Code Random Color Generator

 //Generate Random Colors
function randomColor() {
let body = document.body;
let palletes = []
for (let index = 1; index <= document.getElementById("colorizer1").childElementCount; index++) {
palletes.push(document.getElementById(`pallete${index}`))
}
let colors = []
palletes.forEach((pallete,i)=>{
let random = Math.floor(Math.random() * 16777215).toString(16);
pallete.innerHTML = '#'+random;
colors.push(random);
})
let randomizer = {}
colors.forEach((color,i)=>{
randomizer[`random${i+1}`] = "#"+color;
})
body.style.background = `linear-gradient(to right, ${randomizer['random1']} 0%, ${randomizer['random1']} 20%,
${randomizer['random2']} 20%, ${randomizer['random2']} 40%,
${randomizer['random3']} 40%, ${randomizer['random3']} 60%,
${randomizer['random4']} 60%, ${randomizer['random4']} 80%,
${randomizer['random5']} 80%, ${randomizer['random5']} 100%)`;
}
function copyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
navigator.clipboard.writeText(document.getElementById(containerid).innerText);
alert("Color has been copied")
}
}

we use javascript for Random Hex Color Generator. we create Math.floor and Math.random to generate hex color and in the last code of javascript we create copy to click so if you click on any color code its copied in one click and paste into your project! Enjoy.

Now that we have completed our Random Color Generator. Here is our updated output with Html, Css, and JavaScript. Hope you like the Random Color Generator Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create Random Color Generator using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki