ColorPicker

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.

HEX #7257D8

ColorPicker≠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 color
Drawing and annotation tools
Chart-series colors

When NOT to use it

Two clearly defined choices: use color swatch buttons
Color as the only meaning: add text or an icon
Low-contrast text with no stated contrast requirement

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