A complete visual design can be built from one hue using only lighter and darker variations in HSB

Using the HSB variation rules (darker = lower brightness + higher saturation; lighter = higher brightness + lower saturation; hue optionally shifted toward luminosity extremes), a designer or visual coder can generate a fully coherent palette from a single starting color. Headers, body, hover states, backgrounds, borders, text, and active states can all be variations of one hue. This approach produces visual coherence naturally because all elements share the same hue ‘family’. For live-coded visuals, this means a single HSB hue + systematic variation can drive an entire screen’s color scheme audio-reactively without needing a pre-chosen palette.

Examples

An interface built from a single teal: the main area is mid-brightness mid-saturation teal; the header is lower brightness higher saturation; the background is very high brightness very low saturation (near white). All variations of one starting hue. In Hydra or GLSL, this can be computed from a single hue parameter by applying the brightness/saturation rules procedurally.

Assessment

Starting from a single hue of your choice, describe five distinct color variations you could use in an interface (or visual composition), specifying the HSB direction of change for each.