🎨 Color Wheel UI – MVP Project Plan

Build a simple frontend web application that visualizes a 12-segment color wheel and plots paints from a CSV dataset (Vallejo Model Color paints).

The app should:

• Render a 12-part color wheel
• Plot paints as points based on RGB values
• Support filtering/highlighting owned paints
• Use radial distance to represent:
  • Tint
  • Tone
  • Shade
  • Pure color

This is an MVP pet project:

• No need for perfection
• Focus on simplicity and clarity
• No tests required

• Language: JavaScript (ES6+)
• Framework: Vanilla JS (no frameworks preferred)
• Rendering: HTML5 Canvas (preferred)
• Data: CSV file (static)
• Deployment: GitHub Pages via GitHub Actions
• No backend
• No authentication

name,rgb,owned

Flat Red,"255,0,0",true Dark Blue,"10,20,200",false

• rgb is a single string column: "r,g,b"
• Parse into integers
• Missing or invalid RGB → skip row
• owned:
  • boolean (true/false) or 1/0

• 12 equal segments (30° each)
• Segments represent:
  • Red
  • Red-Orange
  • Orange
  • Yellow-Orange
  • Yellow
  • Yellow-Green
  • Green
  • Blue-Green
  • Blue
  • Blue-Violet
  • Violet
  • Red-Violet

• Convert parsed RGB into HSL
• Extract:
  • Hue (H)
  • Saturation (S)
  • Lightness (L)

angle = hue (0–360°)

if (s < 0.25) → center else if (l > 0.7) → inner ring else if (l < 0.35) → outer ring else → middle ring

Each paint:

• Position:
  • Angle → from Hue
  • Radius → from zone logic
• Render as:
  • Small circle (3–6px)

• Dot color = actual RGB
• Overlapping points allowed

• Toggle modes:
  • Show all paints
  • Show only owned paints
  • Highlight owned paints

• Larger dot OR
• Different stroke (outline)

• Hover tooltip:
  • Paint name
  • RGB value

[ Toggle: All | Owned | Highlight ]

( Color Wheel Canvas )

• Centered layout
• Minimal styling
• Prefer dark background (better color visibility)

• Load CSV from static file (/data/paints.csv)
• Parse on app load
• Skip invalid rows
• Log errors in console (optional)

/src main.js colorUtils.js wheel.js csvParser.js

/index.html /styles.css /data/paints.csv

1. Setup HTML + Canvas
2. Draw 12-segment wheel
3. Load and parse CSV
4. Parse RGB string → numbers
5. Convert RGB → HSL
6. Map:
   • Hue → angle
   • S/L → radius
7. Plot points
8. Add toggle for owned

• Missing RGB → skip
• Invalid format → skip
• No collision handling
• No performance optimization required

• Use GitHub Pages
• Use GitHub Actions:
  • On push to main → deploy static files

• No backend
• No editing paints
• No persistence
• No advanced color theory accuracy
• No tests
• No animations
• No responsiveness (optional later)

• Color similarity detection
• Paint comparison
• Search/filter UI
• Dynamic CSV upload
• Smooth radial gradients instead of rings

• RGB stored as single CSV column
• Missing RGB → skip
• Radius represents:
  • Tint / Tone / Shade / Pure
• Fixed radial zones (not continuous)
• Canvas rendering
• Simple MVP-first approach