🎨 Color Finder - Professional Palette Explorer

A beautiful, modern, and fully responsive color palette explorer built with React 18, JavaScript, Tailwind CSS, and Vite. Explore 150+ beautiful colors with complete color information, gradient previews, and WCAG contrast checking.

✨ Features

Core Features

• 🎨 150+ Beautiful Colors: Predefined color palette with complete information
• 📱 Fully Responsive: Mobile-first design (2-col mobile, 4-col tablet, 6-col desktop)
• 🔍 Search & Filter: Search by name or HEX code
• 🏷️ Categories: Filter by All, Red, Blue, Green, Pastel, Dark, Neon
• 🎲 Random Color: Get random colors with one click
• 📋 Copy to Clipboard: Copy HEX, RGB, RGBA, HSL values instantly
• 🌓 Dark/Light Mode: Toggle with persistence in localStorage
• ⌨️ Keyboard Shortcuts:
  • Space - Get random color
  • Esc - Close modal

Advanced Features

• 🎭 Color Modal: Detailed view with all color formats
• 🌈 Gradient Preview: See 2-3 color gradients automatically generated
• ♿ WCAG Contrast Checker: Check accessibility compliance (AA/AAA)
• ✨ Smooth Animations: Framer Motion powered transitions
• 💎 Glassmorphism UI: Modern glass-effect design
• 🎯 Hover Effects: Scale and shadow effects on color cards

🚀 Quick Start

Installation

# Clone or navigate to the project
cd color-finder

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173

Build for Production

npm run build
npm run preview

📁 Project Structure

color-finder/
├── src/
│   ├── components/
│   │   ├── ColorCard.jsx          # Individual color card
│   │   ├── ColorGrid.jsx          # Grid layout for colors
│   │   ├── ColorModal.jsx         # Detailed color information modal
│   │   ├── SearchBar.jsx          # Search input component
│   │   ├── CategoryTabs.jsx       # Category filter tabs
│   │   ├── RandomColorButton.jsx # Random color generator
│   │   ├── DarkModeToggle.jsx    # Theme switcher
│   │   ├── Toast.jsx              # Notification toast
│   │   ├── GradientPreview.jsx   # Gradient preview component
│   │   └── ColorContrastChecker.jsx # WCAG contrast checker
│   ├── hooks/
│   │   ├── useColors.js           # Color filtering and search logic
│   │   ├── useModal.js            # Modal state management
│   │   ├── useCopyToClipboard.js # Clipboard functionality
│   │   └── useDarkMode.js         # Dark mode with localStorage
│   ├── data/
│   │   └── colors.js               # 150+ color definitions
│   ├── App.jsx                    # Main application component
│   ├── main.jsx                   # Application entry point
│   └── index.css                  # Global styles + Tailwind
├── index.html
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
└── package.json

🎯 Usage

Basic Usage

1. Browse Colors: Scroll through the color grid
2. Search: Type in the search bar to find colors by name or HEX
3. Filter: Click category tabs to filter colors
4. View Details: Click any color card to see complete information
5. Copy Values: Click copy icons in the modal to copy color values
6. Random Color: Click the shuffle button or press Space key

Color Information Modal

When you click a color, you'll see:

• HEX: #FF6B6B
• RGB: rgb(255, 107, 107)
• RGBA: rgba(255, 107, 107, 1)
• HSL: hsl(0, 100%, 70%)
• Gradient Preview: 2-3 automatically generated gradients
• WCAG Contrast: Accessibility compliance checker

Keyboard Shortcuts

• Space: Get a random color and copy its HEX
• Esc: Close the color information modal

🛠️ Tech Stack

• React 18 - UI framework
• JavaScript (ES6+) - No TypeScript
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• React Icons - Icon library

🎨 Customization

Adding More Colors

Edit src/data/colors.js:

{ 
  name: "Your Color Name", 
  hex: "#HEXCODE", 
  rgb: "rgb(r,g,b)", 
  category: "Category" 
}

Changing Theme Colors

Edit tailwind.config.js to customize:

• Gradient colors
• Glassmorphism effects
• Animation timings

Modifying Grid Layout

Edit ColorGrid.jsx to change responsive breakpoints:

className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"

📱 Responsive Design

• Mobile (< 640px): 2 columns
• Tablet (640px - 1024px): 3-4 columns
• Desktop (> 1024px): 6 columns

🌐 Deployment

Vercel

npm install -g vercel
vercel

Netlify

npm run build
# Drag and drop the 'dist' folder to Netlify

GitHub Pages

1. Update vite.config.js:

export default defineConfig({
  base: '/your-repo-name/',
  // ...
})

2. Build and deploy:

npm run build
# Deploy dist folder to gh-pages branch

🎁 Bonus Features

WCAG Contrast Checker

• Automatically calculates contrast ratios
• Shows AA/AAA compliance levels
• Recommends best text color (white/black)

Gradient Preview

• Automatically generates 2-3 color gradients
• Shows different gradient directions
• Updates when color changes

📝 License

MIT License - feel free to use this project for personal or commercial purposes.

🤝 Contributing

Contributions are welcome! Feel free to:

• Add more colors
• Improve accessibility
• Add new features
• Fix bugs
• Improve documentation

📧 Support

For issues, questions, or suggestions, please open an issue on GitHub.

---

Made with ❤️ using React, Tailwind CSS, and Vite