Prototype 2025: True Colors

Where the chord progression generator was about harmonic ideas for musicians, True Colors moves into visual territory: each chord in a curated library gets its own color palette, and playing that chord animates the screen in the colors it belongs to. The result is something between a music tool and a color tool — useful for anyone looking for palette inspiration tied to a mood or emotional register that only harmony can set.

The interactive explorer holds 50 chord–color scenes, split evenly between pop and jazz registers. Each scene carries a chord label, a 5-hex color palette, and a short flavor description — a one-line cultural reference that grounds the palette in something concrete: a landscape, a time of day, a material texture. The descriptions function as a bridge between the abstract (a chord voicing) and the visual (five color bands filling the screen).

Chord–Color Database

All 50 scenes live in colorChords.js as structured objects. Each entry defines the chord name, its quality and extension, the 5-hex palette keyed to each note of the voicing, and the flavor line. The pop half of the library tends toward warmer, more saturated palettes with romantic or cinematic references; the jazz half leans into cooler or more complex color combinations — the kind of dissonance that reads as sophistication rather than tension. Browsing through them is itself a kind of study in how mood maps across genres.

Playback and Animation

Clicking Play fires the chord through two simultaneous soundfont layers: electric_piano_1 for the attack and body, and pad_2_warm for the sustain underneath. The voicing is 5 notes — bass root an octave down, root, 3rd, 5th, and an extension — built at runtime from the chord's root, quality, and extension type. As each note sounds, its corresponding color band rises from the bottom of the screen. Five notes, five bands, a synchronized translation of the chord's harmonic structure into a visual one.

Tempo is adjustable from 20 to 80 BPM. At the low end the animation is slow and meditative — colors rise as if breathing. At the high end the strum feels more percussive and the visual follows. The Previous / Next controls let you step through all 50 scenes manually, comparing palettes as you go.

Post-Production

The final output follows the same pipeline as the chord progression generator: the browser session is captured live, audio is routed through Logic Pro for final treatment, and the visual output is polished and batch-exported in After Effects. The workflow is semi-automatic — the scenes step through in sequence and the recording captures the full run.