Building Toon Tone: A Browser-Based Color Matching Game with HSB Sliders

I recently built a small browser game called Toon Tone.

You can try it here:

https://toontone.work/

Toon Tone is a simple color matching game. The player sees a target color and tries to recreate it by adjusting three sliders:

• Hue
• Saturation
• Brightness

After submitting a guess, the game calculates how close the selected color is to the target color and gives the player a score. Each game has 10 rounds.

The concept is simple, but building it was a good reminder that even small browser games require a lot of product and implementation decisions.

The Original Idea

The first idea was more visual.

I wanted Toon Tone to be a cartoon-style color memory game. A player would see a cute character, remember the color of one part of the character, such as a hoodie, hat, or accessory, and then recreate that color with sliders.

For example:

Remember the hoodie color.

Now match it from memory.

That sounded more unique than a normal color tool, but the asset workflow became complicated very quickly.

To make a character-based version work, I needed layered image assets:

• A base character image
• A mask for the color-changing area
• A shading or highlight layer
• Perfect alignment between all layers

If the mask and shading layers were even slightly misaligned, the result looked broken. SVG was easier to control, but the generated characters often looked too rough. PNG illustrations looked better, but separating and aligning layers took too much time.

So I decided to simplify the first version.

Instead of starting with characters, I built a pure color card version first.

Why Start With Color Cards?

The main goal of the MVP was to test the core game loop:

1. Show a target color
2. Let the user adjust the sliders
3. Preview the selected color in real time
4. Submit the guess
5. Calculate a score
6. Move to the next round

This version removed the hardest visual production problems and helped me focus on the actual gameplay.

The questions I wanted to answer were:

• Is matching colors fun?
• Are HSB sliders intuitive?
• Is 10 rounds the right length?
• Does scoring create replay value?
• Does the game work well on mobile?

Those questions felt more important than solving character asset layers too early.

Why HSB Instead of RGB?

I chose HSB controls because they feel more natural for a casual color matching game.

RGB is useful for developers, but it can feel technical for general users. If you ask a player to adjust red, green, and blue values directly, the experience quickly becomes less intuitive.

HSB is easier to understand:

• Hue changes the color family.
• Saturation changes how intense or muted the color is.
• Brightness changes how light or dark the color appears.

This makes the game easier to play without requiring color theory knowledge.

HSB to RGB Conversion

The sliders control HSB values, but the browser needs RGB or HEX values to display colors.

Here is a simplified version of the conversion logic:

ts
type HSB = {
  h: number; // 0 - 360
  s: number; // 0 - 100
  b: number; // 0 - 100
};

type RGB = {
  r: number;
  g: number;
  b: number;
};

function hsbToRgb({ h, s, b }: HSB): RGB {
  s /= 100;
  b /= 100;

  const k = (n: number) => (n + h / 60) % 6;
  const f = (n: number) =>
    b - b * s * Math.max(Math.min(k(n), 4 - k(n), 1), 0);

  return {
    r: Math.round(255 * f(5)),
    g: Math.round(255 * f(3)),
    b: Math.round(255 * f(1)),
  };
}