CHROMA Design guide · Site 08 of 25
How this site was made

Colour, given
coordinates.

CHROMA is a fictional colour-science institute. Its argument: colour is a place, not a property — every colour has an address in a solid, and the site lets you hold that solid and then cut it open.

Concept

The page inverts the usual rule that a colour-themed design must be colourful. The interface is achromatic — near-black, chalk, one hue-wheel dot in the wordmark — because all 4,200 colours in the point cloud are the content. The only decorated words are the ones that mean the spectrum itself.

Palette

Void#0E0E12
Chalk#F2F1EE
Everything else4,200 SAMPLES

Typography

Every colour, one solid.

Archivo Black — display. Swiss-laboratory conviction; big, tight, unsentimental.

H 212° · L 64% · C 88%

Martian Mono — instrument voice for coordinates and specimen labels.

Techniques

ElementHow it works
The solid4,200 points seeded through an HSL bicone (chroma radius shrinks toward black and white poles — like real colour solids). Positions and [h,s,l] data ride in buffer attributes; a custom point shader draws soft discs with per-point colour.
DissectionA 380vh pinned track scrubs two uniforms: uMode picks the axis (hue wedge / lightness slab / chroma shell) and uParam sweeps it. Points outside the slice fall to 6% alpha, so each axis becomes visible as a moving cross-section. The card's live readout prints the coordinate being cut.
OrbitPointer drag adds angular velocity with friction; the solid keeps a slow idle spin so it never plays dead.
Spectrum typeThe two gradient words use background-clip:text — the only chromatic ink in the interface.
Named coloursSix real pigment histories, each chip labelled in mix-blend-mode:difference so the hex stays legible on any chip.
AccessibilityReduced motion stops idle spin and entrances; drag and dissection (scroll-position driven) still work. All narrative is real text.

Interaction map

You doThe page does
Drag the cloudThe solid orbits with momentum
Scroll the dissectionA hue wedge sweeps 360°, a lightness slab rises floor to ceiling, a chroma shell grows core to skin
Hover a named colourThe vault card lifts out of the dark
← Back to the solid