June 5, 2026
What Is HSB? A Beginner's Guide to Hue, Saturation, and Brightness
If you've used ColorFlex (or any modern color picker) you've seen those three sliders: hue, saturation, brightness. Together they're called HSB — sometimes written HSV — and they're how designers, illustrators, and 3D artists actually think about color. Here's the fast version so you can read the picker fluently and stop second-guessing every round.
Hue: the color family Hue is what most people mean when they say "color". It's the position around a 360-degree color wheel: - 0° = red - 30° = orange - 60° = yellow - 120° = green - 180° = cyan - 240° = blue - 300° = magenta - 360° = back to red
When you move the hue slider in ColorFlex's picker, you're rotating around this wheel. Hue is independent of how light or how vivid the color is — pure red and pale pink share the same hue (0°).
Saturation: how vivid Saturation is how pure or how gray the color is. Expressed as a percentage: - 100% saturation = pure, vivid, fully chromatic - 50% saturation = the color you'd actually use in a brand kit - 0% saturation = no color at all, just a shade of gray
Most "real world" colors live between 20% and 80% saturation. Brand colors tend to sit around 70-90%. Pastel and dusty shades sit around 20-40%. The most common beginner mistake in color-guessing games is over-saturating — players assume colors are at 90-100% when they're really at 60-75%.
Brightness: how light Brightness (sometimes called value) is how much light is in the color. Also a percentage: - 100% brightness = full luminance - 50% brightness = the color at half intensity - 0% brightness = pure black, regardless of hue
A color at 100% saturation and 0% brightness is black. A color at 0% saturation and 100% brightness is white. Everything else lives in between.
Why HSB and not RGB? RGB (red, green, blue) is how screens *display* color, not how humans *think* about it. Saying "make it a bit more orange" is intuitive in HSB (nudge the hue slider 10°). In RGB you'd have to do mental math on three channels. HSB matches the language we naturally use for color, which is why every modern design tool defaults to it.
Why HSB matters for ColorFlex ColorFlex grades your guess in HSB distance, not RGB distance, because HSB distance correlates better with how close two colors actually *look* to a human eye. A 10-point miss on the hue dimension feels meaningfully different from a 10-point miss on saturation, and ColorFlex's score reflects that.
Reading the ColorFlex picker The picker has three controls: - Hue wheel/slider: pick the color family (red, orange, yellow, etc.) - Saturation slider: how vivid (left = gray, right = pure) - Brightness slider: how light (left = dark/black, right = light/white)
When you start a round, ask three questions in this order: 1. What family is this? (hue) 2. How vivid is this? (saturation — usually less than you'd guess) 3. How light is this? (brightness)
Lock hue first, then saturation, then brightness. Score breakdown after each round will show you which dimension cost you the most points. Use that feedback to recalibrate.