Creating a color palette generator is a great way to improve your web development skills. Not only is it an engaging project, but it also helps you learn important concepts such as manipulating the DOM, working with loops, handling events, and creating user-friendly designs.
This blog post will show you how to Create A Random Color Palette Generator in HTML, CSS, and JavaScript. Users can click on the “Refresh Palette” button in this color palette generator to generate a new set of random colors with their hex color code. They can also easily copy the hex color code by clicking on the corresponding color card.
By the end of this blog post, you’ll have a functional color palette generator that you can use for your own projects or even make live on the Internet. If you’re excited to see how this project looks and works, you can click here to view a live demo of it.
Video Tutorial of Color Palette Generator in JavaScript
I hope you enjoyed the demo of this color palette generator and were able to understand how it was created using HTML, CSS, and JavaScript. In the video, I explained the codes with written comments to make them easier to understand, and I believe it worked.
If you haven’t seen the video yet, you can continue reading this post to learn how to create a color palette generator step-by-step by yourself. Otherwise, you can go to the bottom of this page to copy or download the source code and files for this project.
Steps to Create Color Palette Generator in JavaScript
To create a random color palette generator using HTML, CSS, and JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
To start, add the following HTML codes to your index.html file to create the basic layout of the project. The “ul” container is empty now, but it will be filled with “li” elements (representing colors) later using JavaScript code.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Color Palette Generator | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<ul class="container"></ul>
<button class="refresh-btn">Refresh Palette</button>
</body>
</html>
Next, add the following CSS codes to your style.css file to make the layout look better. These codes will style the layout and give it a visually appealing appearance.
/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: #E3F2FD;
}
.container {
margin: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container .color {
margin: 12px;
padding: 7px;
list-style: none;
cursor: pointer;
text-align: center;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 25px rgba(52,87,220,0.08);
transition: all 0.3s ease;
}
.container .color:active {
transform: scale(0.95);
}
.color .rect-box {
width: 185px;
height: 188px;
border-radius: 4px;
}
.color:hover .rect-box {
filter: brightness(107%);
}
.color .hex-value {
display: block;
color: #444;
user-select: none;
font-weight: 500;
font-size: 1.15rem;
margin: 12px 0 8px;
text-transform: uppercase;
}
.refresh-btn {
position: fixed;
left: 50%;
bottom: 40px;
color: #fff;
cursor: pointer;
outline: none;
font-weight: 500;
font-size: 1.1rem;
border-radius: 5px;
background: #8A6CFF;
padding: 13px 20px;
border: 2px solid #fff;
transform: translateX(-50%);
box-shadow: 0 15px 30px rgba(52,87,220,0.2);
transition: all 0.3s ease;
}
.refresh-btn:hover {
background: #704dff;
}
@media screen and (max-width: 500px) {
.container {
margin: 10px;
}
.container .color {
margin: 8px;
padding: 5px;
width: calc(100% / 2 - 20px);
}
.color .rect-box {
width: 100%;
height: 148px;
}
.color .hex-value {
font-size: 1.05rem;
}
.refresh-btn {
font-size: 1rem;
}
}
Finally, add the following JavaScript code to your script.js file to add functionality for creating random color cards with a hex color value and copying them with a single click.
const container = document.querySelector(".container");
const refreshBtn = document.querySelector(".refresh-btn");
const maxPaletteBoxes = 32;
const generatePalette = () => {
container.innerHTML = ""; // clearing the container
for (let i = 0; i < maxPaletteBoxes; i++) {
// generating a random hex color code
let randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
randomHex = `#${randomHex.padStart(6, "0")}`;
// creating a new 'li' element and inserting it to the container
const color = document.createElement("li");
color.classList.add("color");
color.innerHTML = `<div class="rect-box" style="background: ${randomHex}"></div>
<span class="hex-value">${randomHex}</span>`;
// adding click event to current li element to copy the color
color.addEventListener("click", () => copyColor(color, randomHex));
container.appendChild(color);
}
}
generatePalette();
const copyColor = (elem, hexVal) => {
const colorElement = elem.querySelector(".hex-value");
// Copying the hex value, updating the text to copied,
// and changing text back to original hex value after 1 second
navigator.clipboard.writeText(hexVal).then(() => {
colorElement.innerText = "Copied";
setTimeout(() => colorElement.innerText = hexVal, 1000);
}).catch(() => alert("Failed to copy the color code!")); // showing alert if color can't be copied
}
refreshBtn.addEventListener("click", generatePalette);
This code will generate 32 random color cards every time the button is clicked. However, you can change the “maxPaletteBoxes” value to increase or decrease the number of cards generated. To understand the code more deeply, read the comments in the code and experiment with it.
Conclusion and Final Words
By following the steps in this blog post, you have successfully created a random color palette generator using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.
If you encounter any problems or your code is not working as expected, you can download the source code files of this Color Generator project by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.
