UI components · Form input
Color Picker
Also called: Color input, Swatch picker, Eyedropper, ColorPicker
A control for choosing a color. Normally it's a small swatch showing the current color. Click it to pick from a color area and hue slider, type a color value, or tap a preset.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a brand color picker to the "Theme settings" page. Closed, it's a 32×32px rounded swatch with the value "#3B5BFF" next to it, and the swatch has a 1px light gray border. On click, open a 240px-wide panel below: at the top, a 240×150px saturation/brightness area with a draggable circle; below that, a hue slider and an opacity slider; then a HEX input (valid values apply right away, invalid ones turn red) and an opacity percentage; at the bottom, a row of 8 brand preset swatches plus a "Recently used" row. While dragging, update the primary button and link colors in the preview on the right in real time. Close on Esc or a click outside, and keep the selected color.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Color Picker is what you need.
Use Color Picker when
- Letting users set their own brand, theme, or background color, like in a site builder or an admin theme setting
- When each item in a chart, tag list, or calendar needs its own color
- Creative tools like canvases, poster makers, and editors that need any color at all
Pick something else when
Users can only choose from a few fixed colors (tags come in red, yellow, green, blue). A row of clickable swatches is faster.
The color carries meaning or status (green for success, yellow for warning). The system should set it, not the user.
You're only showing a color value, not changing it. A swatch with the value is enough.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Only a full color area, with no presets and no value input, so users can't get back to the exact brand color
- 02
Swatches with no border, so white or light gray blends into the background and you can't tell what's picked
- 03
No preview of the result, so users have to save and reload to see if the color works
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A trigger swatch showing the current color (often with the value next to it) plus a pop-up picker panel. The panel has a saturation area, a hue slider, an opacity slider, a color value input, and preset swatches.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Color pickers show up in theme settings, brand setup, chart colors, tag colors, and all kinds of drawing tools. Closed, it's usually a small square showing the current color, with a value like #3B5BFF next to it. Open, there's a color area going from white to vivid and from light to dark (drag a small circle to pick saturation and brightness), a rainbow hue slider below it, and sometimes an opacity slider, a color value input, and a row of preset swatches. The browser's built-in <input type="color"> is one too, but the OS decides how it looks, so it's hard to keep consistent.
How it differs from a Select: if users can only choose from 6 to 8 fixed colors (like picking a tag color), just show a row of swatches to click. You don't need a full color area. It's also not a Color Palette. A color palette is about how the whole interface's colors work together, which is a design question. A color picker is just an input that lets users fill in one color value.
For everyday users, lead with presets (brand colors, recently used colors) and keep the color area and value input as the advanced option. For designers, also show HEX / RGB / HSL switching and opacity. Show the result right away in a preview next to it, and if the color is for text, warn when contrast is too low. Give every swatch a thin border, or white and light colors will vanish into the background.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-color-picker- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
input[type="color"].ant-color-picker.ant-color-picker-trigger.el-color-picker.el-color-dropdown.arco-color-picker.arco-color-picker-panel.t-color-picker.t-color-picker__panel.n-color-picker.n-color-picker-panel.form-control-color.react-colorful.sketch-picker.chrome-picker.pcr-app.pickr.vc-sketch.vc-chrome
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
color-pickercolorpickercolor-inputcolor-selectcolor-selectorcolor-swatchesswatch-pickerhue-slidercolor-field
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
ColorPickerColorInputColorSelectorSketchPickerChromePickerHexColorPicker
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026