HSB Color Game
A color matching puzzle built on hue, saturation, and brightness — the three axes designers and artists actually think in. Five rounds per UTC day, 0-100 per round, shareable result grid.
HSB sliders, not RGB. Hue first, saturation second, brightness last.
Scoring weighted by perceptual distance, not raw delta.
Preparing today's puzzle
Why HSB beats RGB for a color game
RGB lives in the monitor — each channel describes how much red, green, or blue light the screen emits, on a scale of 0-255. That works for hardware but not for humans. A 10-unit change in the green channel of a saturated yellow is invisible; the same 10-unit change in a desaturated blue can swing the whole perceived hue. RGB sliders, in other words, give you unequal step sizes that depend on where you already are in the color space. A puzzle built on RGB sliders punishes geography, not skill.
HSB fixes that by compressing color into three perceptually meaningful axes. Hue is the wheel — 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. Saturation is the wash-out axis — 0 is gray, 100 is pure. Brightness is the lighting axis — 0 is black, 100 is the brightest the screen can show. A 10-point miss on any of those axes lands roughly the same magnitude of visual error anywhere in the cube, which is what makes HSB scoring fair.
HSB vs RGB vs HEX side by side
| System | Three numbers | How it's used | Color-game fit |
|---|---|---|---|
| HSB | Hue 0-360, Sat 0-100, Bright 0-100 | Color pickers, design tools, paint apps | Best — perceptually uniform |
| HSL | Hue 0-360, Sat 0-100, Light 0-100 | CSS, web design | Good — but lightness is non-intuitive at extremes |
| RGB | Red 0-255, Green 0-255, Blue 0-255 | Monitor hardware, image files | Bad — unequal perceptual steps |
| HEX | #RRGGBB (RGB in base 16) | Web copy/paste, brand guidelines | Unusable — six-digit guessing is not a game |
A pro's mental model
Working designers describe color in a fixed order: hue first (“it's a teal”), saturation second (“quite muted”), brightness third (“on the darker side”). That order is the same one this puzzle rewards — get the hue right and you're already at 50 points; saturation and brightness are the last 50. The fastest improvers on the daily challenge are the ones who train themselves to fully commit to hue before touching the other two sliders.
FAQ
- What is an HSB color game?
- An HSB color game uses hue, saturation, and brightness as the three input dimensions instead of red, green, blue (RGB) or hex codes. Hue is the rough color name (red, green, blue at 0°, 120°, 240° on the hue wheel), saturation is how punchy versus washed-out the color is (0-100), and brightness is how dark or light (0-100). HSB maps cleanly to how people describe color in plain language.
- Why use HSB instead of RGB for a color game?
- RGB is how monitors emit color, not how humans perceive it. A small RGB change can produce a large perceived change in some hue ranges and an invisible change in others, so RGB sliders make for an unfair puzzle. HSB compresses the same color space into three perceptually meaningful axes, so a 10-point miss on hue feels roughly the same anywhere on the wheel. That makes scoring fair and progress measurable.
- Do professional designers actually use HSB?
- Yes — most professional color pickers (Adobe, Figma, Sketch, Procreate, Photoshop's color picker) expose HSB or its sibling HSL as a primary input mode. Designers think in 'hue first, then saturation, then brightness' because that order matches how palettes are constructed in practice. The Toon Tone HSB color game is a casual version of the same mental model.
- What is the difference between HSB and HSL?
- HSB and HSL share the hue and saturation axes but treat the third axis differently. HSB (also called HSV) measures brightness as 'how much light is in the color' — pure white is brightness 100. HSL measures lightness as 'distance from the middle gray' — pure white is lightness 100, pure black is 0, and a fully saturated red is in the middle at 50. Most artists prefer HSB because it matches how paint and ink behave; most CSS code uses HSL because it's symmetric.
- How accurate does my HSB guess need to be to score 100?
- A perfect 100 requires being within roughly 5 degrees on hue and within 3 points on saturation and brightness. That's tighter than most casual players hit on round one, but achievable with practice. The scoring function applies the largest weight to hue distance, then saturation, then brightness, which mirrors how the eye prioritizes color information.