HSB COLOR GAME
HSB Color Game
Learn Hue, Saturation, and Brightness through play. The most intuitive color theory game online — match original cartoon character colors and score up to 100 per round.
H
Hue
0° – 360°
The color wheel angle. 0°=red, 120°=green, 240°=blue.
S
Saturation
0% – 100%
How vivid or gray the color is. 0%=gray, 100%=full color.
B
Brightness
0% – 100%
How light or dark. 0%=black, 100%=max brightness.
Play the HSB Color Game
1/5
🦊
Arctic Fox Scout
Guess the color of the arctic fox's ice crystal badge
hard
Pale glacier blue, cold and crystalline
YOUR GUESS
#59B3B3
hidden
TARGET
??????
H
180°S
50%B
70%Why HSB Instead of RGB?
HSB (Hue–Saturation–Brightness)
- ✓Matches how humans describe color ("a dark blue", "a vivid red")
- ✓Easy to adjust one property without affecting others
- ✓Intuitive for artists and designers
- ✓Used in Photoshop, Figma, Procreate
RGB (Red–Green–Blue)
- ✗Hard to visualize (what is rgb(143, 82, 212)?)
- ✗Changing one channel shifts both hue and brightness
- ✗Not intuitive for color mixing
- ✓Good for technical screen output
HSB Quick Reference
Red
H:0 S:90 B:88
Orange
H:25 S:90 B:95
Yellow
H:55 S:90 B:96
Green
H:130 S:75 B:65
Cyan
H:185 S:80 B:78
Blue
H:220 S:80 B:75
Purple
H:270 S:70 B:72
Pink
H:340 S:55 B:95