跳到主要内容
前端术语库

UI 组件 · 表单输入

颜色选择器

Color Picker

也叫：取色器、调色板、拾色器、ColorPicker、Color Input、Swatch Picker

用来挑颜色的控件：平时是一个显示当前颜色的小色块，点开后在色盘和色相条上取色，也能直接输入色值或点预设颜色。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在「主题设置」页做一个品牌主色的颜色选择器：收起时是一个 32×32px 的圆角色块加色值文字「#3B5BFF」，色块带 1px 浅灰边框。点击后在下方弹出 240px 宽的面板：最上面是 240×150px 的饱和度 / 亮度色盘，可以拖动小圆圈；下面是色相条和透明度条；再下面是 HEX 输入框（输入合法色值立即生效，不合法时标红）和透明度百分比；最底部一排 8 个品牌预设色块，外加一行「最近使用」。拖动时右侧预览区的主按钮和链接颜色实时变化；按 Esc 或点面板外面关闭，关闭后保留选中的颜色。

发给

01判断

你的内容是这样吗？

对照两列，确认颜色选择器是不是你要找的。

符合这些情况，用颜色选择器

  • 让用户自定义品牌主色、主题色、背景色，例如建站工具、后台的主题设置
  • 图表、标签、日历事件等需要给每一项配一个颜色时
  • 画板、海报、编辑器这类创作工具，需要自由取任意颜色

是这些情况，换成别的

  • 只能在几种固定颜色里选（例如标签只有红黄绿蓝），直接排一行可点的色块更快

  • 颜色代表状态或含义（成功是绿、警告是黄），应该由系统定好，不要让用户随便改

  • 只是展示某个颜色值、不需要修改，用一个色块加色值文字即可

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只给一块完整的色盘，没有预设色也没有色值输入框，用户很难再选回同一个品牌色

  2. 02

    色块没有边框，选了白色或浅灰就和背景融在一起，看不出选的是什么

  3. 03

    选完颜色看不到效果，得保存、刷新页面才知道好不好看

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由显示当前颜色的触发色块（常带色值文字）和弹出的取色面板组成；面板里有饱和度色盘、色相条、透明度条、色值输入框和预设色板。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个填着颜色的小方块或圆点，旁边常写着 #3B5BFF 这样的色值
  2. 2点开后是一块从白到彩色再到黑的渐变方块，上面有一个可以拖动的小圆圈
  3. 3渐变方块下面有一条彩虹色的横条，最底下是一排小色块

04解释

详细解释

颜色选择器出现在主题设置、品牌配置、图表配色、标签颜色和各种画板工具里。收起时通常是一个小方块显示当前颜色，旁边写着 #3B5BFF 这样的色值；点开后上面是一块由白到彩、由亮到暗的色盘（拖动小圆圈选饱和度和亮度），下面一条彩虹色的色相条，可能还有透明度条、色值输入框和一排预设色块。浏览器自带的 <input type="color"> 也是它，只是样子由系统决定，不好统一。

它和 下拉选择 的区别：如果用户只能在 6~8 个固定颜色里选（比如给标签选颜色），直接摆一排色块让人点更简单，不需要完整的色盘。它也不是 配色：配色是整套界面的颜色怎么搭配，是设计问题；颜色选择器只是让用户填一个颜色值的输入控件。

面向普通用户时，先给预设色（品牌色、最近用过的颜色），色盘和色值输入作为进阶；面向设计师时再露出 HEX / RGB / HSL 切换和透明度。选完要立刻在旁边的预览里看到效果，用作文字颜色时提醒对比度够不够。色块外面要有一圈细边框，否则选了白色或浅色根本看不清。

开发者信息
术语 ID
component-color-picker
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[type="color"]
  • .ant-color-picker
  • .ant-color-picker-trigger
  • .el-color-picker
  • .el-color-dropdown
  • .arco-color-picker
  • .arco-color-picker-panel
  • .t-color-picker
  • .t-color-picker__panel
  • .n-color-picker
  • .n-color-picker-panel
  • .form-control-color
  • .react-colorful
  • .sketch-picker
  • .chrome-picker
  • .pcr-app
  • .pickr
  • .vc-sketch
  • .vc-chrome
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • color-picker
  • colorpicker
  • color-input
  • color-select
  • color-selector
  • color-swatches
  • swatch-picker
  • hue-slider
  • color-field
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • ColorPicker
  • ColorInput
  • ColorSelector
  • SketchPicker
  • ChromePicker
  • HexColorPicker
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30