什么是图片取色器？

点击图像即可提取精确的颜色值。调色板会自动预填充图像的主色调,放大镜帮你定位到正确的像素,每个颜色都同时给出 HEX、RGB、HSL、HSV、CMYK 以及最接近的颜色名称。可将采样的颜色保存到调色板并导出。

图片加载后，工具会取出其中最常见的六种颜色，直接放入调色板，让你在点击之前就有一组起始色。放大取色镜会显示光标下的单个像素，便于精准选中想要的色调，而不是带抗锯齿的相邻像素。你点击的每种颜色都会给出 HEX、RGB、HSL、HSV、CMYK 数值，以及最接近的 CSS 命名颜色，并加入调色板，可复制为 HEX 列表，或导出为 JSON 或 CSS 变量。还有一个视觉预览，可让图片透过常见的色盲滤镜显示，方便你在使用过程中检查无障碍效果。

使用方法

1. 第一步 — 上传任意图片（PNG、JPEG、WebP、GIF），图片将加载到带缩放放大镜的交互式画布上。
2. 第二步 — 点击图片上的任意位置进行取色，放大镜会放大光标下方区域以便精准选色。
3. 第 3 步 — 任意复制 HEX、RGB、HSL、HSV 或 CMYK 的数值,也可以参考色块下方显示的最接近颜色名。调色板会保留每次点击,再加上六种自动识别的初始色,一键即可导出。

何时使用

• 从截图或效果图里取出品牌色,准确还原配色。
• 对着参考照片建调色板,用于设计项目配色。
• 识别竞争对手 logo 或网站头图的精确颜色值。

结果

一位设计师上传一张自然风光照片，提取山间湖泊的精确蓝绿色。他点击水面，获得 #2E8B8C，并将其与同一张照片中的另外三种颜色一同添加到调色板。

常见问题

为什么取出来的颜色和 Photoshop 里显示的稍有差别?

大多数浏览器加载图片时会转成 sRGB。如果你的原图带 Adobe RGB 或 Display P3 色彩配置,这里取到的就是 sRGB 等价值。要完全一致,请先把原图转成 sRGB 再上传。

放大镜显示的是单个像素还是一片区域的平均值?

放大镜采样的是十字光标正下方的那一个像素,周围像素只是为了帮你看清上下文。在放大镜里点击就能锁定那个像素的值,边缘的抗锯齿过渡色就不会误导你。

PNG 透明区域也能取色吗?

可以。透明像素会返回它原始的 RGB 值,透明度单独显示。完全透明的像素会落到画布底色(默认白)上,所以建议点击不透明区域取色更准确。

HEX、RGB、HSL、HSV 和 CMYK 有什么区别——该用哪一个?

HEX(#2E8B8C)是 CSS 和设计工具里最短的写法。RGB 给出 0–255 的三通道数值,适合代码中需要原始数字时使用。HSL 用色相、饱和度、亮度描述颜色,想让颜色更亮或更鲜艳时最直观。HSV 与 HSL 接近,但用明度(value)代替亮度,大多数设计软件的取色器更偏好这一格式。CMYK 给出印刷四色的百分比,是交付给印厂或印刷设计师时所需的格式。

可以一次取好几种颜色吗?

每次上传都会用图片的六种主色预先填充调色板，之后每次点击都会向集合中再添加一个取样。调色板面板会显示所有取样的颜色，并让你复制任意色块、一次性复制全部 HEX 代码、删除单个条目，或将整套导出为 JSON 文件或可直接粘贴的 CSS 自定义属性。

相关工具