Random Color Generator | Hex Color Generator Html Css Javascript







Random Color Generator | Hex Color Generator Html Css Javascript 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Random Color Generator. We use HTML, Css, and javascript for this Random Color Generator. I hope you enjoy our blog so let’s start with a basic HTML structure for the Random Color Generator.

HTML Code 

 <!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, then we write javascript for the RRandom Color Generator.

output

Random Color Generator | Hex Color Generator Html Css Javascript

CSS code

 * {  
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;
}

Css Updated output

Random Color Generator | Hex Color Generator Html Css Javascript

Javascript code 

 //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")
}
}

Final output

Random Color Generator | Hex Color Generator Html Css Javascript

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Random Color Generator. 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 simple 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 

Share on:

Leave a Comment