# Color Wheel Palette Generator

An interactive color palette generator built with React, TypeScript, and Tailwind CSS v4. Pick a base color on a color wheel, choose a harmony type, adjust tint/shade, and export palettes in multiple formats.

## Features

- **Interactive Color Wheel** — Canvas-based HSL wheel with drag-to-select hue and saturation. Touch support for mobile.
- **7 Harmony Types** — Complementary, Split-Complementary, Analogous, Triadic, Tetradic, Square, Monochromatic.
- **Tint & Shade Slider** — Adjust lightness in real-time.
- **Color Input** — Enter HEX values directly, view RGB/HSL, adjust via RGB sliders.
- **Click-to-Copy** — Copy any color value (HEX, RGB, HSL) to clipboard.
- **Export** — CSS variables, JSON, Tailwind config snippet, or PNG image.
- **Dark / Light Theme** — Toggle between dark and light modes.
- **Responsive** — Mobile-first layout with horizontal scroll palette on small screens.

## Setup

```bash
npm install
npm run dev
```

Open `http://localhost:5173` in your browser.

## Build

```bash
npm run build
npm run preview
```

## Architecture

```
src/
├── components/          # UI components
│   ├── ColorWheel/      # Canvas-based color wheel with pointer events
│   ├── PaletteDisplay/  # Generated swatch grid
│   ├── HarmonySelector/ # Dropdown for harmony type
│   ├── ColorInput/      # HEX/RGB/HSL inputs and sliders
│   ├── TintShadeSlider/ # Lightness adjustment
│   ├── ExportPanel/     # CSS/JSON/Tailwind/PNG export
│   ├── Header/          # App header with theme toggle
│   └── MobileNav/       # Bottom sheet navigation for mobile
├── hooks/
│   ├── useColorWheel.ts    # Wheel interaction (drag, position calculation)
│   └── useColorHarmony.ts  # Harmony palette generation
├── utils/
│   ├── colorConversions.ts # HEX <-> RGB <-> HSL converters
│   └── harmonies.ts        # Harmony algorithms
├── App.tsx                 # Main layout
├── main.tsx                # Entry point
└── index.css               # Tailwind directives + theme variables
```

## Harmony Algorithms

| Type | Colors Generated |
|---|---|
| Complementary | Base + 180° |
| Split-Complementary | Base, +150°, +210° |
| Analogous | -30°, Base, +30° |
| Triadic | Base, +120°, +240° |
| Tetradic | Base, +90°, +180°, +270° |
| Square | Base, +90°, +180°, +270° |
| Monochromatic | Same hue, varied S/L |

## MCP Integration

The project includes MCP server configuration in `.claude/settings.json`:

- **Figma MCP** — Connect to Figma to read design files and create new frames.
- **Chrome DevTools MCP** — Debug the running app, inspect elements, and validate layouts.

## Tech Stack

- React 19 + TypeScript
- Vite
- Tailwind CSS v4
- HTML5 Canvas API
- Clipboard API