← Back to Toon Tone

About Toon Tone

What Is Toon Tone?

Toon Tone is a color matching game that tests how well you know the real colors of everyday visuals. The first game mode focuses on world flags — you see a flag, pick the color you think matches each region, and get scored on accuracy.

How It Works

Each round presents a flag from one of the 193 United Nations member states. The flag is broken into key color regions — stripes, fields, shapes, or symbols. You use an HSB color picker (Hue, Saturation, Brightness) to select your best guess for each region. After locking your guess, Toon Tone calculates the perceptual color distance using Delta E (CIELAB) and converts it into a 0–100 accuracy score.

Why We Built It

Most people see flags every day but have never tried to match their exact colors. Toon Tone turns that gap into a game. It is a simple idea — guess the color, see how close you were — but the scoring system uses real color science to make it precise and educational.

Color Data

Flag colors are based on approximate RGB and HEX values sourced from Wikipedia and common open-source datasets. They are optimized for digital gameplay, not physical reproduction. Values may differ from official printing standards including Pantone references.

Country identification follows ISO 3166-1 alpha-2 codes. Only the 193 UN member states are included in the current release.

Tech Stack

  • Built with Next.js and React
  • Pure CSS — no UI framework
  • SVG flag assets from open-source libraries
  • Delta E (CIELAB) color difference algorithm
  • HSB color picker with hue wheel and saturation board

Contact

Have feedback, found a bug, or want to say hello? Reach out at contact@toon-tone.site.