Wardrobe-Aware Color Picker
Full-stack + interaction design · Weekend prototype with polish passes
toolingvisualizationcanvasqwikux Indicator-only redraw keeps drag at 60 FPS while brightness changes redraw the wheelWardrobe presets ship with per-piece proportions for faster outfit planning
Problem / Context
Most color pickers stop at basic harmonies. I wanted one that stayed silky while dragging and could also answer a practical question: what outfit pieces should use which shades of a palette?
Approach
- Render the wheel pixel-by-pixel on Canvas, cache the image data, and redraw only the indicators during drag; full redraws happen only when brightness or size changes.
- Use Qwik signals for hue/sat/brightness so the background and palette cards snap to updates without rerendering the world.
- Add “wardrobe” harmony modes (business formal, casual, navy blazer, earth tones, weekend) that return HSV colors with labels and proportions for blazer/pants/shirt/accessories.
- Keep interaction responsive: window-level drag listeners, dynamic wheel sizing from its container, and warm/cold nudge buttons that shift hue intelligently instead of brute-force offsets.
Results
- Dragging the indicator never stutters; cached image data plus indicator-only redraw keeps the loop light even on mid-tier laptops.
- Users get both color-theory sets (complementary, triadic, split, tetradic) and outfit-ready palettes with guidance like “Suit 60% / Shirt 30% / Tie 10%.”
- Brightness and temperature controls feel analog: tweaks stay under a frame budget while the HSV → RGB → HEX readout updates instantly.
What I’d Do Next
- Export palettes as Tailwind tokens and WCAG contrast checks for UI work.
- Add a “print outfit card” mode that lays out the labeled swatches for quick wardrobe planning.