Color Picker
色彩选择器
Aliases:取色器选色器颜色选择挑颜色的控件color picker
What is it
A control for choosing a colour, taking the form of a swatch grid, a gradient canvas with hue sliders, or the OS picker. It outputs hex, RGB or OKLCH values and often pairs with a text field and an opacity slider. Most at home in design tools and theme settings.
Name disambiguation
Picking colour sometimes means an eyedropper sampling the screen; this entry covers the form control that outputs a colour value, with the eyedropper as just one source.
Interactive playground
Try it. Make an informed choice.Take a colour from the swatches, refine its hue on the canvas and copy the value.
Loading lab…
What to look for
- 01The colour value is editable and stays in sync with the preview
- 02Low opacity or contrast issues surface visible feedback
✓ When to use
- People must specify a brand, theme or annotation colour
- A preset palette already covers the need
- Hue, saturation and opacity need precise tuning
✕ When not to use
- Only a few fixed colours are allowed — segmented control or radios
- Colour is output to display, not input — use a badge or swatch
- Adjusting brightness or a numeric level — a slider is more direct
Variants
Swatch grid
色板网格
Preset swatches laid out flat — the fastest decision
HSV area
HSV 取色区
Gradient canvas plus hue and alpha sliders for freeform picking
Native
原生控件
input[type=color] defers to the OS picker with zero maintenance
Implementation
linear-gradientaccent-colorcolor-mix()Build the canvas from two linear-gradient layers (white-to-transparent over transparent-to-black) on a solid hue field to fake HSV; style native range inputs with gradient tracks. Offer both hex and OKLCH text fields that stay on the same colour when switching. Warn when the preview swatch and its label lack contrast.
Platform API
input[type="color"]color-mix()oklch()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| HTML | input[type="color"] |
| react-colorful | HexColorPicker |
| Radix Primitives | Slider |
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarA draggable handle on a track picks a value from a continuous range, with the number and filled track following in real time. Ideal for magnitudes like volume, brightness or price ranges — more intuitive than a text box; supports tick marks, steps and a dual-handle range form.
ComponentsUsed withA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsUsed with