A color perception game. Spin the wheel, match the target color as closely as you can, and see how good your eye really is.
Built for my daughter, who came up with most of the ideas. Inspired by color training tools seen around the web.
- A target color is shown on the left swatch.
- Drag the color wheel to pick your best match.
- Hit Confirm before the round timer runs out.
- Your accuracy is scored 0–100 based on hue and saturation distance.
- After 5 rounds you get a final grade (S / A / B / C / D / F).
| Feature | Details |
|---|---|
| Color wheel | Full HSL wheel on an HTML5 canvas — tap or drag to pick |
| Scoring | 0–100 per round; weighted by hue (70 %) and saturation (30 %) |
| Grading | S ≥ 95 · A ≥ 85 · B ≥ 70 · C ≥ 55 · D ≥ 40 · F otherwise |
| Easy / Hard | Hard mode hides the target after a 3-second countdown |
| Daily challenge | Same 5 colors for everyone each day, seeded by day number |
| Streak counter | Tracks consecutive days you play the daily challenge |
| Shareable result | One-tap share with grade, score and color emoji grid |
| History chart | Bar chart of your last 10 games |
| Perfect score easter egg | Hit 100/100 on a round → sparkles + unique sound |
| Color names | After each round, shows the nearest named color |
| Dark / Light theme | Toggle at any time |
| Spanish / English | Full UI translation |
| PWA | Installable, works fully offline |
| Haptic feedback | Vibration patterns on mobile for different score ranges |
| Sound effects | Web Audio API tones — no audio files |
| Grade | Average score |
|---|---|
| S | 95 – 100 |
| A | 85 – 94 |
| B | 70 – 84 |
| C | 55 – 69 |
| D | 40 – 54 |
| F | 0 – 39 |
- Vite + TypeScript — no framework, vanilla DOM
- HTML5 Canvas — color wheel rendering
- Web Audio API — procedural sound effects
- Workbox (via
vite-plugin-pwa) — service worker + offline cache - localStorage — highscore, history, daily record, streak, tutorial state
- Mulberry32 PRNG — deterministic daily color seeds from the day number
npm install
npm run dev # dev server at http://localhost:5173/ColorGame/
npm run build # production build → dist/
npm run preview # preview the production buildThe app is deployed to GitHub Pages from the dist/ output via the Actions workflow on every push to main.
src/
main.ts — app entry, game loop, event wiring
game.ts — Game state machine (idle → playing → scored → done)
wheel.ts — Canvas color wheel
color.ts — HSL math, scoring, grading
colornames.ts — Nearest named color lookup
daily.ts — Daily targets (seeded PRNG), share text
storage.ts — localStorage helpers (highscore, history, daily, streak)
audio.ts — Web Audio sound effects
confetti.ts — Confetti + sparkle canvas effects
tutorial.ts — First-run tutorial overlay
ui.ts — DOM manipulation layer
i18n.ts — English / Spanish translations
types.ts — Shared TypeScript types
MIT