Curator's guide · Acc. 2026.008 · How this room was built
The wall is the instrument
Concept
CHROMA is a fictional institute for colour perception, staged as a white-walled gallery where every exhibit is a working instrument. The fifth instrument is the page itself. In main.js, driftHue() advances one root variable, --hue, around OKLCH hue space every ninety seconds, while setHue() lets the header wheel hold or manually tune the room. The wordmark disc, wall wash, numerals, buttons, labels and footer strip all derive from that value with oklch(), calc() offsets and a few text-safe deeper accents. initWallSampler() adds a pointer chromatometer: it samples cursor position into a local hue offset, moves with one queued requestAnimationFrame() and shuts down when the document is hidden.
The instruments
01 — Gradient Field Synthesiser. Five draggable points sit over a canvas. renderMesh() computes inverse-square weights on a 96×64 grid and blends in OKLab via oklchToLab() and labToRgb(); the low-resolution field is stretched with drawImage(), keeping the hand movement smooth while the mixtures stay luminous.
02 — Ramp Comparator. buildRamps() builds nine OKLCH lightness strides, tapering chroma and using gamutMapChroma() to pull each swatch into sRGB. Beside it, a naive HSL ramp uses matched hue. lstar() converts both rows to CIE L*, prints the stride lengths and reports σ(ΔL*) so the proof is measured rather than merely asserted.
03 — Simultaneous Contrast. Two grounds, offset from --hue, surround identical oklch() chips. The verify slider writes --meet; CSS left and right calculations slide the chips into a single bar, exposing the illusion.
04 — Spectral Ribbon. paintRibbon() writes one row of ImageData, a 360° sweep at constant lightness and chroma, and stretches it full-width. renderStops() rebuilds pins and chips; click, keyboard Enter, or reset, then copy a working linear-gradient(in oklch, …).
Palette & type
- Walloklch(97.6% 0.006 h) — drifts faintly
- Ink#1a1915 · soft #56534a
- Accentoklch(62% 0.19 var(--hue))
- Accent, text-safeoklch(42% 0.15 var(--hue))
- DisplaySix Caps — ultra-condensed wall scale
- LabelsChivo Mono — wall labels, readouts, buttons
- BodyArchivo — 1.0625rem / 1.62
The requested Big Shoulders Display file is not present in the self-hosted library, so the pass uses Six Caps as the closest installed condensed display face. The grammar stays museum-specific: huge numerals behind frames, accession rails, mono wall labels, a "please touch" line, and a hue station whose needle rotates with transform: rotate(calc(var(--hue) * 1deg)).
Reproduce this
Prompt an agent with: "Build a single-page laboratory of colour as a white-wall gallery. Drive one root variable, --hue, through 0–360 over 90 s and derive the full interface from OKLCH. Implement OKLCH→sRGB math, gamut mapping, a drag-tunable hue station, a pointer chromatometer, a draggable OKLab mesh, an OKLCH-vs-HSL ramp with CIE L* proof, an Albers contrast slider and a full-bleed spectral ribbon with copyable stops. Make it feel like a museum instrument: condensed display type, mono accession labels, giant numerals, wall texture, staggered reveals, keyboard access, copy feedback, prefers-reduced-motion support and no external assets."