A colour picker needs both a preset palette and a custom value
Aliases: swatch palette · free colour · eyedropper
What it is
A colour picker must offer a preset palette and a custom value together. The palette is a set the product or brand has already harvested — tap once to use. Custom is a hue wheel, sliders, or an eyedropper, for values the palette does not hold. Palette-only stalls designers and a few users on edge colours; custom-only makes everyday users reinvent “that blue” every time and scatters brand consistency. Both paths belong in the open, not one buried under Advanced.
Presets answer “what we use.” Custom answers “what if it is not in that list.”
Why it happens
Colour space is continuous and huge; people cannot judge absolutely inside it, they recognise. A palette turns recognition targets into visible chips; choice becomes naming a familiar sample. Custom turns the task into adjustment, which fits someone who already has a target (sampled elsewhere, copied from a spec). Without a palette, adjustment starts from zero and results smear across nearby-but-unequal colours. Without custom, a target that falls in the cracks of the samples is faked with the nearest chip, or the change is abandoned.
The two paths must also meet: a custom value that happens to equal a preset should light that chip, not hide an extra nameless colour outside the palette. Otherwise one colour has two identities on the UI.
Where it stops holding
When end users may only use brand colours, custom can vanish, but copy must say “only these colours” — do not leave an Advanced panel that opens empty. Illustration and data colour-scales need a continuous ramp; the palette is then an anchor and the slider is the main control. Presets for colour-blind users should not rely on red/green pairs as the only distinction; custom will not rescue two chips that were already indiscriminable on the palette. A system picker (OS, browser) can be the custom channel; the product should still offer the palette so every change does not jump to the system sheet.
Applying it
- Show the common palette by default, and put custom in a second region of the same panel that can actually be reached.
- When a custom value hits a preset, light that chip so the colour keeps one identity.
- Under a brand lock, remove custom and state the limit, rather than leaving a free picker that always errors.
- How to check: give one colour that is on the palette and one that is not. The first should finish on a chip, the second in custom with a result that echoes back. Missing either path, the control is incomplete.
Related
- Within the group: E3.15.2 Numeric input should convert among hex and common colour models · E3.15.3 The picked colour needs an immediate swatch preview · E3.15.4 Picking a colour does not replace contrast and other access checks
- Adjacent: E3.10 Matching Option Count to Control
- Search terms:
color palette·custom color·swatch versus picker