Brand Colour Picker Form Block for React

Because here the colours are the content, not decoration: a colour picker that cannot show the colour is useless. Only the swatches carry colour, inline as one CSS variable each (--swatch), marked with a code comment; the digits are held without the hash so no colour literal sits in the source, and everything else (the frame, the text, the focus rings) stays in theme tokens. In your app the swatches are the only place that reads the visitor's colour.

hslOf turns the hex into hue, saturation and lightness; scaleOf keeps the hue and saturation and moves lightness: step 50 goes 90 percent of the way to white, 300 goes halfway, 700 is 70 percent of the lightness and 900 is 40 percent, with your colour as 500. Edit those shares, or add steps to the list. It is a simple scale: HSL lightness is not perceptually even, so for a production palette generate it in a perceptual space (OKLCH) and check contrast for each step.

One value, six hex digits, is the block's state. Typing six digits updates it and the picker's value; dragging in the picker sends its colour back as text, which is read into the same digits. Anything that is not yet six digits stays in the field only (the picker keeps the last good colour), and the problem is shown when you leave the field, then follows your typing until it is fixed. Pasting "#B4381E" works: the hash is dropped and the digits are lowercased.

Yes. The picker button, the hex field, the presets and each Copy button are real controls in the tab order. The presets are native radios: arrow keys move between them and the colour follows. The picker's area and hue slider take the arrow keys when focused, and copy buttons say once, in the foot's polite status, what was copied.

Save colour sets the saved colour in the page and says nothing was saved; the Copy buttons really use the clipboard, which needs a secure page and a user press (if the browser refuses, the foot says so). In your app save the six digits from submit, regenerate any asset that depends on the colour on the server, and keep the scale as a derived view.

Keep the six digits as the field's value. With react-hook-form, use Controller for the hex input and call field.onChange from the picker's value change too; validate with a regular expression in a resolver. With TanStack Form, validate on blur with the same pattern and derive the scale from field.state.value, never store it.