颜色选择器Color Picker
你可能会说
主题色想让用户自己挑，别写死。
颜色选择器是让用户查看并选择颜色值的表单控件主题设置、图表标记和画板工具可用它选择颜色。除色盘外应显示可复制的色值；文字或图标仍必须满足足够对比度。
也常被叫作ColorPicker色彩选择器
你可以这样告诉 AI Agent
请给主题主色提供颜色选择器、HEX 色值输入与复制、实时按钮预览。应用前检查文字对比度，不合格时说明原因并保留上一个有效值；验证键盘输入、粘贴色值和重置默认色。
容易混淆？这样区分
颜色选择器Color Picker≠选择器 Select
颜色选择器 Color Picker 会同时显示颜色预览和精确色值；选择器 Select 只从固定的文字选项中选择一个值。
什么时候用
- 主题与品牌设置：让用户选主色或强调色品牌色
- 画板和标注工具：直接预览笔刷、填充或描边品牌色
- 图表系列颜色：给每组数据一个可辨认的色彩品牌色
什么时候不用
- 只有两个明确选项时：使用色块按钮即可品牌色
- 只用颜色表达信息：同时提供文字或图标品牌色
- 未说明对比度要求，导致浅色文字难以阅读品牌色
组成结构 · Anatomy
#7257D8⌄
先让用户看见当前颜色
提供可复制、可精确编辑的色值
打开色盘或预设色列表
常见变体 · Variants
预设色Swatches
品牌只允许少量颜色时
完整色盘Palette
需要自由选择颜色时
带色值With value
#7257D8
设计或开发需要精确交接时
典型使用场景
品牌主题设置
界面主题
强调色#7257D8
白板笔刷颜色
图表系列配色
延伸阅读 · 权威出处
快速练习