Color picker UX: keep the target clear

Let several controls describe one color

AiryCrop shows Grid, Spectrum and Sliders modes, RGB channels, a Display P3 hexadecimal field and opacity. Blinq shows a similar color surface with an sRGB label and a hexadecimal value. The visible color-space labels are a reason not to assume that every picker represents color with an identical underlying contract.

Switching from a spectrum to numeric channels should be another way to edit the same pending color, not a fresh choice that loses the previous value. Keep the swatch and active object synchronized as the person changes modes. If the product supports several color spaces, explain the selected representation and test conversion with the actual export path.

Numeric input needs a draft state of its own. A person typing a hexadecimal value passes through incomplete strings. Preserve that input while editing rather than repeatedly replacing it with the old valid value. Accept supported paste formats deliberately, identify invalid characters and commit only a complete value. Do not make the keyboard disappear after every character.

Show transparency against the object that receives it

Kahoot’s Colors sheet displays a color value alongside 25% opacity inside an image-editing flow. Bazaart presents a custom picker with a canvas object, a numeric color field and favorite swatches. These are different contexts for the same basic problem: the chosen color is judged through the object and background underneath it.

Opacity is not a lighter shade. A partially transparent color can look different over a photograph, white canvas or dark background. Keep a useful preview of that compositing context visible. A checkerboard can communicate transparency, but it cannot replace seeing the actual target. Avoid claiming that a selected swatch will produce the same appearance everywhere.

Preserve the property that the person did not edit. Changing a hue should not unexpectedly return opacity to 100%. Entering a numeric value should not quietly change the active object. If a color field excludes transparency, make that distinction clear rather than packing an extra component into a format the interface otherwise describes as ordinary RGB.

Make nested Save actions explain their scope

SnapHome shows a color sheet above a Change Floor context, with a hexadecimal value, opacity, saved swatches and Save. GoDaddy’s picker combines a gradient area, hue control, numeric value and a checkmark. A local confirmation is useful, but it needs to be distinguishable from completing the surrounding design task.

If Save closes only the picker, preserve a clear next step in the parent editor. If it also commits the object edit, say so through the surrounding flow. Do not ask the person to discover the boundary by leaving the page and seeing whether the change persisted. Cancel should restore the previously committed property, not an unrelated default color.

Consider the eyedropper as another temporary mode. Name what will receive the sampled color, show when sampling is active and return to the same draft after selection. A tap on the canvas should not unexpectedly move an object because the picker left sampling mode without an explanation. Keep an escape route that does not discard other editing work.

Name text, background, stroke and shadow explicitly

Unfollow Tracker separates Font Color and Background Color in its text controls. Vixer presents Text, Background, Stroke and Shadow tabs, with Background selected and an opacity setting. The label of the property is doing essential work: the same red swatch can affect very different layers of a text treatment.

Keep the selected property visible when the picker expands. A long list of swatches can push the context offscreen, leaving a person to remember whether they opened fill or stroke. Retain a selected tab, a title or a small target preview. Do not depend only on the color of the active tab to explain the current scope.

Treat None as a distinct property value where appropriate. No background is not the same as a white background, and no stroke is not simply a very thin transparent stroke if the renderer treats them differently. Preserve those distinctions in undo, saved projects and export. An accessible label should describe the absence of a treatment as clearly as a named color.

Saving a palette is not applying a fill

Color Pop’s New Palette surface includes a palette name, multiple color slots, a wheel and Save. Alight Motion shows Color & Fill for a selected timeline object, with fill modes, a hexadecimal value and a palette. One is building a reusable collection; the other is changing a property of a specific object.

Use different language for adding a swatch, selecting a swatch and applying a fill. If a plus button stores the current color, explain that behavior with a label or accessible name. If selecting an existing swatch applies it immediately, keep undo available. Do not make deleting a palette entry also remove colors from projects that already use it unless that dependency is explicit.

A palette can contain repeated or visually close colors without being invalid. Help people identify values or names rather than forcing uniqueness by appearance. When there are many swatches, preserve useful order and selected-state feedback. A saved palette is a working tool, not just a decorative strip that resets every time the editor opens.

Model the property and the pending color separately

Keep an explicit target identifier, property name, committed value and pending value. The picker can then close, reopen or switch input modes without accidentally targeting the latest selected object. If the selection changes while a color draft is open, define whether the draft follows it, commits first or remains attached to the original object.

Normalize supported input formats into a stable internal representation while preserving enough precision for repeated edits. Avoid repeatedly rounding values as someone switches between channels and a spectrum. Validate at the boundary without erasing incomplete typing. Store opacity separately if that is how the project format represents it, and test save and reopen as well as the immediate preview.

Keep palette storage independent from document edits unless the product deliberately supports linked styles. A personal swatch should not silently become a global variable that changes earlier designs. If linked colors are supported, expose the relationship and the effect of changing the source. That is a more consequential operation than choosing a new fill for one object.

Review the picker with real targets and awkward input

Try the same color on text, a translucent shape and an image background. Change opacity, switch input modes, sample from the canvas and cancel. Ask the tester to predict which object will change before each action. If the answer depends on remembering a distant tap, the interface needs stronger context.

Paste a valid value, type an incomplete one and reopen a saved project. Test an empty palette, a full palette and a missing custom color. Verify the output against the intended target and background. A color-space label alone is not proof that the complete display-to-export path preserves the desired appearance.

Provide named controls and readable values for assistive technology. Do not require distinguishing two nearly identical swatches by sight. Check text against its actual background rather than assuming a brand color is always readable. Measure wrong-target edits and failed recovery separately from color choices: the interface can be defective even when every chosen value is syntactically valid.

Questions to settle before adding more swatches

Use these checks on a working build, not only on the polished reference state.

• ✓The active object and property remain identifiable while the picker is open.
• ✓Changing input mode preserves the same pending color.
• ✓Incomplete numeric typing is not erased or prematurely committed.
• ✓Opacity remains distinct from lightness and from None.
• ✓Local confirmation, document saving and palette saving have different scopes.
• ✓Eyedropper mode returns to a predictable target and draft.
• ✓Saved projects and exports are checked against the actual compositing context.

Connect color controls to the rest of the editor

For broader hierarchy and readability choices, use the mobile color and typography article. This picker contract handles how an already chosen design property is edited.

The sharing and export examples help separate a property preview from the format and destination of the final output.