Interaction

Palette builder

Generates a five-stop brand direction in OKLCH, morphs the swatches into it, and shows the set applied to a page with its contrast ratio.

37 / 74

Where it earns its place

Brand and design-system work: exploring directions with a client, token documentation, or a theme picker that has to stay legible.

Starts from the Kinetiq house tokens and names each direction, with token names, copyable hex, L and C per stop, and a small page preview using the set.
Kept the colour science: stops chosen in OKLCH, chroma pulled back per swatch only as far as the sRGB gamut needs, and a new hue region every press. A deep yellow now becomes a warm neutral instead of being lifted beside a same-weight neighbour.
Every direction now keeps a near-white and a near-black so it can carry text, and the preview reports the WCAG contrast of type on ground instead of leaving legibility to chance.
Kept the morph where each swatch pulls into a circle and the colour swaps at its smallest, plus the slab's small give; dropped the gooey SVG filter and drag-skew so the seams stay crisp.
Reduced motion swaps the palette instantly, and a press during a morph is ignored rather than queued.