Analogous Color Wheel

An interactive color wheel application for exploring harmonious color combinations. Built with modern web technologies for designers and developers.

Mobile

Desktop

✨ Features

• 🎨 Interactive Color Wheel - Click and drag to select colors from a smooth canvas-based color picker
• 🌈 Analogous Color Generation - Automatically generates harmonious color combinations based on your selection
• 📋 Copy-to-Clipboard - One-click copying of hex and HSL color values
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• 🎯 Visual Color Palette - Preview your color harmony with an integrated palette display
• 💫 Modern UI - Dark/light mode theme. Beautiful gradients and smooth animations

🚀 Tech Stack

• React 19 - Modern component architecture with hooks
• TypeScript - Type-safe development
• Vite - Lightning-fast development and build tool
• Tailwind CSS - Utility-first CSS framework
• Canvas API - Smooth color wheel interactions

🎮 How to Use

1. Select Colors: Click and drag anywhere on the color wheel to pick your base color
2. Explore Analogous Colors: Watch as harmonious colors automatically generate around your selection
3. Copy Color Values: Click any color value (hex or HSL) to copy it to your clipboard
4. Use the Palette: The bottom palette shows your complete color harmony for easy reference

Project Structure

src/
├── components/
│   ├── ColorWheel.tsx      # Interactive color wheel canvas
│   └── ColorDisplay.tsx    # Color information and palette display
├── types/
│   └── color.ts           # TypeScript interfaces and color utilities
├── App.tsx                # Main application component
└── main.tsx              # Application entry point

🎨 Color Theory

This app focuses on analogous color schemes - colors that are adjacent to each other on the color wheel. These combinations are:

• Naturally harmonious and pleasing to the eye
• Perfect for creating serene, comfortable designs
• Commonly found in nature (sunsets, forests, oceans)
• Ideal for backgrounds, gradients, and cohesive themes

📄 License

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

🙏 Acknowledgments

• Built with the modern React + Vite + Tailwind CSS stack
• Inspired by traditional color theory and design principles
• Created for designers, developers, and color enthusiasts