marketplace/docs

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

npm install
npm run dev

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

Build

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