Color Picker
You might say
Let people choose their own theme color instead of hard-coding one.
A form control for viewing and choosing a color valueUse a color picker for a theme, chart series, or drawing tool. Along with the palette, show a copyable value; text and icons still need enough contrast to be readable.
ColorPicker
You can say this to an AI Agent
Provide a theme color picker with editable and copyable HEX, plus a live button preview. Validate text contrast before applying, explain failures, and preserve the last valid value. Test keyboard entry, pasted values, and reset.
Color Picker≠Select
Color Picker shows a color preview and an exact color value. Select chooses from fixed text options.
When to use it
- Theme or brand colorBrand color
- Drawing and annotation toolsBrand color
- Chart-series colorsBrand color
When NOT to use it
- Two clearly defined choices: use color swatch buttonsBrand color
- Color as the only meaning: add text or an iconBrand color
- Low-contrast text with no stated contrast requirementBrand color
Anatomy
#7257D8⌄
Shows the current color first
Provides a copyable, precisely editable value
Opens a palette or preset list
Variants
Swatches
When the brand allows only a few colors
Palette
When people need to choose any color
With value
#7257D8
When design or development needs an exact handoff
Typical use cases
Theme settings
Interface theme
Accent color#7257D8
Whiteboard brush
Chart series
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check