HSB describes color as hue, saturation, and brightness for intuitive, intentional variation

HSB (also called HSV) describes color along three axes: hue (angle on the color wheel, 0-360 degrees), saturation (intensity/purity, 0=grey to full color), and brightness (perceived lightness, 0=black to full). It is the reference model in design and shader tools — Figma, Photoshop, CSS. HSB is more intuitive than RGB for making and animating color decisions because its axes map to how we perceive and describe color: ‘a lighter version of this blue’ becomes higher brightness and lower saturation directly, rather than opaque adjustments to three light channels. This makes spatial and temporal color operations natural — mapping x to hue and y to brightness yields a spectrum, and incrementing hue over time cycles color. Boundary: HSB is not perceptually uniform; HSL and Oklab are closer to human perception. Shader languages like GLSL have no native HSB, so you convert with hsb2rgb()/rgb2hsv() helpers.

Examples

Figma: base blue H=210, S=80%, B=80% -> hover state S=90%, B=70% (darker: more saturated, less bright).

// x->hue, y->brightness spectrum
vec3 color = hsb2rgb(vec3(st.x, 1.0, st.y));
gl_FragColor = vec4(color, 1.0);
// animate hue over time:
vec3 animated = hsb2rgb(vec3(fract(u_time * 0.1), 1.0, 1.0));

Assessment

Explain what each of H, S, B controls. A friend adjusts RGB by trial and error to make a red ‘darker’ — explain why tweaking B and S in HSB is more predictable. Write a shader that cycles the full hue spectrum across the screen width and say why RGB would be more awkward for the same effect.