色彩选择器
Color Picker
别名:取色器选色器颜色选择挑颜色的控件color picker
这是什么
用于选定颜色值的控件，形式包括色板网格、渐变取色区加色相滑杆，或直接调用系统取色器。输出十六进制、RGB 或 OKLCH 等颜色值，常与文本输入、透明度滑杆组合；设计工具与主题配置中最常见。
名词辨析
「取色」有时指吸管工具从屏幕拾取颜色；本词条专指供用户选定颜色值的表单控件，吸管只是其中一个来源。
交互实验室
试一试，再决定怎么用从色板取一色，再到取色区微调色相，并复制颜色值。
正在加载实验室…
使用时关注什么
- 01颜色值可编辑且与预览保持同步
- 02透明度或对比度不足时有可见反馈
✓ 适用场景
- 用户需要指定品牌色、主题色或标注色
- 预设色板足够覆盖需求
- 需要精确微调色相、饱和度与透明度
✕ 不适用场景
- 只在几个固定色中选择，用 segmented-control 或 radio
- 颜色是结果展示而非输入，用 badge 或色块展示
- 亮度或数值调节，用 slider 更直接
常见形式
色板网格
Swatch grid
预设色块平铺，点击即选，决策最快
HSV 取色区
HSV area
渐变面加色相与透明滑杆，可自由取色
原生控件
Native
input[type=color] 调用系统取色器，零维护
实现要点
linear-gradientaccent-colorcolor-mix()取色区用两层 linear-gradient（白到透明、透明到黑）叠在纯色背景上模拟 HSV 面；滑杆用原生 range 配渐变轨道。颜色值输出建议同时提供十六进制与 OKLCH 文本框，切换时保持同一颜色。预览块与文字对比不足时给出提示。
平台 API
input[type="color"]color-mix()oklch()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| HTML | input[type="color"] |
| react-colorful | HexColorPicker |
| Radix Primitives | Slider |