Hey, I am Shaurya, and in this blog, we are going to see exactly how to build the best color picker and palette generator web app using HTML, CSS, and JavaScript.
Colors play a huge role in web design, branding, and UI/UX. Whether you’re a frontend developer, designer, or beginner learning JavaScript, having a color palette generator is extremely useful.
Every time we try to make a website or design a website, the main problem that comes up is choosing a good color palette, and we waste our precious time searching for a good color palette or color code. When I was learning website development.
I was facing this issue of finding a color name or code and choosing the right color palette. That time, I built this project to solve this problem and enhance my coding.
In this blog, I am going to teach you step by step how to build this web app from scratch and clear all your concepts by breaking the code into chunks and explaining it. If you face any problem, you can watch the YouTube tutorial video, and I will also share all the resource code with you all.
In this blog, we will build a Color Picker & Palette Generator from scratch using pure HTML, CSS, and JavaScript, no frameworks, no libraries.
This project is perfect if you want to:
- Practice DOM manipulation
- Learn event handling
- Understand gradients programmatically
- Build real-world JavaScript projects
- Create portfolio-worthy tools
By the end of this blog, you’ll understand every single line of code used in this project.
Features of the Project
✔ Pick any color using a color picker
✔ Copy HEX color with one click
✔ Generate random color palettes
✔ Support for:
- Solid colors
- Linear gradients
- Radial gradients
✔ Click to copy palette values
✔ Export palette as a.txtfile
✔ Toast notifications for better UX
✔ Responsive & modern UI
Table of Contents
PART 1: HTML
index.html
Copy the code and paste it inside your HTML file and save it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker & Palette Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Color Picker & Palette Generator</h1>
<!-- Color Picker Section -->
<div class="color-picker-section">
<input type="color" id="colorPicker" value="#ffffff">
<button id="copyColor">Copy HEX</button>
<p id="colorValue">#ffffff</p>
</div>
<!-- Palette Generator Section -->
<div class="palette-section">
<h2>Palette Generator</h2>
<div class="gradient-options">
<button data-type="solid">Solid</button>
<button data-type="linear">Linear</button>
<button data-type="radial">Radial</button>
</div>
<div class="palette" id="palette"></div>
<button id="generatePalette">Generate Palette</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Understanding the HTML
Let’s understand the above full code of HTML step by step. I will explain every important concept in detail.
1️⃣ Document Structure
<!DOCTYPE html>
<html lang="en">
This tells the browser that we are using HTML5 and the language of the document is English. You will find this in every HTML file.
2️⃣ Meta Tags
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This is very important for SEO. This code helps you to make your web app SEO friendly and responsive for all devices.
UTF-8allows special characters- Viewport makes the website responsive on mobile
3️⃣ Linking CSS and JavaScript
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>This code links our Stylesheet and JavaScript files to our HTML. If you do not link the files, then the styling and JS logic will not work. Always link the JS file at the end. It will ensure that everything loads fast.
- HTML handles structure
- CSS handles design
- JavaScript handles logic
This separation is best practice because once the code becomes heavy, writing in a single file becomes difficult, and debugging becomes harder.
4️⃣ Color Picker Input
<input type="color" id="colorPicker">
HTML provides a built-in color picker. You have to just put the color inside the type, and it will work.
It automatically returns color values in HEX format, making it perfect for web projects.
5️⃣ Gradient Buttons with data-type
<button data-type="linear">Linear</button>
data-type is a custom data attribute used in JavaScript to detect which gradient type the user selects.
6️⃣ Palette Container
<div class="palette" id="palette"></div>
This container stays empty initially. We will add the color boxes with the help of JavaScript dynamically.
PART 2: CSS
style.css
Copy the code and paste it inside your CSS file and save it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Roboto, Arial, sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
min-height: 100vh;
display: flex;
justify-content: center;
padding: 40px 15px;
}
.container {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
padding: 35px 30px;
border-radius: 18px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
max-width: 520px;
width: 100%;
}
h1 {
text-align: center;
margin-bottom: 25px;
}
.color-picker-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
button {
padding: 10px 22px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
cursor: pointer;
}
.palette {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.color-box {
width: 70px;
height: 70px;
border-radius: 14px;
cursor: pointer;
}
Understanding the CSS
1️⃣ CSS Reset
* {
margin: 0;
padding: 0;
}
Removes browser default spacing so UI looks consistent across devices.
2️⃣ Background Gradient
background: linear-gradient(135deg, #667eea, #764ba2);
Creates a smooth, modern background using gradients — very popular in modern UI.
3️⃣ Glassmorphism Container
background: rgba(255,255,255,0.9);
backdrop-filter: blur(12px);
This creates a glass effect, also called glassmorphism, widely used in modern apps.
4️⃣ Flexbox Layout
display: flex;
justify-content: center;
Ensures proper alignment and responsiveness.
5️⃣ Palette Boxes
.color-box {
width: 70px;
height: 70px;
}
Each color is displayed as a clickable box.
PART 3: JavaScript (Full Code First)
script.js
Copy the code and paste it inside your CSS file and save it.
const colorPicker = document.getElementById("colorPicker");
const copyColorBtn = document.getElementById("copyColor");
const colorValue = document.getElementById("colorValue");
const palette = document.getElementById("palette");
const generateBtn = document.getElementById("generatePalette");
const gradientButtons = document.querySelectorAll(".gradient-options button");
let currentType = "solid";
let currentPalette = [];
function showToast(message) {
const toast = document.createElement("div");
toast.textContent = message;
Object.assign(toast.style, {
position: "fixed",
bottom: "30px",
right: "30px",
background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
color: "#fff",
padding: "12px 18px",
borderRadius: "10px",
opacity: "0",
transition: "0.3s"
});
document.body.appendChild(toast);
setTimeout(() => toast.style.opacity = "1", 50);
setTimeout(() => {
toast.style.opacity = "0";
setTimeout(() => toast.remove(), 300);
}, 2000);
}
colorPicker.addEventListener("input", () => {
colorValue.textContent = colorPicker.value;
});
copyColorBtn.addEventListener("click", () => {
navigator.clipboard.writeText(colorPicker.value);
showToast("HEX copied!");
});
function randomColor() {
return "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0");
}
function generatePalette() {
palette.innerHTML = "";
currentPalette = [];
for (let i = 0; i < 5; i++) {
const c1 = randomColor();
const c2 = randomColor();
const box = document.createElement("div");
box.className = "color-box";
let value = currentType === "solid"
? c1
: currentType === "linear"
? `linear-gradient(135deg, ${c1}, ${c2})`
: `radial-gradient(circle, ${c1}, ${c2})`;
box.style.background = value;
currentPalette.push(value);
box.addEventListener("click", () => {
navigator.clipboard.writeText(value);
showToast("Copied!");
});
palette.appendChild(box);
}
}
generateBtn.addEventListener("click", generatePalette);
generatePalette();
Understanding the JavaScript (Step-by-Step)
1️⃣ DOM Selection
document.getElementById(...)
Connects JavaScript with HTML elements.
2️⃣ State Variables
let currentType = "solid";
Stores selected gradient type.
3️⃣ Random Color Logic
Math.random() * 16777215
This generates all possible HEX colors.
4️⃣ Dynamic Element Creation
document.createElement("div");
Used to generate palette boxes dynamically.
5️⃣ Clipboard API
navigator.clipboard.writeText(value);
Copies text without using deprecated methods.
6️⃣ Export System
Uses Blob and URL.createObjectURL() to download files — real-world JS usage.
What You Learned From This Project
✔ HTML structure
✔ CSS modern UI
✔ JavaScript logic
✔ DOM manipulation
✔ Clipboard API
✔ File export
✔ UX enhancement
Final Thoughts
This project is perfect for portfolios, interviews, and learning JavaScript practically.
You can extend it further by adding:
- RGB / HSL conversion
- LocalStorage saving
- Dark mode
- Chrome extension
Checkout My YouTube Channel
Read my other Blogs
- Top 5 Mistakes Beginners Make While Learning to Code (And How to Avoid Them)
- Best Programming Languages to Learn in 2025 (and Why)
- Before You Learn Web Development: The Advice No One Gave Me
- How to Start Coding in 2025: Beginner’s Roadmap
- Why Coding is Important: The Language of the Future
- Are Coding and Programming the Same? – The Complete Truth You Need to Know
- Will Coding Be Replaced by AI?
- C++ Programming: Everything You Need to Know
