取色器技巧 - 用色彩提取加速设计工作流
取色器基础 - 像素颜色提取的工作原理
取色器从屏幕上的任意像素提取颜色信息。在设计工作流中，从现有图像或截图中精确提取颜色并应用到设计系统中是日常操作。理解其底层原理有助于选择最适合的实现方案。
像素颜色提取的基本流程：
- 获取目标像素的屏幕坐标
- 读取该坐标处的 RGB 值
- 将 RGB 值转换为所需的色彩格式 (HEX、HSL 等)
Web 环境中的实现方式：
- EyeDropper API：浏览器原生吸管，可采样屏幕任意位置的颜色
- Canvas API：将图像绘制到画布后读取像素数据
- CSS 自定义属性：通过 JavaScript 动态设置提取的颜色值
取色器的精度取决于显示器的色彩管理设置。在未校准的显示器上提取的颜色值可能与实际设计稿中的颜色存在偏差。专业设计工作流中，建议在色彩管理环境下进行颜色提取。
取色的工作原理：取色器 (Color Picker) 是从屏幕上任意像素获取颜色信息的工具。坐标需要考虑设备像素比 (DPR)，在 Retina 显示屏上逻辑像素与物理像素并不相同。读取颜色时取指定坐标像素的 RGB 值（0-255 的 3 个通道），在 Canvas API 中可用 getImageData(x, y, 1, 1) 得到 RGBA 值，再按用途转换为 HEX (#FF5733)、HSL (hsl(11, 100%, 60%))、HSB/HSV、CMYK 等格式。
浏览器中的取色方式：Canvas API（把图像绘制到画布后用 ctx.getImageData() 访问像素数据）、EyeDropper API（调用操作系统级吸管，可取到浏览器窗口之外的颜色）、input type="color"（HTML 标准的颜色输入控件，会弹出系统原生颜色对话框，但不适合直接从图像取色）。要取得准确的颜色，还需要留意显示器的颜色配置文件 (sRGB、Display P3、Adobe RGB)。
EyeDropper API - 浏览器原生吸管实现
EyeDropper API 于 2021 年在 Chrome 95 中引入，提供浏览器原生的吸管工具，允许用户从屏幕任意位置选取颜色。与基于 Canvas 的方案不同，它可以采样浏览器窗口外的颜色。
基本用法：
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // "#ff0000"浏览器支持情况：
- Chrome/Edge 95+：完全支持
- Firefox：尚未支持 (截至 2024 年)
- Safari：尚未支持
实现注意事项：
- 必须由用户手势 (点击等) 触发，不能自动调用
- 返回 sRGB 色彩空间的 HEX 值
- 用户按 Escape 键取消时会抛出 AbortError
- 需要进行特性检测后再使用：
if ('EyeDropper' in window)
与 Canvas 方案的对比：
EyeDropper API 的优势在于可以采样整个屏幕的颜色，不受同源策略限制。但 Canvas 方案可以进行批量像素分析和图像整体色彩统计，两者适用场景不同。
实现示例：async function pickColor() { if (!window.EyeDropper) { alert('当前浏览器不支持 EyeDropper API'); return; } const dropper = new EyeDropper(); try { const result = await dropper.open(); console.log(result.sRGBHex); } catch (e) { if (e.name !== 'AbortError') throw e; } }。用户按下 Escape 键时会抛出 AbortError，因此需要用 try-catch 处理；result.sRGBHex 返回所选颜色的 HEX 值（例如 "#ff5733"）。
浏览器支持情况（截至 2024 年）：Chrome 95+、Edge 95+、Opera 81+ 已支持；Firefox 与 Safari 尚未支持（WebKit 正在评估实现）。建议准备基于 Canvas 的取色作为回退方案。安全限制方面，EyeDropper API 只能由用户手势（点击或按键）触发调用。
Canvas API 颜色提取技术
Canvas API 既是 EyeDropper API 不可用时的备选方案，也是进行整图色彩分析的必备工具。将图像绘制到画布后直接访问像素数据，可以实现精确的颜色提取和统计分析。
基本像素读取：
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const pixel = ctx.getImageData(x, y, 1, 1).data;
// pixel = [R, G, B, A]跨域图像处理：
- 跨域图像需要服务器设置 CORS 头
- 图像元素需添加
crossOrigin="anonymous"属性 - 未设置时调用 getImageData 会抛出安全错误
性能优化：
- 大图像先缩放到较小尺寸再分析，减少像素遍历量
- 使用
OffscreenCanvas在 Web Worker 中处理，避免阻塞主线程 - 对于实时取色，限制采样频率 (如 requestAnimationFrame)
批量颜色分析：
通过遍历整个 ImageData 数组，可以统计图像中所有颜色的出现频率，为自动调色板生成提供数据基础。将像素按色相分组后取各组的平均值，即可得到图像的主色调。
基本取色步骤：①加载图像 —— 用 new Image() 创建图像对象，在 onload 事件中等待加载完成；需要跨域时设置 crossOrigin = "anonymous"。②绘制到画布 —— 用 canvas.width = img.naturalWidth 让画布尺寸与图像一致，再用 ctx.drawImage(img, 0, 0) 绘制。③取像素数据 —— 用 ctx.getImageData(x, y, 1, 1).data 得到 [R, G, B, A] 形式的 Uint8ClampedArray。
进阶技巧：区域平均色 —— 计算点击位置周围 5x5 像素的平均色，可减轻噪点与抗锯齿的影响，用 getImageData(x-2, y-2, 5, 5) 取 25 个像素后对 RGB 各通道求平均。主色提取 —— 取整幅图像的像素数据后应用颜色聚类 (k-means 或 Median Cut)。实时预览 —— 在 mousemove 事件中追踪坐标，实现跟随光标的放大镜 UI。需要注意 getImageData() 每次调用都会复制一份像素数据，在 mousemove 中逐帧调用时内存负担很高。
自动调色板生成 - 从图像中提取和谐配色方案
从图像自动生成调色板是设计系统创建和品牌色彩决策的有力工具。理解分析图像色彩构成并提取和谐色彩组合的算法，可以大幅提升设计效率。
主要算法：
- 中位切割法 (Median Cut)：递归分割 RGB 色彩空间，提取代表色。计算速度快，结果稳定
- k-means 聚类：将像素分为 k 个簇，以各簇质心作为代表色。结果最优但计算量大
- 八叉树量化：使用树结构高效管理色彩空间，内存效率高
实现步骤：
- 将图像缩放到合适尺寸 (如 100x100) 以加速处理
- 提取所有像素的 RGB 值
- 应用量化算法得到 5-8 个代表色
- 按亮度或色相排序输出调色板
色彩和谐性验证：
提取的调色板需要验证色彩和谐性。检查对比度是否满足 WCAG 标准，确认色彩之间的关系 (互补色、类似色、三色组等) 是否协调。必要时对提取结果进行微调，使其更适合实际设计应用。
常用库：
color-thief：轻量级，基于中位切割法vibrant.js：提取鲜艳色和柔和色，适合 UI 主题生成quantize：纯算法实现，可自定义色彩数量
算法对比：Median Cut 的计算量为 O(n log n)，效率高，适合 Web 应用；k-means 质量更好但计算成本高且依赖初始值；MMCQ (Modified Median Cut Quantization) 是 Median Cut 的改良版，划分时同时考虑颜色出现频率与色彩空间中的方差，JavaScript 库 color-thief 采用的就是这一算法。
实现要点：先把图像缩放到 100 × 100 px 左右再处理，可大幅降低计算量（10000 像素对比数百万像素）；把接近白色（RGB 各通道 250 以上）与接近黑色（RGB 各通道 5 以下）的颜色过滤掉，能得到更有特征的调色板；转换到 HSL 色彩空间后再聚类，分类结果更接近人的知觉；对生成调色板中各颜色之间的对比度做校验，可筛选出满足无障碍标准 (WCAG 2.1 AA：4.5:1 以上) 的组合。Google 的 Material Design 3 就把这一技术应用于从用户壁纸生成动态配色的「Material You」功能。
色彩空间与转换 - HEX、RGB、HSL、HSB 互操作
设计工作流需要在多种色彩表示格式之间灵活切换。将取色器提取的颜色转换为设计工具和代码所需的格式，需要理解各色彩空间的特性和转换逻辑。
常用色彩格式：
- HEX: #RRGGBB 格式，CSS 和设计工具中最常用
- RGB: rgb(0-255, 0-255, 0-255)，直接对应像素值
- HSL: hsl(色相，饱和度%，亮度%),CSS 原生支持，直觉性强
- HSB/HSV: hsb(色相，饱和度%，明度%),Photoshop 等设计工具使用
转换注意事项：
- HSL 和 HSB 虽然都有"饱和度"，但计算方式不同，数值不可互换
- HEX 转 RGB 是无损的，但 RGB 转 HSL 在极低饱和度时色相不稳定
- CSS 的
oklch()和oklab()提供感知均匀的色彩空间，适合生成色阶
实用转换函数：
HEX 转 RGB：将 6 位十六进制字符串每 2 位解析为 0-255 的整数。RGB 转 HSL：先归一化到 0-1 范围，计算最大值和最小值的差得到饱和度，通过最大通道确定色相。
设计令牌中的色彩管理：
在设计系统中，建议以 HSL 作为主要存储格式。HSL 便于通过调整亮度和饱和度生成色彩变体 (如 primary-100 到 primary-900)，同时保持色相一致性。
各表示法的要点：HEX 用 6 位十六进制把 RGB 各通道表示为 00-FF (0-255)，缩写形式 (#RGB) 等价于每位重复两次的值 (#F00 = #FF0000)。RGB (r, g, b) 是红绿蓝的加色混合，CSS 中写作 rgb(255, 87, 51)，含透明度时写作 rgba(255, 87, 51, 0.8)。HSL (h, s, l) 用色相 (Hue：0-360 度)、饱和度 (Saturation：0-100%)、明度 (Lightness：0-100%) 表示。HSB 与 HSL 相似，但 Brightness（明亮度）的定义不同：HSB 的 B=100% 是纯色，对应的是 HSL 的 L=50%。OKLCH 是 CSS Color Level 4 引入的知觉均匀色彩空间，明度变化与人的知觉一致，最适合用于设计无障碍配色系统。
转换实现示例 (HEX → RGB)：function hexToRgb(hex) { const r = parseInt(hex.slice(1,3), 16); const g = parseInt(hex.slice(3,5), 16); const b = parseInt(hex.slice(5,7), 16); return {r, g, b}; }。在设计工具之间传递颜色时需注意：HSB 与 HSL 即使色相、饱和度取值相同，结果也会不同。
设计工具集成与无障碍 - 色彩管理最佳实践
将取色器提取的颜色集成到设计系统中，同时保持无障碍标准和一致的调色板，需要建立连接工具、代码和验证的结构化工作流。
设计工具集成：
- Figma：通过插件 API 将提取的颜色直接添加到本地样式
- Sketch：使用共享库同步团队调色板
- VS Code：色彩选择器扩展支持实时预览和格式转换
无障碍对比度验证：
- WCAG AA 标准：普通文本 4.5:1，大文本 3:1
- WCAG AAA 标准：普通文本 7:1，大文本 4.5:1
- 提取颜色后立即验证与背景色的对比度
- 使用
color-contrast()CSS 函数 (实验性) 自动选择合规颜色
色彩令牌工作流：
- 从品牌素材中提取基础色
- 生成色阶变体 (调整 HSL 的 L 值)
- 验证所有组合的对比度合规性
- 导出为 CSS 自定义属性和设计令牌 JSON
- 在 CI/CD 中自动检测对比度回归
暗色模式适配：
提取的颜色需要为暗色模式生成对应变体。通常将亮度反转并微调饱和度，确保在深色背景上保持足够的对比度和视觉舒适度。使用语义化的颜色命名 (如 surface、on-surface) 而非具体色值命名，便于主题切换。
与设计工具的联动：Figma 可用插件「Image Palette」从图像自动生成调色板并注册为本地样式，配合 Design Tokens 插件还能导出为 JSON 格式。Adobe Color 上传图像后，会基于色彩和谐关系（补色、类似色、三色组）提出配色方案，保存到 Adobe CC 库后即可在 Photoshop 或 Illustrator 中直接使用。CSS 自定义属性可把提取到的颜色定义为 :root { --color-primary: #FF5733; } 在全站统一管理，暗色模式则用 @media (prefers-color-scheme: dark) 覆盖变量。
无障碍检查要点：对比度校验 —— WCAG 2.1 AA 要求正文文本 4.5:1 以上、大号文本（18px 以上或 14px 粗体以上）3:1 以上。色觉多样性 —— 考虑红绿色觉异常（男性约 8%），不要只靠颜色传达信息，应并用形状、图案与文字标签。APCA (Advanced Perceptual Contrast Algorithm) 是 WCAG 3.0 计划采用的新对比度计算方式。此外，通过在 OKLCH 色彩空间中计算距离，还能构建自动选出知觉上最接近颜色的机制。