颜色选择器ColorPicker
填写与选择在设置里选一个颜色，并看见它会是什么样子
也常被叫作色彩选择器
颜色选择器让用户在主题设置、图表标记或画板工具里选择颜色；用户通常在点开色块、主题色设置或编辑器工具栏时看到它。除了色盘，还要显示当前颜色的文本值，并保证足够的对比度。
HEX #7257D8
容易混淆？这样区分
颜色选择器ColorPicker≠选择器Select
颜色选择器 Color Picker 会同时显示颜色预览和精确色值；选择器 Select 只从固定的文字选项中选择一个值。
什么时候用
- 主题与品牌设置：让用户选主色或强调色品牌色
- 画板和标注工具：直接预览笔刷、填充或描边品牌色
- 图表系列颜色：给每组数据一个可辨认的色彩品牌色
什么时候不用
- 只有两个明确选项时 → 直接用色块按钮更快品牌色
- 只用颜色表达信息 → 同时写上文字或图标品牌色
- 没有说明对比度要求，让浅色文字读不清品牌色
组成结构 · Anatomy
#7257D8⌄
1颜色预览Swatch先让用户看见当前颜色
2颜色值Value提供可复制、可精确编辑的色值
3展开入口Trigger打开色盘或预设色列表
常见变体 · Variants
预设色Swatches
品牌只允许少量颜色时
完整色盘Palette
需要自由选择颜色时
带色值With value
#7257D8
设计或开发需要精确交接时
典型使用场景
品牌主题设置
界面主题
强调色#7257D8
白板笔刷颜色
图表系列配色