HSB Color Theory Lab
Master the variation-first approach to color design with hands-on HSB manipulation
HSB Color Controls
Adjust Hue, Saturation, and Brightness to see real-time changes
210°
Color wheel position (0° = Red, 120° = Green, 240° = Blue)
70%
Color intensity (0% = Gray, 100% = Pure color)
50%
Color lightness (0% = Black, 100% = Full brightness)
#265380
HSB(210, 70%, 50%)
HSB Theory Fundamentals
Why HSB Over RGB/Hex?
- • More intuitive for designers to understand
- • Easier to create harmonious color variations
- • Better control over color relationships
- • Natural way humans perceive color
The Core Variation Rule:
Darker = Lower Brightness + Higher Saturation
This creates natural-looking darker variations that maintain visual harmony
Hue
Color family
Saturation
Color intensity
Brightness
Lightness