图片取色器
悬停放大看清每一个像素，点击取色，HEX / RGB / HSL / CMYK 一键复制
100% 浏览器本地处理，图片不会上传到任何服务器
如何从图片取色
步骤一
上传 JPG、PNG 或 WebP 图片，原图按原始分辨率载入画布——不上传服务器。
步骤二
把鼠标移到图片任意位置——7×7 像素放大镜跟随光标，精确定位到具体像素而不是大概区域。
步骤三
点击锁定颜色，HEX、RGB、HSL、CMYK 四种色值同时显示——点「复制」即入剪贴板，最近 10 次取色自动存入历史。
什么是图片取色器？
图片取色器（也叫吸色器）读取数码照片或截图里任意像素的准确颜色，并把它转换成可以在别处直接使用的颜色代码——用于 CSS、Photoshop、品牌规范或印刷色卡。
屏幕上每个像素由特定强度的红、绿、蓝光组成。取色器只是读出这三个数字，再换算成下游工具期望的格式：网页用 #3b82f6，图像编辑器用 rgb(59, 130, 246)，调色用 hsl(217, 91%, 60%)，印刷用 cmyk(76%, 47%, 0%, 4%)。
本工具完全在浏览器里读取颜色——不上传、不经过服务器，图片从不离开你的设备。
四种颜色格式：HEX、RGB、HSL、CMYK
不同格式以不同方式描述同一种颜色。各自的最佳用途：
| 格式 | 示例 | 适合 |
|---|---|---|
| HEX | #3b82f6 |
CSS、HTML、设计工具——互联网的默认格式 |
| RGB | rgb(59, 130, 246) |
Photoshop、图像编辑器，颜色还要再导出的场合 |
| HSL | hsl(217, 91%, 60%) |
调色——加亮、压暗、偏移色相 |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
印刷——名片、画册、包装 |
HEX 其实就是十六进制写法的 RGB。#3b82f6 拆开是红 0x3b（59）、绿 0x82（130）、蓝 0xf6（246）。网页用 HEX 是因为它紧凑且无歧义。
HSL（色相、饱和度、亮度）是一种对人类友好的颜色描述。色相是 0-360° 的色环（0 = 红，120 = 绿，240 = 蓝），饱和度和亮度是百分比。设计师迭代配色时爱用 HSL——"稍微暗一点"就是把亮度降 5% 这么简单。
CMYK 面向油墨而非光。印刷机铺设青、品红、黄、黑四种油墨，百分比告诉打印机每种用多少。RGB 转 CMYK 是近似换算（±5%），因为 CMYK 色域更小，最终效果还取决于纸张、打印机和 ICC 色彩配置。
为什么要从图片取色？
常见场景：
- 从照片复刻配色盘——看到一张暖色调绝美的日落照？取 4-5 个颜色直接用作网站配色
- 匹配品牌色——客户只给了 JPG 格式的 Logo 没给品牌手册？直接从图上取品牌红
- 搭建设计体系——从主视觉取色，再逐个派生深浅变体
- 还原某种风格——分析竞品 UI 截图？取它的主色、辅色和强调色
- 无障碍检查——取前景色和背景色，计算 WCAG 对比度（正文要求 ≥ 4.5:1）
- 涂料配色——从房间照片取色去买匹配的涂料（仅粗略参考——真正的涂料配色仍需要实物色卡校准）
图片取色的原理是什么？
幕后过程：
- 图片以原始分辨率绘制到 HTML
<canvas>画布上 - 悬停时，
canvas.getBoundingClientRect()把光标的屏幕位置映射为画布像素坐标 ctx.getImageData(x, y, 1, 1)读取该像素的红/绿/蓝值- 放大镜用
getImageData(x − 3, y − 3, 7, 7)读取光标周围 7×7 区域，放大 24 倍渲染到第二个画布 - 点击时颜色被"锁定"——放大镜继续跟随光标，但当前颜色面板保持稳定直到下一次点击
一切都在本地发生。浏览器的画布 API 提供像素级直读——没有服务器、没有上传、不留痕迹。
在各种设备上怎么取色
最快——直接用本页
在上方上传，点击任意像素。HEX、RGB、HSL、CMYK 同时出现在右侧面板，每个都有自己的复制按钮。
Adobe Photoshop（Mac / Windows）
- 选吸管工具（快捷键 I）
- 点击图片任意位置——颜色载入前景色块
- 双击色块查看 HEX / RGB / HSL 值；CMYK 在颜色面板（窗口 → 颜色 → 菜单 → CMYK 滑块）
GIMP（免费，Mac / Windows / Linux）
工具 → 颜色选择器，然后点击。取到的颜色出现在前景色块——点它查看所有格式。
Mac 数字测色计
macOS 自带，位于/应用程序/实用工具/数字测色计。悬停屏幕任意像素实时查看 RGB 值。按 Cmd + Shift + C 以 HEX 格式复制颜色。
iPhone 和 iPad（iOS）
系统照片 App 不提供像素取色。用 Safari 打开本工具，或 Pantone Connect、Color Grab、Adobe Capture 等 App。
Android
系统相册同样没有取色器。用手机浏览器打开本工具，或装一个取色 App。
常见问题
这个取色器免费吗？
免费——完全免费，无需注册、无水印、不上传。工具用 HTML 画布 API 在浏览器里运行。
iPhone 和 Android 上能用吗？
能。工具完全响应式，任何现代手机浏览器都能用。触屏设备上，拖动预览放大镜、抬手锁定颜色。
能直接从 PDF 取色吗？
不能——PDF 不是位图。先把 PDF 页面转成 PNG 或 JPG（可以用本站的PDF转图片），再上传到这里取色。
为什么取的颜色贴到 Word 或 PowerPoint 里看起来不一样？
两个常见原因：(1) 目标程序用了不同的色彩配置（多数 Office 程序按 sRGB 处理；如果你的屏幕或截图是 Display P3，颜色会偏移）；(2) 目标程序的"主题色"面板覆盖了粘贴的值。以纯文本粘贴通常能避开第二个问题。
CMYK 值为什么是近似值？
CMYK 取决于打印机、纸张和 ICC 色彩配置。在不知道具体输出设备的情况下，我们用通用换算公式，误差在 ±5% 以内但不足以直接付印。生产级印刷请用 Photoshop 或 Illustrator 并嵌入印厂指定的 ICC 配置。
一次能取多个颜色吗？
工具一次点击取一个颜色，但最近 10 次取色保留在历史面板里。点击任意历史色块即可把它重新载入当前颜色（并自动复制 HEX 到剪贴板）。
这个工具和配色盘生成器有什么区别？
配色盘生成器（如 Coolors、Adobe Color）按规则创造新颜色——互补、类似、三角。取色器读取图片里已经存在的颜色。两者是互补的工作流：从照片取色 → 用生成器精修。
