Generating Palettes in HSB for Generative Work

In a live-coded visual set you rarely have time to hand-pick a palette mid-performance — and pre-baked color-wheel schemes go stale the moment the music shifts. What survives on stage is a palette function: one base hue in, a whole coherent color world out. This module builds exactly that. It matters because a single-hue palette generated in code stays coherent no matter how the audio drives it, and because HSB is the color model your sketch tools (and, via conversion helpers, your shaders) actually speak.

The arc starts supported: first, get fluent reading and writing color as hue, saturation, brightness — “HSB describes color as hue, saturation, and brightness” is your JIT reference when a variation looks wrong. Then internalize the design stance from “the fundamental color skill is modifying one base color into many variations, not picking color-wheel palettes”: color is a manipulation skill, not a selection skill. The pivotal drill is the dark rule — darker means lower brightness AND higher saturation, never just adding black — practiced until producing a convincing shade is automatic. A guided exercise hand-derives five variations of one hue; the procedure atom on building a complete design from one hue then shows how those variations cover backgrounds, foregrounds, accents, and states. The capstone removes the scaffolding: your sketch must generate the whole palette algorithmically and render with nothing else.

The four required atoms gate the capstone directly — without the HSB axes, the variation-over-palette principle, the single-hue procedure, and the dark rule, the sketch either can’t be written or produces muddy darks. The Itten atoms (quality vs. brilliance, the color sphere) are supporting enrichment: they deepen the theory behind why hue and luminosity are independent dimensions, connecting this workflow back to classical color models.

Walkthrough

You’ll build a palette(hue) function — one base hue in, a whole coherent ramp out — then paint a composition that uses only that palette. Paste each sketch into the p5 web editor and press Run (▶). Each step is a complete, standalone sketch.

1 — switch to HSB. In the default RGB mode you can’t “vary a colour” along any meaningful axis. colorMode(HSB, 360, 100, 100) re-labels the three numbers as hue (0–360, the colour), saturation (0–100, its intensity), and brightness (0–100, its lightness) — now each is a knob you can turn independently. Sweep hue across eight swatches ([[hsb-color-system]]).

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}
function draw() {
  background(0, 0, 12);
  for (let i = 0; i < 8; i++) {
    fill(i * 45, 80, 90);        // hue steps 0→315, sat + brightness fixed
    rect(i * 50, 150, 50, 100);
  }
}

2 — one hue, brightness only (the naive shade). Freeze the hue and ramp only brightness. This is what most beginners do to make “darker” versions — and you can already see the problem: the dark end goes grey and lifeless, because a real object in shadow doesn’t just get dimmer ([[color-variation-over-palette]]).

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}
function draw() {
  background(0, 0, 12);
  let hue = 210;                 // one base hue (a blue)
  for (let i = 0; i < 8; i++) {
    let bright = map(i, 0, 7, 20, 100);
    fill(hue, 70, bright);       // only brightness moves → washed-out darks
    rect(i * 50, 150, 50, 100);
  }
}

3 — the dark rule. The fix, and the single most useful colour move you’ll learn: to make a colour darker, lower brightness and raise saturation together. Shadows are more saturated, not just dimmer. Here t runs 0 (darkest) → 1 (lightest); brightness climbs while saturation falls, so the darks stay rich instead of muddy ([[darker-color-variation-hsb-rule]]).

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}
function draw() {
  background(0, 0, 12);
  let hue = 210;
  for (let i = 0; i < 8; i++) {
    let t = map(i, 0, 7, 0, 1);          // 0 = shadow, 1 = highlight
    let bright = map(t, 0, 1, 30, 100);
    let sat = map(t, 0, 1, 95, 45);      // darks high-sat, lights low-sat
    fill(hue, sat, bright);
    rect(i * 50, 150, 50, 100);
  }
}

4 — wrap it in a palette(hue) function. Package the dark-rule ramp so any hue produces the same coherent five-swatch spread — index 0 the shadow, index 4 the highlight. This function is the reusable artifact; change the one argument and the whole colour world shifts, on the beat ([[single-color-palette-generation]]).

function palette(hue) {
  let cols = [];
  for (let i = 0; i < 5; i++) {
    let t = i / 4;                                   // 0 = darkest
    cols.push(color(hue, map(t, 0, 1, 95, 40), map(t, 0, 1, 35, 100)));
  }
  return cols;                                        // [shadow … highlight]
}
function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}
function draw() {
  background(0, 0, 12);
  let pal = palette(30);                              // one hue → whole ramp
  for (let i = 0; i < pal.length; i++) {
    fill(pal[i]);
    rect(i * 80, 150, 80, 100);
  }
}

5 — a composition in one hue (the capstone). Now paint with nothing but pal: the darkest swatch is the ground, the lighter four fill a breathing grid. Everything on screen descends from a single number, 265 — proof that a palette function beats a hand-picked scheme, because it stays coherent no matter what you feed it ([[color-variation-over-palette]]):

function palette(hue) {
  let cols = [];
  for (let i = 0; i < 5; i++) {
    let t = i / 4;
    cols.push(color(hue, map(t, 0, 1, 95, 40), map(t, 0, 1, 35, 100)));
  }
  return cols;
}
let pal;
function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  pal = palette(265);                                 // one base hue drives all of it
}
function draw() {
  background(pal[0]);                                 // shadow swatch as ground
  for (let gx = 0; gx < width; gx += 50) {
    for (let gy = 0; gy < height; gy += 50) {
      let idx = 1 + ((gx + gy) / 50) % (pal.length - 1);   // cycle swatches 1–4
      fill(pal[floor(idx)]);
      let s = 30 + 14 * sin(frameCount * 0.04 + gx * 0.03 + gy * 0.02);
      ellipse(gx + 25, gy + 25, s, s);
    }
  }
}

What good looks like. A single-hue palette should read as one colour family with depth — a clear darkest and lightest, and the darks looking rich, not grey. That richness is the dark rule doing its job; the beginner tell is a shade that’s just the hue with brightness pulled down, which goes chalky and dead. Keep value contrast between ground and shapes so the composition reads on a projector (which crushes midtones). To signal a section change live, move the one hue argument — warm for a build, cool for a breakdown — and the whole scene shifts in sympathy. (Skill map: live-visualist Domain B2 — colour: restrained palette, value contrast, palette shift as a section cue.)

Now make it yours. Change the 265 to any hue and watch the whole piece re-tint. Widen the ramp’s saturation spread (95, 40) for more punch, or narrow it for a chalkier pastel look. Add a sixth swatch by looping to 6. Drive the hue itself from frameCount for a slow colour drift. Use pal[floor(idx)] for strokes and pal[0] for fills to invert figure and ground.