KQ-1164 · SWATCH/MIXER

Swatch Mixer

A colour input you fill by mixing paint: a pigment dragged off its pot follows the pointer 1:1 and, let go over the well, sinks in with a ripple while the well lands on the recoil spring; a tap hops a blob in along a short arc. The colour is the parts-weighted average of the pigments in OKLab and it does not swap: the new pigment curls in as a streak, stir lines sweep round, and the paint travels from the old mix to the new one over a stir whose length is `swirl`, while the dish's rim, a ring of one segment per pigment, re-divides on the glide spring and a segment dragged out of the dish takes that pigment away. Each pot is a slider: Left and Right move between pigments, Up, Enter and Space add a part, Down takes one away, Delete or Home take the pigment out and End fills it.

KQ-1164 · SWATCH/MIXER

label colour #5b84d0 · saved to the Fernworks theme

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/swatch-mixer

Props

value / defaultValue: string; default ""; The colour in the well as `#rrggbb`, or an empty string for an empty well. Controlled or uncontrolled; a value the host sets is shown exactly, with the nearest recipe the palette can make on the rim.
onValueChange: (value: string) => void; default —; Fires from the drop, key or press that changed the mix, with the new colour.
label: string; default —; The field's visible label and the accessible name of its group.
name: string; default —; Form field name; the colour rides a hidden input inside a surrounding form.
hint: string; default —; Guidance under the well, wired to the field with aria-describedby.
error: string; default —; An error from the host, shown under the well and announced once.
required: boolean; default false; Marks the field required; once the visitor empties the well it says so unless the host passes its own error.
disabled: boolean; default false; Stops every drag, key and press, and dims the field.
pigments: number; default 4; How many pigment pots the palette offers, 3 to 6: the primaries, then white, black and a green.
swirl: number; default 0.6; How much the well swirls as a part mixes in, 0 to 1: at 0 the colour simply cross-fades, at 1 the stir lasts about 1.4 s and the streak makes more than a full turn.
readout: "hex" | "oklch"; default "hex"; The format of the readout beside the label and of the recent mixes' names.
sound: boolean; default false; A plip as a part lands, pitched by the pigment's lightness, and a gloop as one is pulled out. Only ever in answer to the visitor.
className: string; default —; Classes for the field's root.

Prop	Type	Default	Description
value / defaultValue	string	""	The colour in the well as `#rrggbb`, or an empty string for an empty well. Controlled or uncontrolled; a value the host sets is shown exactly, with the nearest recipe the palette can make on the rim.
onValueChange	(value: string) => void	—	Fires from the drop, key or press that changed the mix, with the new colour.
label	string	—	The field's visible label and the accessible name of its group.
name	string	—	Form field name; the colour rides a hidden input inside a surrounding form.
hint	string	—	Guidance under the well, wired to the field with aria-describedby.
error	string	—	An error from the host, shown under the well and announced once.
required	boolean	false	Marks the field required; once the visitor empties the well it says so unless the host passes its own error.
disabled	boolean	false	Stops every drag, key and press, and dims the field.
pigments	number	4	How many pigment pots the palette offers, 3 to 6: the primaries, then white, black and a green.
swirl	number	0.6	How much the well swirls as a part mixes in, 0 to 1: at 0 the colour simply cross-fades, at 1 the stir lasts about 1.4 s and the streak makes more than a full turn.
readout	"hex" \| "oklch"	"hex"	The format of the readout beside the label and of the recent mixes' names.
sound	boolean	false	A plip as a part lands, pitched by the pigment's lightness, and a gloop as one is pulled out. Only ever in answer to the visitor.
className	string	—	Classes for the field's root.