Introduction:
Welcome to this comprehensive tutorial on creating a dynamic color palette generator using HTML, CSS, and JavaScript. In this tutorial, you will learn how to build a user-friendly web tool that generates harmonious color palettes based on a chosen base color. By the end, you’ll have a functional color palette generator that allows users to explore and copy colors effortlessly.
Things You Will Learn:
- HTML Structure: Understand the basic HTML structure needed for the color palette generator.
- CSS Styling: Learn how to style the HTML elements to create an appealing and responsive design.
- JavaScript Logic: Dive into the JavaScript code to implement the color generation and copying functionality.
- Event Handling: Explore how to handle user interactions, such as button clicks and color copying.
- Dynamic Styling: Witness how the background dynamically changes based on the selected base color.
- Project Organization: Get insights into organizing your project with a clean folder structure.
Video Tutorial:
Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS and Javascript on my channel regularly.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”Color Palette Generator With Javascript”. Within this folder, we have 3 files. These files are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Palette Generator</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<label for="base-color">Select a Base Color:</label>
<input type="color" value="#0091fe" id="base-color" />
<button id="generate-btn">Generate Palette</button>
<div id="color-palette" class="color-palette"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: min(500px, 90%);
text-align: center;
padding: 36px;
border-radius: 16px;
background-color: #ffffff;
}
label {
font-size: 18px;
margin-right: 10px;
}
input {
padding: 5px;
cursor: pointer;
}
button {
border: 3px solid #000000;
background-color: transparent;
border-radius: 5px;
padding: 8px 16px;
cursor: pointer;
margin-left: 10px;
}
.color-palette {
margin-top: 20px;
display: flex;
justify-content: center;
}
.color-box {
width: 50px;
height: 50px;
margin: 0 5px;
border-radius: 5px;
cursor: pointer;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
let generatePalette = () => {
const baseColorInput = document.getElementById("base-color");
const colorPaletteContainer = document.getElementById("color-palette");
const baseColor = baseColorInput.value;
document.body.style.backgroundColor = baseColor;
//Clear previous palette
colorPaletteContainer.innerHTML = "";
const palette = generateHarmoniousPalette(baseColor);
palette.forEach((color) => {
const colorBox = document.createElement("div");
colorBox.style.backgroundColor = color;
colorBox.className = "color-box";
colorBox.addEventListener("click", copyCode);
colorPaletteContainer.append(colorBox);
});
};
function generateHarmoniousPalette(baseColor) {
const numberOfColors = 5;
const baseHue = extractHue(baseColor);
const colorPalette = [];
for (let i = 0; i < numberOfColors; i++) {
const hue = (baseHue + (360 / numberOfColors) * i) % 360;
const color = `hsl(${hue},70%,50%)`;
colorPalette.push(color);
}
return colorPalette;
}
function extractHue(color) {
const hex = color.slice(1);
const rgb = parseInt(hex, 16);
const r = (rgb >> 16) & 0xff;
const g = (rgb >> 8) & 0xff;
const b = (rgb >> 0) & 0xff;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let hue;
if (max === min) {
hue = 0;
} else {
const d = max - min;
switch (max) {
case r:
hue = ((g - b) / d + (g < b ? 6 : 0)) * 60;
break;
case g:
hue = ((b - r) / d + 2) * 60;
break;
case b:
hue = ((r - g) / d + 4) * 60;
break;
}
}
return hue;
}
function copyCode(e) {
let input = document.createElement("input");
input.type = "text";
let text = e.target.style.backgroundColor;
let hex = "#";
let rgbcode = text.replace(/[rgb()]+/g, "") || rgbcode;
rgbcode = rgbcode.split(",");
rgbcode.forEach((value) => {
value = parseInt(value).toString(16);
hex += value.length == 1 ? "0" + value : value;
});
input.value = hex;
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
alert("Color Copied: " + hex);
}
window.addEventListener("load", generatePalette);
document
.getElementById("generate-btn")
.addEventListener("click", generatePalette);
Conclusion:
Congratulations! You’ve just built a dynamic color palette generator from scratch. This tutorial covered the essential aspects of creating an interactive web tool using HTML, CSS, and JavaScript. Feel free to enhance and customize the code further, adding more features to make your color palette generator even more powerful. Happy coding!
