Primary Heroics
Inspired by classic Superman comics
A confident red, blue, and yellow system built for instant recognition.
hsb(212 100% 72%)
hsb(358 88% 89%)
hsb(49 100% 100%)
hsb(48 6% 97%)
Match the target color
Ten rounds per game. Tune hue, saturation, and brightness—no hex cheats. Score each guess by perceptual distance (ΔE).
Progress
Round 1 / 10
Score
0 pts
Target color
Match this color
Tune your color on the right, then submit when it feels close.
Your selection
H200 S55 B70
200°
55%
70%
Toon color studies
Toon comic color sample palettes
In Toon Tone, toon means cartoon. Explore HSB color systems inspired by world-famous comic icons for visual study and color practice.
Gotham Contrast
Inspired by classic Batman comics
Deep nocturnal neutrals with a sharp signal yellow for high drama.
hsb(221 56% 15%)
hsb(216 36% 29%)
hsb(44 73% 96%)
hsb(220 3% 92%)
Web-Slinger Pop
Inspired by classic Spider-Man comics
Bright red and blue primaries balanced by ink-like shadow tones.
hsb(350 98% 85%)
hsb(224 87% 85%)
hsb(229 71% 15%)
hsb(210 2% 99%)
Amazonian Emblem
Inspired by classic Wonder Woman comics
Regal red, gold, and blue accents with a clean parchment highlight.
hsb(0 85% 73%)
hsb(42 66% 96%)
hsb(224 78% 54%)
hsb(48 16% 100%)
Gamma Energy
Inspired by classic Hulk comics
Electric green and purple contrast with heavy comic-book impact.
hsb(142 67% 87%)
hsb(143 78% 40%)
hsb(272 83% 81%)
hsb(242 64% 51%)
Mutant Team Shell
Inspired by classic Teenage Mutant Ninja Turtles comics
Green shell tones meet saturated mask colors for fast team reads.
hsb(123 63% 49%)
hsb(89 63% 70%)
hsb(0 72% 94%)
hsb(25 91% 98%)
How to use Toon Tone
In Toon Tone, one game is ten rounds. Each round compares your pick to a secret target color—no hex values are shown, so rely on your eye and the HSB sliders.
- 1Study the target — the left swatch shows the color to match as closely as you can.
- 2Adjust H, S, and B — the right preview updates live. Hue is color angle, saturation is intensity, brightness is how bright the color feels.
- 3Submit your guess — you’ll see how far off you were and your points for that round.
- 4Play all ten rounds — then review every target next to your pick on the results screen.
- 5Start over anytime — use New game or Play again for a fresh set of random target colors.
Toon Tone FAQ
In Toon Tone, what is ΔE (delta E), in simple terms?
In Toon Tone, after you submit, ΔE is one number that says how different your color is from the target—like a distance score. Lower is better: small ΔE means the two colors are very similar; big ΔE means they're far apart. You don't need Toon Tone's scale memorized—just know Toon Tone uses it to measure "how far off" you were.
Technical note: Toon Tone converts both colors into a standard color space (CIELAB) that lines up better with human vision than raw screen pixels, then takes the straight-line distance between them. In Toon Tone, that distance is what we call ΔE here.
In Toon Tone, what are pts (points)?
In Toon Tone, pts are your Toon Tone game score in plain numbers. Each turn in Toon Tone, you can earn up to 100 pts depending on how close you got. The Toon Tone number at the top is your running total across turns you've already finished. When Toon Tone's all 10 turns are done, the best possible total is 1,000 pts (100 × 10).
In Toon Tone, how is one turn’s score (pts) calculated?
In Toon Tone, when you press Submit guess, Toon Tone compares your color to the target, gets one ΔE for that turn, then turns ΔE into pts using this Toon Tone rule:
pts for this turn = round( max(0, 100 − 2 × ΔE) )
In words for Toon Tone: the farther off you are (bigger ΔE), the fewer pts; a near-perfect Toon Tone match (ΔE near 0) is close to 100 pts. Toon Tone scores cannot go below 0.
Toon Tone examples: ΔE ≈ 0 → about 100 pts; ΔE = 10 → 80 pts; ΔE = 25 → 50 pts.
Why does Toon Tone use sliders (HSB) instead of typing a hex code?
Toon Tone wants you to look at color and nudge it like you would in a design app—warmer, cooler, stronger, softer, darker, lighter. In Toon Tone, the target never shows a hex code, so the challenge stays visual instead of copy-paste.