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
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
Further reading
