做后台系统的时候，最不起眼却最容易让前端加班的东西，往往就是那个让用户“选一个颜色”的小入口。我第一次接主题换肤需求时，天真地以为放一个<input type="color">就完事了，结果测试一打开就发现问题：不同浏览器渲染差别巨大、样式完全不受控、透明度根本不支持。后来拿到了这款 Vue 生态里被反复提起的 vue-color 颜色选择器组件，才发现原来选色这件事，别人早就做好了轮子，而且自带七种不同风格的面板，按业务场景挑一个就能直接用。这篇文章就把我的实战接入过程，加上对七个 Demo 组件的逐个拆解，以及过程中的踩坑记录一并交个底，希望能给准备做“取色”功能的同学一个靠谱的参照。
1. 我为什么放弃了原生 input 和自研取色器
很多前端看到“颜色选择器”的第一反应，就是浏览器自带的<input type="color">。这东西放在原型里确实够用，两行代码就能出一个取色控件。但一旦进了真实业务，尤其是有设计规范、有成体系视觉要求的后台项目，它基本不够看。
原生的type="color"有三个硬伤。第一，样式完全由浏览器内核控制，你改不了弹层的结构、改不了确认按钮的文案、甚至改不了取色面板的尺寸，这在要求“所有组件风格统一”的项目里几乎是不可接受的。第二，它不支持透明度，而换肤、图表配色的需求里，半透明色太常见了。第三，各平台表现差异很大，Windows 和 macOS 上打开的 UI 完全不一样，Safari 老版本的兼容性也有问题。测试同事只要换一台电脑一测，交接工作就没完没了。
那自己写一个可行吗？我早期也动过这个念头，想用 canvas 画一个饱和度/明度面板，加一个色相滑条，再自己处理鼠标拖拽、坐标换算、RGB/HSL/HEX 互转。写一个能用的小 demo 不难，难的是把交互做到位：拖拽时防抖、键盘微调、鼠标移出面板后的状态处理、移动端 touch 事件、组件嵌套在弹层里的定位……每一项都在消耗时间。更关键的是，你辛辛苦苦写出来的取色器，体验大概率还是不如成熟组件，设计师一看就能挑出一堆毛病。
所以最终选型思路就很清楚了：在不引入重型 UI 框架的前提下，找一个组件化、可局部引入、自带多种面板风格的颜色选择器。对比了一圈，vue-color 是最合适的。它的名字其实就是“Vue 版 color”，从 React 生态里的 react-color 移植过来，API 保持了一致的风格。你不需要从零搭积木，而是像选皮肤一样，从它提供的多个 Picker 组件里挑一款，直接嵌进页面。
我当时列过一个简单的对比表，供做类似选型的同学参考：
| 方案 | 优点 | 缺点 | 适合场景 |
|---|---|---|---|
| 原生 input | 零依赖、上手快 | 样式不可控、无透明度、兼容性一般 | 原型验证、内部工具、非核心配置项 |
| canvas 自研 | 完全可控、交互可自定义 | 开发量大、要处理色彩转换和拖拽细节 | 有特殊交互需求或不允许第三方依赖时 |
| vue-color | 组件丰富、API 简单、按需使用 | 依赖偏旧、Vue3 需换替代包 | 绝大多数后台管理系统、配置面板 |
在里面提到的“按需使用”，其实就是标题里说的“Demo*7”——vue-color 不止一个选择器，而是提供了 Chrome、Photoshop、Sketch、Material、Slider、Swatches、Twitter 等七种不同风格的取色面板。它们解决的问题侧重点不同，下面逐个拆。
2. 七个 Demo 逐个拆解：选型前先看适用场景
vue-color 最值钱的地方，就是它把一个“取色器”按照不同产品审美拆成了七种形态。你不需要为自己的界面风格写定制皮肤，直接在七个组件里挑最像的就行。这七个组件我从使用频率最高到最偏门的顺序讲。
2.1 Chrome：功能最全的主力取色面板
Chrome 是 vue-color 里最常用的组件，也是绝大多数后台项目的默认选择。它的结构很完整：上方是饱和度/明度二维取色区，左侧细长条是色相选择，底部还有透明度滑条、HEX 输入框和一排预设色块。可以这么说，用户想要的所有取色姿势，它都覆盖了。
<template> <chrome-picker v-model="color"></chrome-picker> </template> <script> import { Chrome } from 'vue-color' export default { components: { 'chrome-picker': Chrome }, data() { return { color: '#2c6fbb' } } } </script>如果你不希望用户调透明度，可以在组件上加disable-alpha属性。这里有一个细节：v-model虽然能用，但它传出去的不是纯粹的字符串，而是一个颜色对象，包含hex、hsl、hsv、rgba等字段，这点后面实战部分我会专门说。
2.2 Photoshop：给设计师准备的专业面板
Photoshop 组件从视觉上就告诉你“我很专业”。它长得像 PS 里的取色窗口：左侧一大块取色区，右侧色相条，上方是当前色和目标色的对比，下方可以切换 hex、HSL、RGB 不同格式的数值显示。如果产品面向的是设计师、运营编辑这类对颜色有精确要求的用户，用这个组件非常合适。
<template> <ps-picker :value="color" @input="onInput"></ps-picker> </template> <script> import { Photoshop } from 'vue-color' export default { components: { 'ps-picker': Photoshop }, data() { return { color: '#f44336' } }, methods: { onInput(colorData) { this.color = colorData.hex } } } </script>组件默认没有中文文案，像“new”“current”这些标签，做国内项目时通常要自己包一层做汉化，这是我实际用过之后才注意到的细节。
2.3 Sketch：贴合现代设计工具的取色风格
Sketch 组件的视觉语言明显来源于 macOS 设计工具的取色器。顶部是一排色相值可以选择，中间是一大片渐变取色区域，底部是透明度滑条。整体风格简洁、现代，比 Chrome 少了一些功能按钮，但核心取色能力一点不弱。
如果你的页面本身就是偏设计向的，比如智能海报制作、数据分析可视化配置，用它能减少很多视觉冲突感。它和 Chrome 的核心区别在于：Chrome 底色是深色，Sketch 底色偏浅、更加轻盈。放在亮色背景的设置面板里，Sketch 的融入度通常更好。
2.4 Material：Google Material Design 风格
Material 组件走的是圆角、大色块、简洁风格那一挂，长得非常像 Material Design 规范里的取色控件。它的色板是大圆形的渐变色块，下面跟一个长条滑杆，支持透明度。这个组件在需要“年轻化”视觉的移动端界面中很常见。
如果你项目用了 Vuetify、Quasar 这类 Material 风格的 UI 库，或者是在做混合 App 里的 H5 页面，选 Material 和整体气质最搭。需要注意，它的布局高度偏高，放进弹层里要预留足够空间，不然容易挤。
2.5 Slider：紧凑场景下的救星
Slider 组件是七个里最省空间的，它只保留了一条渐变色相滑条和几条对应颜色状态的滑块，整体高度很矮。适合嵌在表单的一行里，比如“标签颜色”“图标颜色”这类只需要简单选色、不需要精细调透明度的场景。
<template> <slider-picker v-model="color"></slider-picker> </template>这个组件实际用起来非常轻量，性能也最好，因为它没有复杂的二维取色区域，事件触发频率低很多。如果项目的取色入口散落在列表行内、表格单元格里，Slider 是首选。
2.6 Swatches：纯预设色板，不想让用户乱选就选它
Swatches 组件和其他几个不太一样，它没有自由取色区，整个面板就是一堆预设色块，用户只能在给定的颜色里点选。这种交互特别适合业务上需要“颜色可控”的场景。
比如后台系统里分类标签的颜色，产品会规定只能用品牌色的几个变体，不允许用户传一个鬼畜荧光色进来。再比如电商店铺装修时，风格色通常限定在主题色附近，Swatches 就是天然的约束器。它的颜色列表可以通过colors属性传入，也可以直接用默认值。
<template> <swatches-picker v-model="color" :colors="presetColors"></swatches-picker> </template> <script> export default { data() { return { color: '#5491e7', presetColors: ['#ff190c', '#ffb900', '#14c9c9', '#13ce66', '#ff9d00', '#1b7ea6'] } } } </script>2.7 Twitter：轻量且耐看的通用选色组件
Twitter 组件的名字来源于 Twitter 的配色风格。它的结构是横向排列的一排色块，加上一个 HEX 输入框，整体小巧简洁，不抢页面焦点。它的预设色都是 Twitter 的品牌色调，如果你做的是社交媒体相关的工具，用它会有一种天然的亲切感。
它在移动端也有不错的表现，色块点击区域比较大，不容易误触。相比 Chrome，它少了自由取色区，但多了一排快捷色，适合“快速选一个看起来还不错的颜色”这类场景。
2.8 七种组件怎么选：一张表说清
| 组件 | 风格 | 取色方式 | 透明度 | 推荐场景 |
|---|---|---|---|---|
| Chrome | 深色全面 | 自由 + 输入 + 预设 | 支持 | 换肤、主题配置、精细取色 |
| Photoshop | 专业双色对比 | 自由 + 格式切换 | 支持 | 设计师工具、图片/海报制作 |
| Sketch | 浅色简洁 | 自由 + 色相切换 | 支持 | 现代化配置面板、图表可视化 |
| Material | 圆角明亮 | 圆形色板 + 滑条 | 支持 | Material 风格项目、移动端 H5 |
| Slider | 紧凑单行 | 渐变滑条 | 支持 | 表单行内、列表行内快速选色 |
| Swatches | 纯色块面板 | 预设色块点选 | 不支持 | 品牌色受限、可控颜色场景 |
| 轻量横幅 | 快捷色块 + 输入 | 不支持 | 轻量配置、社媒工具 |
挑组件没有绝对标准，我的习惯是：页面空间宽裕、需要精细取色时用 Chrome 或 Sketch；空间紧凑但必须允许选色时用 Slider；一旦业务要求颜色受控，想都不用想，直接 Swatches。
3. 实战接入：后台主题色设置器的完整实现
选型说完了，接下来是标题里“实战*1”的部分。我用一个最常见的业务场景——后台管理系统的品牌主色设置——来完整演示 vue-color 的接入过程。这个功能的交互是：左侧放一个 Chrome 取色面板，右侧实时预览皮肤效果，点保存后把颜色写入本地缓存，下次打开页面主题色仍然生效。
3.1 安装和注册
Vue2 项目里直接安装：
npm install vue-color安装完成后，有两种注册方式。一种是全局注册，适合多个页面都要用到颜色选择器的情况：
import Vue from 'vue' import { Chrome } from 'vue-color' Vue.component('chrome-picker', Chrome)另一种是局部注册，适合只在某个页面里用到，这样打包时其他页面不会引入这个组件：
import { Chrome } from 'vue-color' export default { components: { ChromePicker: Chrome } }我一般推荐局部注册。后台项目页面多，全局注册会让所有业务页面包体积白白增加一份颜色选择器的代码，虽然单看不大，但积少成多。
3.2 完整页面实现
下面是一个品牌主色设置页面的核心代码。页面布局分三块：取色区、预览区、保存按钮。取色的结果会实时写入 CSS 变量，预览区直接消费这个变量，形成所见即所得的效果。
<template> <div class="brand-setting"> <div class="settings-header"> <h2>品牌主色设置</h2> <p>调整右侧取色面板，可实时预览主题效果</p> </div> <div class="settings-body"> <div class="picker-panel"> <chrome-picker :value="themeColor" disable-alpha @input="onPreviewChange" @change="onThemeChange" ></chrome-picker> </div> <div class="preview-panel"> <div class="preview-card" :style="{ background: 'var(--brand-primary)' }"> <span>主题色卡片</span> </div> <button class="preview-btn" :style="{ background: 'var(--brand-primary)' }"> 主要按钮 </button> <p class="preview-text"> 当前主色：<code>{{ themeColor }}</code> </p> </div> </div> <div class="settings-footer"> <button class="save-btn" :disabled="saving" @click="saveThemeColor"> {{ saving ? '保存中...' : '保存主题色' }} </button> </div> </div> </template> <script> import { Chrome } from 'vue-color' export default { name: 'BrandSetting', components: { ChromePicker: Chrome }, data() { return { themeColor: '#2c6fbb', previewColor: '#2c6fbb', saving: false } }, created() { // 从缓存恢复上次保存的主题色 const cachedColor = localStorage.getItem('brand_primary_color') if (cachedColor) { this.themeColor = cachedColor this.previewColor = cachedColor this.applyTheme(cachedColor) } }, methods: { // input事件在拖动取色过程中高频触发，这里只用于实时预览 onPreviewChange(colorData) { this.previewColor = colorData.hex this.applyTheme(colorData.hex) }, // change事件在用户完成一次取色交互后触发 onThemeChange(colorData) { this.themeColor = colorData.hex this.applyTheme(colorData.hex) }, applyTheme(color) { document.documentElement.style.setProperty('--brand-primary', color) }, saveThemeColor() { this.saving = true // 模拟接口保存耗时 setTimeout(() => { localStorage.setItem('brand_primary_color', this.themeColor) this.$message && this.$message.success('主题色已保存') this.saving = false }, 300) } } } </script>对应的 CSS 里，关键点是把主题色抽成 CSS 变量，业务组件通过var()引用：
:root { --brand-primary: #2c6fbb; } .preview-card { background: var(--brand-primary); color: #fff; padding: 24px; border-radius: 8px; } .preview-btn { background: var(--brand-primary); color: #fff; border: none; padding: 8px 24px; border-radius: 4px; cursor: pointer; }这样只要applyTheme更新了 CSS 变量，整个页面引用该变量的元素都会同步变色，无需手动刷新 DOM。
3.3 数据格式处理：这个 v-model 不是你想的那种
vue-color 的v-model看起来和普通输入框一样，但实际数据流有一个坑：初始绑定值可以传字符串，可一旦用户取色，回调拿到的就是一个结构化对象，不是字符串。这个对象长这样：
{ "hex": "#2c6fbb", "hsl": { "h": 210, "s": 0.64, "l": 0.45, "a": 1 }, "hsv": { "h": 210, "s": 0.75, "v": 0.73, "a": 1 }, "rgba": { "r": 44, "g": 111, "b": 187, "a": 1 }, "a": 1 }在实战项目里，保存到后端的数据通常是hex字符串，而不是整个对象。因此我建议不要裸用v-model，而是像上面示例那样，通过:value传值、@input/@change取colorData.hex再回写。这样父组件的数据流始终保持干净：输入是字符串，输出也是字符串。后端存的就是#2c6fbb这种标准格式，前端任何地方拿过去都能直接用。
如果你的业务需要支持透明度，记得把rgba也处理一下。很多项目只存hex，结果用户调完透明度一刷新，透明效果丢了。正确做法是：当colorData.a < 1时，保存rgba格式而不是hex：
onThemeChange(colorData) { const isTransparent = colorData.a < 1 this.themeColor = isTransparent ? colorData.rgba : colorData.hex this.applyTheme(this.themeColor) }CSS 变量对rgba()是天然支持的，所以动态设置--brand-primary为rgba(44, 111, 187, 0.6)也没有问题。
4. 踩坑清单：vue-color 的这些隐藏问题
用 vue-color 做真实项目，光看官方 README 是不够的。文档只告诉你怎么引入、怎么用，但真正把它放进大型项目里，会遇到一堆文档没写的隐藏问题。我把过去项目里踩过的坑整理成清单，一条一条说。
4.1 Vue3 项目里直接引会白屏
先说最严重的坑。vue-color 是 Vue2 时代的库，内部大量使用了Vue.extend、Vue.component这类 Vue2 全局 API。如果你新项目用的是 Vue3，直接npm install vue-color然后import { Chrome } from 'vue-color'，运行时会直接报错，最常见的是Cannot read property 'extend' of undefined，页面白屏。
处理方式很明确：Vue3 项目不要用 vue-color，用它的 Vue3 重制版@ckpack/vue-color。安装方式和 API 几乎是平移的：
npm install @ckpack/vue-colorimport { Chrome } from '@ckpack/vue-color' import '@ckpack/vue-color/dist/vue-color.css'组件用法和 vue-color 保持一致，Chrome、Sketch、Material、Slider、Swatches这些组件名都能直接对上。如果你是新项目，直接站在 Vue3 这边，别在旧库里死磕。
4.2 全量引入会让打包体积白白变大
vue-color 官方入口文件导出了所有组件。如果项目里只用 Chrome，但你写的是import { Chrome } from 'vue-color'，打包时很多构建工具由于 tree-shaking 不彻底，会把其他组件也一起打进去。解决方法是按路径引入，只引需要的单文件组件：
import Chrome from 'vue-color/src/components/Chrome.vue'不过这种路径并不是官方文档承诺的稳定 API，升级版本时可能变。更稳妥的方式是：如果项目里确实只需要一两个组件，直接复制出对应的.vue文件到项目内部，做成内部组件，彻底不依赖外部包。我实际维护的项目就是这么做的，省心很多。
4.3 @change 高频触发引发页面掉帧
在 Chrome 组件里拖动二维取色区时，@input事件会高频触发，一秒钟可能触发几十次。如果在回调里做复杂操作，比如更新一个很大的表格、重新渲染图表，页面很容易掉帧。而@change相对好一些，通常在一次取色动作结束后触发，但也可能连续触发。
解决思路是分级处理：需要实时预览的场景，用requestAnimationFrame节流；需要做持久化的场景，用debounce防抖。比如：
import { debounce } from 'lodash-es' methods: { onThemeChange: debounce(function(colorData) { this.themeColor = colorData.hex this.saveTheme(colorData.hex) }, 200) }预览仍然走@input，保存才走@change，两者职责分开，交互流畅度和数据准确性都能兼顾。
4.4 外部点击关闭弹层要自己写
vue-color 的组件只是“取色面板”，它不包含“点击图标展开、点击其他区域收起”这套交互。实际业务里，颜色选择器通常放在弹层或下拉面板里，用户选完颜色后希望点击其他地方面板自动关闭。这个行为需要自己实现。
我常用的方案是自定义一个click-outside指令：
Vue.directive('click-outside', { bind(el, binding) { el.__vueClickOutsideHandler__ = function(event) { if (!el.contains(event.target)) { binding.value(event) } } document.addEventListener('click', el.__vueClickOutsideHandler__) }, unbind(el) { document.removeEventListener('click', el.__vueClickOutsideHandler__) } })使用的时候：
<div v-click-outside="closeColorPanel"> <chrome-picker :value="color" @input="onInput"></chrome-picker> </div>注意一个细节：取色面板本身内部可能有一些需要点击交互的子元素，指令判断的是整个容器，所以只要把选择器和弹层包在同一个容器里，就不会出现“点一下面板自己关了”的尴尬问题。
4.5 scoped 样式下改不动组件内部样式
vue-color 的样式是全局注入的，如果页面外层用了 scoped 样式，想调整组件内部某些间距、圆角、色块尺寸，会发现选择器权重不够，改了半天没效果。原因是 scoped 会给元素加><style scoped> .brand-setting ::v-deep .vc-chrome-color-wrap { border-radius: 8px; } .brand-setting ::v-deep .vc-chrome-saturation { border-radius: 4px 4px 0 0; } </style>
另外，vue-color 的类名几乎都以vc-开头，理论上不容易和其他样式冲突。但在老项目里如果全局样式定义过.swatch、.picker这类通用类名，还是可能被误伤。稳妥的做法是给组件外层包一层带有唯一业务前缀的容器类名，深度选择器时都以这个容器为起点。
4.6 序列化时别存整个 colorData 对象
还有一个容易忽视的坑：有同事把@input回调里拿到的整个colorData对象直接JSON.stringify存到了后端。这个对象虽然结构不大，但字段冗余严重，而且如果存的是含函数引用的版本（某些自定义颜色对象会带方法），JSON.stringify会直接丢字段。等下次从后端取回来，再传给 vue-color 的value，组件很可能解析失败。
我的习惯始终是只存hex或rgba字符串。从数据设计角度讲，颜色就是一个字符串字段，不要因为它“看起来像对象”就把对象整个塞进数据库。这也是封装层要做的事情，也就是下一节的主题。
5. 把 vue-color 封装成通用 ColorPicker 后，我做了哪些扩展
在实际项目里，我不会让业务页面直接跟 vue-color 打交道，而是会在它上面封一层公共组件。这样做的原因有三个：第一，业务侧只需要 hex 字符串，不需要理解 vue-color 的对象结构；第二，底层的组件可以随时替换，不影响业务页面；第三，在此基础上可以叠加常用色、最近使用色这些业务能力。
5.1 一个最基础的 ColorPicker 封装
下面这个BaseColorPicker.vue就是我反复用来打底的通用组件。它把 Vue2 的组件注册、click-outside 指令、颜色对象转 hex 字符串的逻辑都收敛在内部，业务侧用起来和一个普通input的体验差不多。
<template> <div class="base-color-picker" v-click-outside="closePanel"> <div class="trigger" @click="togglePanel"> <span class="swatch" :style="{ backgroundColor: currentValue }"></span> <span class="text">{{ currentValue || '选择颜色' }}</span> </div> <transition name="picker-drop"> <div v-if="visible" class="picker-panel"> <component :is="pickerType" :value="currentValue" :presetColors="presetColors" @input="handleInput" @change="handleChange" ></component> </div> </transition> </div> </template> <script> import { Chrome, Sketch, Photoshop, Material, Slider, Swatches, Twitter } from 'vue-color' const PickerMap = { chrome: Chrome, sketch: Sketch, ps: Photoshop, material: Material, slider: Slider, swatches: Swatches, twitter: Twitter } export default { name: 'BaseColorPicker', components: PickerMap, props: { value: { type: String, default: '' }, pickerType: { type: String, default: 'chrome' }, presetColors: { type: Array, default: () => [] }, disabled: { type: Boolean, default: false } }, data() { return { visible: false, innerValue: this.value } }, computed: { currentValue() { return this.innerValue || this.value || '' } }, watch: { value(val) { this.innerValue = val } }, methods: { togglePanel() { if (!this.disabled) { this.visible = !this.visible } }, closePanel() { this.visible = false }, handleInput(colorData) { this.innerValue = this.formatColorData(colorData) this.$emit('input', this.innerValue) }, handleChange(colorData) { this.innerValue = this.formatColorData(colorData) this.$emit('change', this.innerValue) }, formatColorData(colorData) { if (!colorData) return '' if (colorData.a != null && colorData.a < 1) { return colorData.rgba } return colorData.hex || '' } } } </script>业务页面用的时候，完全不需要关心 vue-color 的对象输出：
<base-color-picker v-model="tagColor" picker-type="chrome"></base-color-picker>这样就算某天 vue-color 不维护了，我要换成其他颜色库，也只需要改BaseColorPicker.vue一个文件，全站业务代码不用动。
5.2 增加最近使用颜色记录
颜色选择器在产品体验上有个容易被忽略的细节：用户调整了半天，最后发现还是想用上次那个颜色，但找不回来了。封装层里加一个最近使用色记录，体验会提升很多。
我的实现很简单，用 localStorage 存一个最多 8 条的数组，新的颜色放在最前面，重复颜色自动去重：
const RECENT_KEY = 'base-color-picker-recent' export function getRecentColors() { try { return JSON.parse(localStorage.getItem(RECENT_KEY)) || [] } catch (e) { return [] } } export function addRecentColor(color) { if (!color) return const list = getRecentColors().filter((c) => c !== color) list.unshift(color) localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, 8))) }在handleChange里，每次确认颜色时调用addRecentColor，并把读取到的最近使用色传给面板组件的presetColors或者 Swatches 的colors属性，用户下次打开就能看到最近用过的颜色。
5.3 联动表单校验的细节
颜色选择器作为表单字段时，校验逻辑是一个常见难点。有些场景要求“必填”，有些要求“必须是 hex 格式”，vue-color 本身不会抛出 blur 事件，表单校验库感知不到它的变化。
我的做法是在组件内部对外触发change时，同步派发一个blur事件，让表单校验能重新执行：
handleChange(colorData) { const color = this.formatColorData(colorData) this.$emit('change', color) this.$emit('blur') }如果是 Element UI 的el-form-item，配合el-form的rules校验规则，这个blur事件会被正常接收到，触发表单校验。如果字段允许为空，也可以在校验规则里把空字符串当作合法值处理：
rules: { themeColor: [ { required: true, message: '请选择主题色', trigger: 'blur' }, { pattern: /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, message: '颜色格式不正确', trigger: 'blur' } ] }5.4 还可以往哪个方向扩展
封装层稳定之后，可以扩展的方向其实还很多。比如给“清除颜色”增加一个重置按钮；比如支持透明度值输入，用一个单独的 input 来精确控制 alpha；再比如接业务接口，从后端读品牌色配置生成动态预设色组，让不同租户看到不同的可选色板。
还有一个我很常用的扩展：主题色换肤时，不仅改 CSS 变量，还同步把图表库的主题色刷新一遍。ECharts 的配置项里颜色都是数组，选中新颜色后遍历更新图表 option 里的对应字段，再setOption回填，用户就能看到图表颜色也跟着全局主题一起变。这个需求一出来，封装层的价值就体现出来了，因为它把底层颜色解析和业务解耦，扩展任何逻辑都是在业务侧完成，不会污染颜色选择组件本身。
结合这几年在后台项目里反复使用颜色选择器的经验，最想说的还是那句：能用成熟组件就不必自研。vue-color 虽然更新不勤，但功能扎实，把它当成一个可扩展的起点，结合业务封装成自己的组件，反而比从零手写取色板靠谱得多。另外，如果你在 Vue3 项目里，别犹豫，直接用@ckpack/vue-color，或者用原生 input 加少量 canvas 只做你需要的交互；如果还在 Vue2 维护老项目，按上面方法按需引 vue-color，够用且稳。最后一个小建议：无论选哪个组件，先花十分钟把七个 Demo 都看一遍，再决定用哪一款，比装完就猛写要省事得多。
