The picked colour needs an immediate swatch preview

What it is

The colour being tuned must show at once as a swatch preview large enough to judge, not only as a slider thumb or a string of digits. Dragging hue, editing hex, or tapping a chip should update that swatch in the same beat. The swatch is what people judge: bright enough, too green, too like the neighbour. Without it they tune blind in channel space and see the result only on lift-off — adjustment as a gamble.

Immediate means during the gesture, not after the panel closes. After close, the result should still write back to a small swatch on the trigger, or the next open will not know what was chosen.

Why it happens

Colour judgement is a visual match, not a reading of numbers. A change of 5 in HSL cannot be predicted on the surface; it has to be seen as a fill. The preview closes the loop on continuous control: the hand moves, the chip changes, then one decides whether to continue. Delay, or update only on lift, breaks the loop and people micro-adjust the same channel over and over.

The swatch also has to be large enough to show uniformity and edge. A few pixels are swallowed by surrounding UI colour and look biased. A paired preview (old | new) supports “compared with a moment ago”; a single chip only supports “what it is now.” The backdrop should be neutral so the preview is not chilled or warmed by its neighbour.

Where it stops holding

Transparency must sit on a checker; otherwise the preview treats alpha as a pale opaque. An eyedropper follows pixels under the cursor; the preview should follow the dropper, not jump only on click. A gamut warning may overlay the preview but must not replace it with a warning icon — the colour is still what must be seen. When the trigger is tiny, the large in-panel preview remains mandatory; a 16-pixel trigger square is not the judgement surface during tuning. In multi-user theme editing, the preview should reflect the value about to be written, not someone else’s uncommitted cursor.

Applying it

• Put a stable large swatch in the panel, driven by every input channel, with delay no worse than a frame of felt time.
• Use old | new pair when comparison is needed; paint transparency on a checker.
• Sync the current colour to the trigger swatch so close and reopen still match.
• How to check: drag any slider without looking away from the preview. If the chip does not follow, or jumps only on lift, live preview failed.

Related

• Within the group: E3.15.1 A colour picker needs both a preset palette and a custom value · E3.15.2 Numeric input should convert among hex and common colour models · E3.15.4 Picking a colour does not replace contrast and other access checks
• Adjacent: D1.01 Immediate operation feedback
• Search terms: swatch preview · live color · old versus new swatch