Hey everyone โ I'm Potter, the solo developer behind Toon Tone.
๐ก The Pitch in One Sentence
You are given the name of an iconic cartoon character and a specific part of them, but only a solid white block is displayed โ you must drag the H/S/B (Hue, Saturation, Brightness) sliders to recreate the exact color from your memory. Five rounds, scored from 0โ10 based on how close your color is to the target.
๐จ Why This Exists
We all think we perfectly "remember" pop culture colors โ SpongeBob's signature yellow, Pikachu's rosy cheeks, or Mario's red cap.
But the moment you lose the visual context of the character's lines and shapes, and find yourself staring at a blank color picker, you realize a shocking truth: your visual memory and the actual RGB values are separated by a massive, humbling gulf. That exact psychological gap โ the "I know I know this, but I'm completely guessing right now" feeling โ is where the fun of Toon Tone lives.
๐ ๏ธ Two Core UX and Architectural Decisions
As a solo project, making a simple "guess the color" mechanic feel both intuitive and mathematically fair required some deep thought into the details:
- HSB Sliders Instead of RGB In daily web development, we are used to dealing with RGB or Hex codes. However, in game design, RGB sliders are an absolute UX nightmare.
When the human brain wants to make a color "a bit more red" or "a lighter blue," we donโt naturally calculate how much to push the Red axis or subtract from the Green axis. We perceive color in a sequence: first we identify what the color is, then how vivid it is, and finally how bright it is.
Because of this, I strictly went with the HSB (Hue, Saturation, Brightness) model for the sliders:
Hue helps players anchor "which color" it actually is.
Saturation controls the vividness and intensity.
Brightness dictates the light and shadow.
Player feedback has proved this right: people instinctively set the hue first, then fine-tune the saturation and brightness, perfectly mirroring how the brain extracts visual memories.
- Scoring System: Brutally Rigid sRGB Euclidean Distance In color science, using a perceptually uniform algorithm like CIEDE2000 is technically more accurate to how the human eye registers different spectrums. However, during early prototype testing, complex perceptual math just ended up confusing players. People would get frustrated, saying, "I feel like these two colors look almost identical, why did the game dock so many points?"
So, I made a very deliberate, hardcore engineering choice: calculating scores based strictly on standard sRGB space Euclidean distance.
While it might not be a perfect representation of human biology, it brings three massive wins to the table:
Brutal Fairness: There are no gray areas or hand-waving. Every unit of RGB deviation costs you points, pure and simple.
High Predictability: Players learn the exact "temperament" of the scoring model within two rounds.
Instant Performance: The calculation executes in roughly 0.0001ms, meaning zero rendering lag.
๐ Surprises & Insights from the Game
Content Cadence: I am currently keeping a rhythm of adding 1โ2 new character colors every single Friday to steadily grow the pool.
The Charm of "Blind Color Guessing": Because the game renders only a solid color block without any surrounding illustrations or outlines, it acts as a pure, stripped-down test of isolated visual memory.
Polarized Difficulty: The hardest color to nail so far is SpongeBob's yellow (almost everyone oversaturates it and gets penalized heavily). On the flip side, the easiest to score high on is Pikachu (those two red cheeks are so deeply burned into collective human DNA that people's memory holds strong).
The Decay of Memory: The biggest predictor of a high score isn't whether someone has art training โ it's whether they have watched or interacted with that specific show recently. "Nostalgia memory" decays at a wildly different rate than "recent recognition memory." This has actually shifted my weekly curation strategy; I now actively look out for what old anime are getting remakes or what's trending on streaming platforms to catch players at the peak of their cultural memory.
๐ป The Ultra-Lean Stack (Next.js + Cloudflare Workers)
As an indie hacker, my top priority for this project was keeping maintenance costs at zero, rendering fast, and eliminating bloat. To achieve that, I built the entire architecture around the Cloudflare ecosystem:
Framework: Powered entirely by Next.js, which ensures a fantastic developer experience and clean code organization.
Compute & Deployment: Utilizing Cloudflare's official @cloudflare/next-on-pages, the entire Next.js project is deployed directly on Cloudflare Workers, taking advantage of ultra-low latency edge nodes globally.
Storage: Combined with Cloudflare KV / D1 to read and store core game configuration and data at maximum performance and near-zero cost.
Thanks to Cloudflare's edge network, the site loads incredibly fast across the globe. On a standard 4G mobile connection, the initial page load clocks in at around 200ms, delivering a frictionless, instant-play experience.
๐ฎ Test Your Own Color Memory!
The site is fully live in English with a clean, distraction-free UI. There are no signups, no paywalls, and no installations required โ a full 5-round game takes less than 3 minutes.
Give it a spin here: https://toon-tone.net/?utm_sorce=https://dev.to/
Once you finish a run, drop a screenshot of your scorecard in the comments, or let me know: which character's color made you completely question your own memory?
Top comments (0)