颜色选择器
Color Picker
初级通用颜色选择器（Color Picker）是让用户在表单中选定颜色的控件，通常会显示当前颜色，并提供色板或颜色值输入。它解决了填写颜色值不直观的问题，比如让用户为网站主题挑选背景色。
你可能会说：「我想让用户改网站主题色，能直接挑颜色，也能填准确的颜色值，还能看到选出来的效果。」
动手看看网站主题色选择器
展开颜色选择器
主题色
切换「展开颜色选择器」模拟点击当前色块；再用「主题色」模拟点选色板或填写颜色值。也可以悬停色板、用 Tab 聚焦，看看可操作项的反馈。
色板浮在首页预览之上，挡住预览右侧的一部分，但不锁住整个页面。切换主题色时，当前色块、颜色值和背景会一起更新。
要点颜色选择器怎样帮用户选准颜色？
- 1
先看颜色用在哪里
你做网站主题设置时，可以在字段旁说明这是“主色”还是“背景色”。因为同一个颜色放在按钮和大面积背景上效果不同，所以让用户知道自己改的是哪里，比只写“选颜色”更有帮助。
- 2
同时提供挑选和精确输入
色板适合边看边试；如果设计师已经给了颜色值，输入框会更快。我们可以让两种方式保持同步：用户拖动色板后，颜色值跟着变化；手动改值后，预览也跟着更新。
- 3
把结果显示出来并检查对比
在选择器旁显示当前颜色，再用真实按钮或页面片段预览，用户才容易判断效果。如果这个颜色会承载文字，我们还要检查文字是否看得清；选得出某个颜色，不代表它适合所有位置。
容易混淆的地方
颜色选择器让用户自行确定一个颜色；预设色块则只让用户从你给出的少数颜色中选。若品牌只允许三种主题色，用预设选项更直接。它也不等于渐变编辑器：渐变需要处理多个颜色及其位置，单个颜色选择器只能负责其中一个颜色。
什么时候用
适合用
- 做网站搭建工具时，让用户设置页面背景色，并在旁边预览页面效果。
- 做图表配置后台时，让用户为不同数据系列指定颜色，方便区分。
不适合用
- 品牌主题只能从三套固定方案中选时，用单选框或预设色块，不必开放任意颜色。
- 用户只是要上传一张已有的品牌图片时，用上传控件；颜色选择器不能代替图片文件。
练一练选一个答案，看看解释
你在做一个网站搭建工具，用户需要设置按钮背景色，设计师可能会直接提供颜色值，也有人想边看边试。哪种方案更合适？
让 AI 帮你做复制给 AI Agent 直接用
请在网站主题设置表单中加入颜色选择器，用于修改按钮背景色。支持可视化挑选和输入颜色值，两种操作保持同步；显示当前颜色和按钮预览，并让我能看出按钮文字是否清楚。