Colour Match
Mix the sliders until it matches the swatch. Harder than it sounds.
BeginnerWeb appGame5–12hAI-buildable 5/5no setupworth shipping
A perception game: match a shown colour using RGB or HSL sliders, scored on perceptual distance. It quietly teaches how colour spaces work, and how bad we all are at judging colour in isolation.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A target colour displays alongside the player's mix
- Sliders adjust the mix in a selectable colour space
- Score is based on perceptual distance, not raw RGB difference
- Multiple rounds with a cumulative score
- The result reveals the exact difference after each round
- Difficulty affects how similar target colours are
- Best scores persist
The interesting part
- Perceptual distance requires converting to a uniform colour space
- Surrounding colours changing how the target is perceived
- Scoring that feels fair given how hard the task genuinely is
Once it works
- Add a mode using only complementary sliders
- Add a two-player race
- Add a colour blindness accessible mode
Suggested stack
reacttypescripttailwindlocalstorage