How To Play Cartoon Color Quiz
Everything you need to know to master the HSB color guessing game
Game Steps
Read the Character Prompt
Each round shows you an original cartoon character and a specific prompt. A text hint describes the target color in words. The character shape shows in gray until you submit.
Drag the H, S, B Sliders
Three sliders control your color: Hue (0-360deg, the color wheel), Saturation (0-100%, vividness), and Brightness (0-100%, lightness). The character shape fills with your current color in real time.
Lock It In
Click 'Lock It In' to submit. The target color is revealed on the right. Your score, HSB delta breakdown, and a progress bar appear instantly.
Play 5 Rounds
After 5 rounds you see your average score out of 10.00 and an emoji result card to share. Use the Hint button any time — it reveals your largest error channel but costs -0.8 pts.
Scoring System
Your score is based on the 3D Euclidean distance between your guess and the target in normalized HSB space. A perfect match = 10.00 points. A completely wrong color = 0.
dH = min(|H_guess - H_target|, 360 - ...) / 180
dS = |S_guess - S_target| / 100
dB = |B_guess - B_target| / 100
dist = sqrt(dH^2 + dS^2 + dB^2) / sqrt(3)
score (0-10) = 10 x (1 - dist)
Using the Hint button deducts 0.8 pts from that round.
9.5 – 10.0
Perfect!
8.0 – 9.4
Excellent
6.5 – 7.9
Great
5.0 – 6.4
Good
3.5 – 4.9
Fair
0 – 3.4
Keep Trying
Understanding HSB Color
H — Hue
0° → 360°
0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta. Wrap-around at 360°.
S — Saturation
0% → 100%
0% is fully gray with no color. 100% is the most vivid version of the hue. Pastels are low-S, neon is high-S.
B — Brightness
0% → 100%
0% is pure black regardless of hue. 100% is the brightest possible version. Night-time colors are low-B.
Pro Tips
- 1.
Set Hue first — it's the biggest factor. Get on the right color family before touching S and B.
- 2.
Pastels = high Brightness (85-100%) + low Saturation (15-40%).
- 3.
Neon / vivid = high Saturation (80-100%) + high Brightness (85-100%).
- 4.
For near-grays: keep S very low (0-15%) and only tune Brightness.
- 5.
The white target marker line on each slider shows where the answer is — after you submit.
- 6.
Use Hint wisely — it reveals your worst channel and sets it for you, costing only 0.8 pts.
- 7.
Daily challenge repeats the same set for everyone — compare scores with friends!