colorMode(HSB) makes hue, saturation, and brightness independently controllable axes

HSB (Hue, Saturation, Brightness) reframes color along three perceptual axes rather than RGB’s red/green/blue light amounts: hue is the color identity (an angle on the color wheel, e.g. 0=red, 120=green, 240=blue on a 0-360 scale), saturation is intensity from gray to vivid, and brightness is lightness from black to full color. Because these axes match how humans describe color, HSB makes several operations trivial that are awkward in RGB: sweep a spectrum by incrementing hue; hold perceptual intensity constant by fixing S and B; fade a color by lowering B without shifting hue. In p5.js or Processing you activate it with colorMode(HSB, 360, 100, 100), which sets each channel’s range. Misconception/boundary: calling colorMode(HSB) with no range arguments defaults all channels to 0-255, so hue wraps at 255 instead of 360. Component-extraction functions red(), green(), blue(), hue(), saturation(), brightness() read individual channels from a stored color.

Examples

colorMode(HSB, 360, 100, 100); for (int h = 0; h < 360; h++) { stroke(h, 100, 100); line(h, 0, h, 100); } // smooth hue gradient: increment hue, hold S and B

colorMode(HSB, width, height, 100); fill(gridX, height - gridY, 100); — maps canvas x to hue and y to saturation, painting the full spectrum in a nested loop.

Assessment

Using colorMode(HSB, 360, 100, 100), draw 36 rectangles each 10 degrees of hue apart at full saturation and brightness, then add a slider controlling brightness for all. Explain which parameter you increment and which you hold constant for a smooth left-to-right hue gradient, and what goes wrong if you omit the range arguments.