Menu

1 / 2

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

DEV Community·toontoneapp·6 months ago
#42pPsa3Q
#gamedev#javascript#showdev#webdev#memory
Reading 0:00
15s threshold

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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.