如何从图片取色：Canvas像素读取、颜色换算与主色提取

在 Figma、PS 里对着参考图取一个颜色，几乎是顺手就能完成的事；可到了网页环境里，表面看只是“点一下拿到颜色”，实际背后得走完整整三步：先把图片绘制到 Canvas 里，再根据坐标读取对应像素，最后把拿到的 RGBA 转换成 HEX / RGB / HSL。这篇文章要讲清的，正是这条完整链路。文末还会带到一款正在使用的在线工具——鸭鸭图片取色器，支持上传、粘贴、拖拽和 URL 加载，也能自动提取主色色板，而且图片全程都在本地处理。

一、先画进 Canvas：为什么不能直接读

浏览器出于安全考虑，不允许 JS 直接读取 的像素数据。要拿到像素，必须先绘制到 上，再用 getImageData() 读取：

const canvas = document.createElement('canvas');canvas.width = img.naturalWidth;canvas.height = img.naturalHeight;const ctx = canvas.getContext('2d', {willReadFrequently: true });ctx.drawImage(img, 0, 0);const {data } = ctx.getImageData(0, 0, canvas.width, canvas.height);// data 是 Uint8ClampedArray，每 4 个元素表示一个像素的 RGBA

两个细节值得注意：

willReadFrequently: true 是性能提示，告诉浏览器这个上下文会频繁读像素，避免走 GPU 加速路径导致每次读取都回读。 getImageData() 返回的 data 是 RGBA 顺序：data[i]、data[i 1]、data[i 2]、data[i 3] 分别对应 R、G、B、A。

二、坐标映射：从“点击位置”到“源像素”

页面上显示的通常是缩放后的图片，要取到原图颜色，得把事件坐标换算回源像素坐标：

const rect = visible.getBoundingClientRect();const vx = (event.clientX - rect.left) / rect.width * visible.width;const vy = (event.clientY - rect.top) / rect.height * visible.height;const sx = Math.floor(vx * source.width / visible.width);const sy = Math.floor(vy * source.height / visible.height);const pixel = sourceCtx.getImageData(sx, sy, 1, 1).data;

关键在这里：读取像素时，始终要从原始尺寸的 Canvas 下手，而不是直接去读页面上那个按显示尺寸缩放过的 Canvas。原因很简单，图片一旦被缩放，一个屏幕像素背后往往对应的是原图里的多个像素，最终拿到的通常是插值后的结果，并不是真实像素值。鸭鸭工具采用的就是这套思路：先把原图绘制到一个隐藏的、原尺寸 Canvas 里，页面上再单独展示缩放后的副本，这样取色时命中的始终都是原始分辨率。

三、颜色换算：HEX / RGB / HSL

取到 RGB 后，前端最常见的三种格式各有用途：

格式	示例	适合场景
HEX	#2596be	CSS 与设计稿最常见的写法
RGB	rgb(37, 150, 190)	需要分量值、透明度或参与算法计算
HSL	hsl(196, 67%, 45%)	调色相、饱和度、明度，配色计算的基础

RGB 转 HEX：

function rgbToHex(r, g, b) { return '#'   [r, g, b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');}

RGB 转 HSL（标准公式）：

function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255;const max = Math.max(r, g, b);const min = Math.min(r, g, b);const l = (max   min) / 2;if (max === min) return {h: 0, s: 0, l: Math.round(l * 100) };const d = max - min;const s = l > 0.5 ? d / (2 - max - min) : d / (max   min);let h;switch (max) { case r: h = (g - b) / d   (g < b ? 6 : 0); break;case g: h = (b - r) / d   2; break;default: h = (r - g) / d   4;}h /= 6;return {h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };}

为什么三种都要？HEX 给 CSS 和设计稿用，RGB 分量适合算法处理，HSL 把“色相 / 饱和度 / 明度”拆开，后面讲到的互补色、相近色都建立在它之上。

四、放大镜：像素级精确定位

肉眼很难在缩略图上点准一个像素，尤其是边缘和渐变区域。常见做法是做一个网格放大镜：取光标周围 N×N 像素，放大成固定尺寸的格子逐格填色，中间画十字准星。

const grid = 13, cell = 11;const size = grid * cell;const block = sourceCtx.getImageData(x0, y0, grid, grid);for (let gy = 0; gy < grid; gy  ) { for (let gx = 0; gx < grid; gx  ) { const i = (gy * block.width   gx) * 4;lctx.fillStyle = `rgb(${ block.data[i]},${ block.data[i   1]},${ block.data[i   2]})`;lctx.fillRect(gx * cell, gy * cell, cell, cell);}}

实现时要用最近邻采样（关闭 imageSmoothingEnabled），避免边缘被平滑糊掉；还要处理越界：光标贴近图片边缘时截断读取范围，缺失的格子用最近的像素补齐。触屏设备没有 hover，放大镜要自动隐藏，改成点击取色。

五、主色提取：量化 频次统计

自动提取“图片主色”最常见的思路是颜色量化：把相近的颜色归到同一个桶，统计每桶的像素数量，取前 N 桶的平均色。

鸭鸭工具的做法：

先把图片等比缩小到最长边不超过 200px，减少计算量； 每个像素按 RGB 的高两位归桶（R、G、B 各取 >>6，拼成 6 位 key，共 4×4×4 = 64 个桶），相当于把 1670 万种颜色粗化为 64 类； 透明像素（alpha < 128）跳过； 统计每桶的像素数和分量和，按像素数降序取前 8，输出桶内平均值。

const key = ((r >> 6) << 4) | ((g >> 6) << 2) | (b >> 6);// 累加 r/g/b 与计数，最后按计数排序取前 8，均值归桶

这个思路简单、快、结果稳定，适合“色板”这种对精度不敏感的用途。要更严格的色彩聚类，可以换成中位切分（median cut）或 K-means，代价是复杂度和耗时上升。

六、互补色和相近色：HSL 的实战价值

拿到主色后，配色常常需要“和谐色”。基于 HSL 实现非常直接：

互补色：色相 180°； 相近色：色相 ±30°、±60°，饱和度和明度保持不变。

鸭鸭工具的“颜色详情”面板就按这个规则给出互补色和相近色，点击色块可以直接选中使用。

七、避坑清单

跨域图片：URL 加载要设置 img.crossOrigin = 'anonymous'，且图片服务器必须返回 CORS 头（Access-Control-Allow-Origin），否则 getImageData() 直接抛 SecurityError。工具会捕获异常并提示改用上传或粘贴。 不要从缩放后的 Canvas 读像素，坐标换算请参考第二节。 触屏设备没有 hover，放大镜不可用，粗指针设备应隐藏它并依赖点击取色。 隐私：整套取色都在浏览器本地完成，图片不离开设备。这也是在线取色器相比上传类服务更让人放心的原因。

八、推荐：在线图片取色器

如果不想从零实现这套逻辑，可以直接用 鸭鸭图片取色器（英文版）：上传、粘贴、拖入或输入 URL 加载图片，点击任意像素取色，同时输出 HEX、RGB、HSL 并一键复制；自动提取 8 个主色色板；支持互补色和相近色查看；图片只在本地处理。设计稿对色、前端调试、数据可视化配色都能用上。想继续调色的话，搭配它的颜色选择器做格式互转和随机取色，取色与调色正好闭环。