Constructing Color Contrasts and Harmony (Itten)

When you live-code visuals for an AV set, the palette is your harmony section: a shader that hits the projector with an arbitrary RGB triple is the visual equivalent of mashing random notes. This module builds the whole task of composing a palette on purpose — choosing hues the way a musician chooses a chord, then deploying contrast the way a player deploys dynamics. The capstone is that task in miniature: one abstract composition, four deliberate contrasts, a chord derived geometrically from the 12-hue circle, and an audit — do its constituents mix to neutral gray?

The arc starts fully supported. First, construct the circle itself and drill it until, as Itten insists, you know its 12 hues like a chromatic scale; the atoms on the 12-hue circle and the seven contrasts are your map. Next, work the contrasts one at a time in tiny studies: undiluted hue triads first (no mixing needed), then light-dark using the natural brilliance of hues, then cold-warm and complementary pairs, then the four ways of desaturating a color. The quality-vs-quantity distinction is the JIT tool that keeps these studies clean — hold brilliance constant when studying hue, and vice versa. Simultaneous contrast is not re-taught here; it arrives already trained from the prerequisite module on color relativity, ready to be spotted when it shows up in your studies. Finally, inscribe triangles and squares in the circle to generate chords, and test them with the neutral-gray rule before composing unsupported.

Every required atom is a gate: you cannot derive the chord without the circle and its geometric figures, deploy four contrasts without knowing each one, or verify gray without the harmony rule. The supporting atoms enrich the practice — additive-vs-subtractive mixing matters if you verify gray in code rather than paper, and palette transposition and master studies extend the skill into ongoing repertoire-building.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

gamma-correction

col = pow(col, vec3(1.0/2.2));

_{glsl-0021 · public-domain}

pow ([lo,mid,hi]) 0.4545 >> rgb

_{punctual-0034 · CC0-1.0}

vignette

smoothstep [0.3,1.2] (1 - fr) >> mul

_{punctual-0029 · CC0-1.0}

col *= smoothstep(1.2, 0.3, length(uv));

_{glsl-0035 · public-domain}

color-temperature

col *= vec3(1.1, 1.0, 0.85);

_{glsl-0116 · public-domain}

value-contrast

stroke(255); fill(0); rect(0, 0, w, h)

_{p5live-0027 · CC0-1.0}