品牌主题色、图表系列色、标签分类色。用户挑一个值，要在按钮、图标、多张图表上反复复用，必须给出可复制的 HEX。
界面与交互 · 操作与输入
颜色选择器ColorPicker
让用户挑选颜色并得到可读色值的控件；选中色要带名称、可复制的 HEX、真实物件预览，并覆盖对比度与色盲视角。
挑主题色，看 HEX 和按钮一起变
颜色选择器不是「一块能点的色」。选中的色要有名称、可复制的 HEX，要长在按钮和链接上预览，还要说清白字是否看得见、色盲能否叫出名字。
你在给一个产品后台挑主题色。点预设、用拾色器或直接敲 HEX，看 主题色物件、HEX 值、对比度和预览按钮同步变化。最后用「应用主题色」把它固定下来。
原因：当前主题色 海湾蓝 #315EFB，白字对比度 5.09:1。预览按钮和链接已实时变成这个色。下一步：继续换色预览，或切到色盲模拟看预设如何靠名称区分。对照：选色的完整结论 = 名称 + HEX + 真实预览 + 对比度，缺一都说不清选中了什么。
选色的四件事
刚才面板里反复出现的四件事，命名一下。
- 名称给人看的标签（海湾蓝），让「选了什么」不靠色相独享。色盲模拟一开，你就能体会少了名称多难分。
- HEX 值给机器用的精确值（#315EFB）。可复制、可复用到按钮、图表、CSS 变量，跨组件对齐。
- 真实预览选了就长在按钮、链接、卡片上，而不是只在孤立色板里看着好看。白字叠上去就是对比度实验。
- 对比度 + 色盲兜底白字对主题色要 ≥ 4.5:1（AA）；用名称、纹理或图例补色相，让色觉差异不挡理解。
什么时候用它
看到「需要选一个颜色，并把它复用到别处」这组信号，才考虑颜色选择器。
精确到色卡库（Pantone、印刷专色）、仅靠红绿传达成败的告警系统、或只有两三个固定选项的场景——它们该用色卡对照或固定单选，而非自由拾色。
怎么用对
标签 + 当前 HEX + 预设与自定义并存；选定后预览在真实物件；显示对比度；给色盲兜底。
- 标签 + 当前值同屏：
<input type="color" value>配<output>显示 HEX，让用户确认并复制。 - 预设与自定义并存：品牌色做成预设色板，自由拾色作为补充；预设永远给有效值，自定义输入要校验格式。
- 选定即预览：把当前色实时刷到按钮、链接、卡片，不要让用户在色板和应用位置之间脑补。
- 显示对比度：白字（或深字）对主题色的比率要可见，低于 4.5:1 就提示，而不是等用户踩坑。
- 色盲兜底：永远随色给出名称；图表里再加形状或图例，别让色相独享含义。
正反例：选主题色 vs 只给一块色
同一个「选颜色」的位置，多一点信息就从猜变成确认。
用户选了「海湾蓝」立刻看到 #315EFB、按钮实时变色、白字 5.09:1 达 AA、色盲名是「蓝」。选了什么、能不能用，一眼能复述。
用户看到一块色变亮，却不知道值是多少、白字看得清吗、色盲用户能不能分辨。无法复制复用，应用到按钮后才发现对比度不够，只能回头重选。
快速自测
图表里要用红、绿两条线区分两条数据，怎样做对色盲用户也安全？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。