An interactive color wheel for miniature paints.
Visualize, compare, and explore 190+ hobby paints across major brands — mapped by hue and lightness on a single interactive canvas.
This is the beta release of Color Wheel. Features, data, and UI are evolving rapidly — expect breaking changes between releases. Feedback and bug reports are welcome.
Color Wheel is built for miniature painters who want to make smarter color choices. It maps 190+ paints from Vallejo, Green Stuff World, Citadel, Army Painter, and AK Interactive onto an SVG-based circular visualization, with paints positioned by hue (angle) and lightness (radius).
It helps hobbyists:
- Visualize their paint collection on an interactive color wheel
- Compare paints across brands to find duplicates and alternatives
- Explore color relationships using complementary, split-complementary, and analogous schemes
- Search paints by name, hex code, or brand
- Track their owned paints with a personal collection layer
| Area | Highlights |
|---|---|
| Color Wheel Visualization | Interactive SVG wheel with zoom, pan, reset; paint selection, hover, overlap indicators |
| Multiple Views | Wheel, Grid, and List modes for different browsing styles |
| Brand Tools | Brand filtering, ring toggles, and legend for cross-brand comparison |
| Color Analysis | Complementary, split-complementary, and analogous scheme modes |
| Search | Fast lookup by paint name, hex code, or brand |
| Paint Collection | Mark owned paints and filter the wheel by your collection (localStorage) |
| Detail Panel | Sidebar with full paint metadata for any selected color |
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router), React, TypeScript |
| Styling | Tailwind CSS, DaisyUI |
| UI Components | Headless UI, Heroicons |
| State | Zustand |
- Node.js 20+ (or Bun)
- A package manager:
bun,pnpm,yarn, ornpm
# install dependencies
bun install # or: pnpm install / yarn / npm install
# start the dev server
bun dev # or: pnpm dev / yarn dev / npm run devOpen http://localhost:3000 to view the app.
| Script | Purpose |
|---|---|
bun dev |
Start the Next.js dev server |
bun build |
Create a production build |
bun start |
Run the production build locally |
bun lint |
Run ESLint |
src/
├── app/ # Next.js app router pages and layouts
├── components/ # UI components (wheel, sidebar, controls, etc.)
├── data/ # Paint datasets per brand (JSON)
└── lib/ # Color math, hooks, state (Zustand stores)
docs/ # Feature plans, epics, and implementation notes
Color Wheel ships in epics. The full breakdown lives in docs/overview.md.
- Paint Database (190+ paints across 5 brands)
- Color Wheel Visualization (Wheel / Grid / List)
- Sidebar Layout & Header Stats
- Detail Panel
- Brand Filtering, Ring Toggle, Legend
- Color Scheme Modes & Search
- Owned Paint Collection
- User Authentication — Supabase-backed accounts, social login, profiles, role-based authorization
- Recipes — Step-by-step paint recipes, projects, tags, and community sharing
- SEO & Branding — Branding assets, metadata, sitemap
- Project Overview — epics, status, and feature index
- Per-feature plans live under
docs/<epic>/<feature>.md
This is a personal project in active beta development. If you find a bug, have a paint to add, or want to suggest a feature, open an issue.
- Paint data curated from manufacturer ranges and community references including PaintPad.app
- Bootstrapped with
create-next-app