Interactive Color Palette Generator Using JavaScript

Project Overview

The Color Palette Generator is a simple and interactive web tool built with HTML, CSS, and JavaScript that allows users to generate beautiful random color palettes instantly.
Users can copy HEX codes, lock favorite colors, and randomize the rest to design unique and harmonious color combinations for websites, logos, UI design, or any creative project.

Screenshots

Key Features

Random Color Generation
- Instantly creates a set of random colors at the click of a button.
- You can choose how many colors (2–8) to generate.
Lock Colors
- Lock specific colors to keep them fixed while randomizing the rest of the palette.
Copy HEX Codes
- Click on any color’s HEX code to automatically copy it to your clipboard using navigator.clipboard.writeText().
Responsive Design
- Fully responsive layout that adjusts beautifully on mobile, tablet, and desktop screens.
Smooth UI & Modern Aesthetic
- Uses soft shadows, gradients, and glassmorphism-inspired design for a sleek, modern look.
Partial Randomization
- “Randomize Unlocked” button generates new colors only for unlocked swatches, helping you refine palettes efficiently.
Local Development Friendly
- No frameworks or external dependencies required — runs directly in your browser.

Functionality

Generates random color palettes instantly with adjustable color count.
Lets users lock favorite colors to keep them fixed during randomization.
Allows easy HEX code copying with one click using the Clipboard API.
Randomizes only unlocked colors for efficient palette refinement.
Provides a modern, responsive UI for designers and developers to explore color ideas

Technology Used

HTML: For structure and layout.
CSS: For styling, layout, and responsive design.
JavaScript: For interactivity, random color generation, and clipboard functionality.

Why Use This Project ?

For Designers: Helps quickly generate and refine color palettes for branding, web design, or art projects.
For Developers: Great practice project to learn DOM manipulation, event handling, and the Clipboard API in JavaScript.
For Beginners: A perfect balance of creativity and logic — simple to build but visually impressive.
For Portfolios: Looks professional and demonstrates front-end coding, design thinking, and UI/UX understanding

Keywords: responsive Color Palette Generator, free HTML bootstrap project, front-end project for students.