Why HSB Beats RGB for Color Guessing Games
When we built Toon Tone, the most important interface decision was: which color model do the sliders represent? RGB is the obvious default — it's how every screen renders pixels — but it's also catastrophically wrong for a game that asks humans to guess colors. This post explains why we picked HSB instead, and why every color guessing game should do the same.
The two color models, in 30 seconds
RGB describes a color by how much red, green, and blue light it emits. Each channel runs 0 to 255. (255, 0, 0) is pure red. (255, 255, 0) is yellow because red and green light combined makes yellow on a screen. The model is correct for hardware: that's literally what your monitor's subpixels do.
HSB (also called HSV) describes a color by hue (0–360°, where on the color wheel), saturation (0–100, how vivid), and brightness (0–100, how light). (0, 100, 100) is the same pure red. (60, 100, 100) is yellow because you turned the hue dial 60 degrees. The model is wrong for hardware but right for human intuition.
Three reasons RGB is wrong for a color guessing game
1. RGB doesn't match how humans describe color
Ask someone to describe a color and they'll say "a darker red" or "a more orange yellow" or "a washed-out blue." Nobody says "a color with 30% more green." Even professional designers, who learn RGB on day one, talk about color in HSB terms. The vocabulary of color is a vocabulary of hue, vividness, and brightness — three knobs, not three light intensities.
If a slider doesn't match the player's mental model, the player has to do mental arithmetic to use it. Mental arithmetic during a memory recall task is the worst possible UX. Toon Tone players need to put a remembered color into the interface as quickly as possible; HSB lets them do it in one step (rotate hue), RGB makes them do it in three.
2. RGB sliders don't behave linearly the way they look like they should
Drag the red channel from 100 to 200 and the swatch barely changes. Drag green from 100 to 200 and the swatch leaps to a totally different family. The eye is not equally sensitive to the three primaries — green dominates perceived brightness, blue contributes the least. RGB sliders look identical but produce wildly different visual deltas per unit moved.
For a guessing game, that asymmetry is fatal. A player overshoots green by 20 and the swatch is unrecognizable; the same overshoot in red barely registers. Scoring becomes unfair across hues.
3. RGB doesn't isolate the dimensions players actually care about
Players who miss a guess want to know which dimension they were off on. With HSB, the score breakdown is clean: "you nailed hue, but were 20 points too saturated." That's actionable feedback. With RGB, the breakdown is "you were 14 too high on red, 22 too low on green, 8 too high on blue" — meaningless to a human.
Color theory teaches that hue, saturation, and brightness are independent perceptual axes. RGB axes are not perceptual — they're hardware. A good UX teaches the user about themselves; HSB teaches the user that they undershoot saturation. RGB teaches nothing.
Why we didn't go with Lab or OKLab
Honest question we wrestled with for a week. Lab and OKLab are perceptually uniform — equal numerical distances correspond to equal perceived differences, which would make scoring even fairer than HSB. But there are two practical problems:
- Lab is unintuitive. The L channel is brightness, but a and b are "green-red" and "blue-yellow" axes that no non-specialist understands. Players would need a tutorial just to know which way to drag.
- Lab has out-of-gamut zones. Some Lab triples don't correspond to any displayable RGB color. Sliders that produce invalid colors are a usability nightmare.
So we use HSB for the interface and a perceptual distance metric for scoring under the hood — best of both worlds.
The scoring function, briefly
Toon Tone scores each guess on a 0–10 scale by computing a weighted distance between guess and target in HSB space:
score = 10 - 0.4 * |Δhue normalized| - 0.3 * |Δsat| - 0.3 * |Δbright|Hue is weighted slightly higher because misjudging hue is the most diagnostic kind of miss — a brightness miss still gets the color family right; a hue miss means you remembered the character wrong. The exact weights are tuned to make 7.0 feel like "got the family right," 8.5 feel like "close enough that a designer would accept it," and 9.5+ feel like "uncanny eye."
What this means for other game designers
If you're building a color guessing game, the takeaway is simple:
- Use HSB sliders for the input UX.
- Score with HSB or a perceptual metric — never raw RGB Euclidean distance.
- Show the breakdown by H/S/B in the result card so players learn which dimension they're weak on.
- Resist the temptation to add a fourth slider for alpha or a fancy color picker — three sliders is the right complexity for a memory recall task.
If you're a player wondering why Toon Tone feels different from other color games you've tried — this is most of the reason.