🎨 PixelPalette

✨ Color Picker & Palette Generator

Create, explore, generate, and export stunning color palettes – all from a clean, fast, and modern interface.

🎯 Pick Colors • 🎨 Generate Palettes • 🌈 Create Gradients • 📤 Export & Share

📌 Table of Contents

• 📑 About
• ✨ Features
• 🖥️ Technologies Used
• 📱 Responsive Design
• 🌙 Modern UI
• 🚀 Getting Started
• 📂 Project Structure
• 💡 Future Improvements
• 🤝 Contributing
• ⭐ Support
• 📜 License

📑 About

PixelPalette is a modern, elegant, and fully client-side Color Picker & Palette Generator built with HTML5, CSS3, and JavaScript.

Whether you're a UI/UX Designer, Frontend Developer, Graphic Designer, or simply someone who loves beautiful colors, PixelPalette provides everything needed to create, manage, and share professional color palettes.

No installation. No backend. No login.

Just open the website and start creating.

✨ Features

🎨 Interactive Color Picker

• Visual color picker
• Instant live preview
• Real-time updates

👁️ EyeDropper Tool

Pick colors directly from anywhere on your screen using the native EyeDropper API.

• One-click color detection
• Browser-supported fallback
• Instant application

🌈 Multiple Color Formats

Instantly view and copy colors as:

• HEX
• RGB
• RGBA
• HSL

One-click copy buttons included.

🎯 Smart Palette Generator

Automatically generate professional palettes including:

• 🎭 Complementary
• 🔺 Triadic
• 🟢 Analogous
• 🌑 Monochromatic

🎲 Surprise Me

Feeling creative?

Generate completely random colors and palettes with one click.

🏷️ Color Name Detection

Display the nearest human-readable color name.

Example:

• Coral Red
• Ocean Blue
• Forest Green
• Lavender Mist

🌄 Gradient Generator

Create beautiful gradients instantly.

Features:

• Two-color gradient builder
• Live preview
• Ready-to-use CSS code
• One-click copy

🕒 Recent Colors

Automatically saves your recently selected colors using localStorage.

No data is lost after refreshing the page.

❤️ Favorite Palettes

Save your favorite palettes locally.

Perfect for future projects.

♿ Accessibility Checker

Check contrast ratio between two colors.

Supports:

• WCAG AA
• WCAG AAA

Perfect for accessible UI design.

📤 Export Options

Export your work as:

• 🖼️ PNG Palette
• 🎨 CSS Variables
• 📄 JSON

🔗 Share Palette

Generate a unique URL containing your palette.

Share it with anyone instantly.

🖥️ Technologies Used

• 🌐 HTML5
• 🎨 CSS3
• ⚡ JavaScript (Vanilla)
• 🖌️ Canvas API
• 👁️ EyeDropper API
• 💾 localStorage

📱 Responsive Design

PixelPalette is fully responsive and optimized for:

• 💻 Laptop
• 🖥️ Desktop
• 📱 Mobile
• 📲 Tablet

🌙 Modern UI

Designed with a premium user experience in mind.

✨ Features include:

• Bento Grid Layout
• Glassmorphism Cards
• Soft Animated Background
• Smooth Animations
• Hover Effects
• Toast Notifications
• Light/Dark Mode
• Rounded Components
• Modern Typography
• Lucide Icons

🚀 Getting Started

Clone the repository:

git clone https://github.com/TajkirHossen-14/PixelPalette.git

Open the project:

cd PixelPalette

Run the project by opening:

index.html

Or use Live Server in VS Code for the best experience.

📂 Project Structure

PixelPalette/
│
├── index.html
│
├── css
│   └── style.css
│
├── js
│   └── main.js
│
├── Assets/
│   ├── Banner/
│   └── Favicon/
│
├── License
│
└── README.md

💡 Future Improvements

• 🎭 Color harmony AI suggestions
• 🤖 AI-generated palettes
• ☁️ Cloud synchronization
• 📁 Palette collections
• 🎨 Adobe Color import/export
• 🖌️ Figma integration
• 📊 Palette analytics

🤝 Contributing

Contributions are always welcome!

1. Fork the repository
2. Create your feature branch

git checkout -b feature/NewFeature

3. Commit your changes

git commit -m "Add Amazing Feature"

4. Push your branch

git push origin feature/NewFeature

5. Open a Pull Request

⭐ Support

If you like this project, consider giving it a ⭐ Star on GitHub!

📜 License

This project is licensed under the MIT License.