REPOSITORY OVERVIEW

Live repository statistics

★ 0Stars

⑂ 0Forks

◯ 0Open issues

◉ 0Watchers

README preview

🎨 Color Palette Generator Web App

Welcome to the Color Palette Generator Web Application, a modern tool built with HTML, CSS, JavaScript, and Claude AI. This project empowers designers and developers to generate, customize, and save beautiful color palettes instantly—complete with responsive design and smooth user experience.

🎥 Full YouTube Tutorial: Watch on YouTube

🌟 Overview

Choosing the perfect color scheme is often the hardest part of design. With this AI-powered generator, you can instantly create random palettes, lock your favorite colors, and build a personal library of saved color combinations—all in one clean interface.

Whether you're designing a website, branding project, or mobile app, this tool makes color exploration effortless.

✨ Features

✅ Random Color Generation
Instantly generate five unique colors with a single click.
✅ Lock/Unlock Colors
Preserve specific colors while generating new ones.
✅ Copy to Clipboard
Click any color to copy its hex code instantly.
✅ Favorites System
Save your favorite palettes and load them anytime.
✅ Local Storage
Your saved palettes persist even after you close the browser.
✅ Responsive Design
Works beautifully on mobile, tablet, and desktop.
✅ Modern UI
Clean layout, subtle animations, and clear feedback.

🖼️ Screenshots

Tip: Replace these URLs with your own screenshots after uploading them.

Main interface with palette controls

Lock and unlock specific colors

Mobile-friendly experience

🚀 Getting Started

Prerequisites

A modern web browser (Chrome, Firefox, Safari, Edge)
A code editor (VS Code recommended)
Live Server extension (for local development)

Installation

Clone the repository:

git clone https://github.com/Dilawarkhandeveloper/Color-Palette-Generator.git
cd Color-Palette-Generator

Open the project:
- Open the project folder in VS Code or your preferred editor
Launch Live Server:
- Make sure you have the Live Server extension installed
- Right-click index.html and select "Open with Live Server"
- Or simply open index.html in your browser

Alternative Setup

You can also run this project by simply opening the index.html file directly in your browser - no server required!

⚙️ How to Use

Generate Palettes:
- Click the "Generate Palette" button to create new colors
- Five random colors will appear instantly
Lock Colors:
- Click the lock icon on any color to preserve it
- Locked colors won't change when generating new palettes
Copy Hex Codes:
- Click any color box to copy its hex code to clipboard
- Visual feedback confirms successful copying
Save Favorites:
- Click "Save Palette" to add current colors to your favorites
- Saved palettes appear in the list below
Load Saved Palettes:
- Click on any saved palette to load it instantly
- Delete unwanted palettes with the trash icon

🛠️ Technologies Used

HTML5 – Semantic structure and accessibility
CSS3 – Modern styling, flexbox, and smooth animations
JavaScript (ES6+) – Dynamic functionality and local storage
Claude AI – AI-assisted development and code generation

📁 Project Structure

Color-Palette-Generator/
├── index.html          # Main HTML file
├── styles.css          # CSS styling and animations
├── script.js           # JavaScript functionality
├── README.md           # Project documentation
└── assets/             # Images and screenshots (optional)

✍️ How It Was Built

This project was created using Claude AI with a comprehensive prompt that included:

📄 Project overview and technical requirements
🗂️ File structure and naming conventions
🎨 Color generation algorithms and utility functions
🔒 Interactive lock/unlock mechanisms
💾 Local storage integration for persistence
📱 Responsive design specifications
🧹 Clean, well-commented code for maintainability

The AI generated the complete codebase following modern web development best practices.

🎯 Key Features Deep Dive

Color Generation Algorithm

Uses Math.random() to generate RGB values
Converts to hexadecimal format
Ensures good contrast and readability

Local Storage Implementation

Automatically saves user preferences
Persists favorite palettes across sessions
Handles storage limits gracefully

Responsive Design

Mobile-first approach
Flexible grid system
Touch-friendly interface elements

🔧 Customization

You can easily customize this project by:

Changing Colors: Modify the CSS variables in styles.css
Adding Features: Extend the JavaScript functionality in script.js
Styling: Update the CSS to match your brand
Integrating APIs: Add color palette APIs for more variety

🐛 Known Issues & Solutions

Local Storage Limits: The browser may limit storage space for saved palettes
Color Contrast: Some generated combinations may have low contrast
Mobile Performance: Complex animations may be slower on older devices

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📈 Future Enhancements

Export palettes as CSS/SCSS variables
Integration with design tools (Figma, Adobe)
Color accessibility checker
Gradient generator
Color harmony suggestions
Dark/light mode toggle

👨‍💻 Author

Dilawar Khan
Full Stack Developer | Software Engineer | UI/UX Designer

📺 Full Video Tutorial

🎬 Watch the complete step-by-step guide on YouTube:

🔗 Build a Professional Color Palette Generator Web App with Claude AI

Learn how to plan, generate, and implement this entire project in under 20 minutes using AI-powered development techniques.

🌐 Live Demo

🔹 Project Live: https://dilawarkhandeveloper.github.io/Color-Palette-Generator

Try it out and see all features in action!

📄 License

This project is open source and available under the MIT License.

Feel free to fork, modify, and adapt it for your own needs. If you use it publicly, please consider giving credit and linking back to the repository.

⭐ Support

If you found this project helpful:

⭐ Star the repository to show your support
🔔 Subscribe to the YouTube channel for more AI-powered development tutorials
🐛 Report bugs by opening an issue
💡 Suggest features in the discussions section

🙏 Acknowledgments

Claude AI for intelligent code generation and project scaffolding
Open source community for inspiration and best practices
YouTube viewers for feedback and feature suggestions