I built a color-memory game in vanilla JS — what I learned trying to make "guess the cartoon hue" feel fair

toontoneapp — Tue, 12 May 2026 13:54:40 +0000

Hey — Sam here, solo dev behind Toon Tone (https://toontone.app).

# The pitch in one sentence

You see a cartoon character with one body part whitened out. You drag

H/S/B sliders until your color matches the one you remember. Five rounds,
scored 0–10 per round by how close you got.

# Why this exists

We all "remember" cartoon colors — SpongeBob's yellow, Pikachu's cheeks,

Mario's red — but the moment you reach for a color picker, you realize
your memory is off by 30, 40, even 60 RGB units. That gap is the whole

game.

# Three design decisions I want to talk about

## 1. HSB sliders, not RGB

RGB sliders are a UX trap. Pushing "more red" doesn't feel like pushing
toward what your brain thinks "more red" is. HSB matches human color

intuition — hue is "which color," saturation is "how vivid," brightness

is "how light." Players adjust hue first, then saturation, then

brightness. That's how memory works too.

## 2. sRGB Euclidean distance for scoring

I know — it's not perceptually uniform. CIEDE2000 would be technically

better. But:

It's brutally fair: every unit of RGB error costs you score, no hand-waving.
It's predictable: players learn the cost model in 2 rounds.
It runs in 0.0001ms.

The scoring function is literally 6 lines. I tried perceptual scoring in

prototype 2; players hated it because "I was so close!" stopped meaning

anything.

## 3. The whitening convention

For each character, exactly one part is whitened — eyes, shirt, hair, a
prop. The rest stays in its original color. This is brutal to author

(every asset is hand-edited), but it teaches the player what "the rest

of the world looks like" so they can anchor their guess. Without

context, color memory collapses.

# Numbers from the first months

30+ characters, every Friday I add 1–2 more
5 languages live (EN, PT, ES, DE, RU)
Average score across all players: ~6.4/10
Hardest character so far: SpongeBob (everyone oversaturates the yellow)
Easiest: Pikachu (the red cheeks are iconic enough that memory holds)

# What surprised me

The single biggest predictor of high scores isn't art training — it's

whether the player has seen the character recently. Nostalgia memory

decays differently than recognition memory. I'm now picking new

characters partly based on "what's about to peak in cultural memory"

(a Netflix release, a re-run wave).

# Tech stack (for the curious)

Vanilla JS + Vite, 14kb gzipped, no framework. Supabase for the

leaderboard. Hosted nginx behind Docker. The whole thing loads in

~200ms on 4G.

# Come play

https://toontone.app — no signup, no install, takes 3 minutes for a

full game. Tell me which character is impossible for you.

DEV Community: toontoneapp

I built a color-memory game in vanilla JS — what I learned trying to make "guess the cartoon hue" feel fair