品牌色号验收
印刷厂打样寄回，色卡上的「中国红」在铜版纸和哑粉纸上看起来完全不同。设计师用手机拍下实物，上传到工具，在图片上点取样，直接读出 RGB 和十六进制值，与设计稿中的 #D7000F 比对，发现偏差达 12%。凭此数值要求厂方重调油墨，避免整批 5000 个包装盒色差报废。
拖入 / 点击 / 粘贴图片
移到图上看放大镜 · 点击任意像素取色 · 滚轮缩放 · 拖动平移 · 本地处理不上传
当 前 色Current · 移图实时 · 点图取定
#CCCCCC
—
移到图片上即可实时取色，点击锁定并加入历史。
HEX#CCCCCC
RGBrgb(204, 204, 204)
HSLhsl(0, 0%, 80%)
HSVhsv(0, 0%, 80%)
CMYKcmyk(0%, 0%, 0%, 20%)
历 史 色History · 点复制 · 标 ★ 收藏
尚无取色记录
在图片上点击即可记录
在图片上点击即可记录
收 藏 调 色 板Favorites
点历史色的 ★ 收藏成调色板
导 出Export · 历史 + 收藏
就绪 · 上传图片后任意点取色，全程浏览器本地处理不上传
第一节
关于本工具
About设计师从参考图里取色，最怕吸管点下去，取到的却是 JPEG 压缩后的杂色。打开图片，鼠标悬停即显示像素精确的 HEX 与 RGB，点击存入历史色面板，方便后续对比调用。取色过程全在本地浏览器进行，图片不上传服务器，适合处理未公开的视觉素材。
使用场景
竞品界面拆解
产品经理截了一张竞品 App 的弹窗截图，想复刻其「确认按钮」的视觉质感。截图中的蓝色渐变无法用吸管直接取色，于是将图片导入本工具，在按钮高光、阴影、主体三个位置分别取样，得到 #2B7AFF、#1A5CFF、#0D3BFF 三组精确数值，用于内部样式库的色值标注。
旧照片修复配色
一张 80 年代的全家福已严重偏黄，修复时需要把褪色的墙面还原成当年的「淡米黄」。修复师将扫描件上传，在画面中未褪色的衣领阴影处取样，得到 RGB(248,235,215)，再以此作为底色基准，配合曲线工具做整体色偏校正，比凭感觉调色少试了 6 轮。
PPT 图表配色统一
市场部准备季度汇报，三个页面的柱状图用了不同深浅的蓝色，被总监批评「视觉不连贯」。员工把第一页的蓝色柱状图截图上传，用取色器点取样得到 #3B82F6，后续两页图表直接填入该色值，30 秒完成全稿配色统一，无需重绘任何图形。
装修墙漆选色
业主在社交媒体看到一张北欧风客厅照片，想用同款灰蓝色刷卧室背景墙。手机拍下照片上传，在墙面中央取样得到 #A3B1C6，拿着这组 RGB 值去立邦色卡库比对，发现最接近的色号是 NN0030-4，避免了「拿着手机给店员看屏幕」造成的色差误差。
第二节
使用指南
Getting Started使用步骤
- 1上传一张图片（支持 JPG / PNG / WebP），鼠标移到图上任意位置，光标旁实时显示该点颜色值
- 2点击图上某点，该颜色自动存入右侧「历史色」列表，最多保留 20 条
- 3点历史色列表中的色块，复制其 HEX 值到剪贴板，同时该色块高亮标记
- 4若需精确取色，按住 Shift 键后鼠标移动步长缩小为 1 像素，避免跳选相邻色
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传一张纯色#FF0000的图片，点击红色区域 | #FF0000 | 常规：纯色区域取色，验证基础取色功能是否准确返回十六进制值 |
| 上传一张渐变图片（从#000000到#FFFFFF），点击正中间位置 | #7F7F7F | 常规：渐变中间点取色，验证取色器能正确处理非纯色区域的插值颜色 |
| 上传一张1x1像素的图片，点击该唯一像素 | #123456 | 边界：最小尺寸图片取色，验证取色器在极限分辨率下是否正常工作 |
| 上传一张包含透明PNG的图片，点击透明区域 | #000000（或透明色处理结果） | 边界：透明像素的取色行为，不同实现可能返回黑色或忽略透明通道，需明确说明 |
| 上传一张超过100MB的图片，点击任意位置 | 无响应或提示“图片过大，请压缩后上传” | 边界：超大文件处理，验证工具是否有文件大小限制，避免用户误以为功能失效 |
| 上传一张非图片文件（如.txt），点击文件区域 | 无响应或提示“请上传图片格式文件” | 易错：非图片文件上传，验证输入验证机制是否完善，防止用户操作错误 |
| 上传一张黑白条纹图片（#000000和#FFFFFF交替），点击黑白交界处 | #808080（或接近灰色） | 易错：高对比度边界取色，验证取色器在像素级边缘的采样精度，避免出现锯齿色 |
常见错误对照
1.点击取色时误触相邻像素
✗ 错误
在图片上随意点击，认为取色器会自动取到目标像素✓ 修复
放大图片后，再在目标像素上精确点击取色器取的是鼠标点击位置的一个像素点，图片缩小时一个像素对应屏幕多个点，误触概率高。放大后点击能确保取到目标像素的精确颜色值。
2.忽略透明度通道，只取 RGB
✗ 错误
想复制带透明度的颜色值，直接点击取色后复制 #RRGGBB 格式✓ 修复
在取色结果面板中切换输出格式为 RGBA 或 HSLA，再复制取色器默认输出 RGB 六位十六进制，不包含 Alpha 通道。如果图片有透明区域（如 PNG 图标），需要手动切换格式才能获取完整颜色+透明度信息。
3.上传了被压缩或缩略图，颜色失真
✗ 错误
从微信聊天记录直接保存图片上传，认为颜色和原图一致✓ 修复
上传原始图片文件（如从设计软件导出的 PNG / PSD 原图）微信、QQ 等社交软件传输图片时会自动压缩并改变色彩空间（sRGB → 窄色域），导致取色结果与原始设计稿偏差 5-15%。使用原图才能保证颜色准确性。
4.用取色器取渐变色中的中间值
✗ 错误
在渐变条上点击取色，认为得到的是渐变中间点的颜色✓ 修复
取色器只能取单个像素点的颜色，渐变中间值需手动计算或使用渐变工具取色器是点采样工具，不提供颜色插值功能。渐变条上点击只能获得该像素点的颜色，不代表渐变的逻辑中间色（如线性渐变中间点可能是 50% 混合）。
5.取色后直接用于网页，未考虑色域差异
✗ 错误
从设计稿取色后直接复制十六进制值到 CSS 中✓ 修复
确认设计稿色域（sRGB / Display P3 / Adobe RGB），若为广色域需转换后再使用取色器默认在 sRGB 色域下工作。如果设计稿是 Display P3 色域（如 Mac 屏幕），取出的十六进制值在普通显示器上会偏暗或偏色，需要色域转换工具处理。
6.取色后忘记保存，刷新页面丢失
✗ 错误
取色后直接关闭页面或刷新，认为历史记录会自动保存✓ 修复
在取色结果面板中点击「加入历史色」按钮，或手动复制颜色值到剪贴板取色器的历史色存储在浏览器内存中，刷新或关闭标签页后清空。只有主动保存（加入历史色或复制）才能保留颜色值。
7.使用取色器取屏幕外颜色（如系统菜单）
✗ 错误
想取浏览器外系统菜单的颜色，在取色器页面上点击无效✓ 修复
使用系统级取色工具（如 macOS Digital Color Meter / Windows PowerToys Color Picker）本取色器只能取上传图片内的颜色，无法跨进程取屏幕其他应用的颜色。系统级取色工具才能捕获操作系统全局像素。
第三节
工作原理
How It Works核心公式
R = (R_8bit / 255) × 100%
变量说明
R_8bit红通道 0–255 整数像素值R归一化后的红通道百分比
示例
取色点像素值 (R=180, G=75, B=32)：R 归一化 = 180/255 ≈ 70.6%，G = 75/255 ≈ 29.4%，B = 32/255 ≈ 12.5%。该颜色为偏橙的深棕色，RGB 十六进制 #B44B20。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问上传图片后点哪里取色？点了没反应是怎么回事？＋
答
上传图片后，鼠标移到图片上，光标会变成十字准星或吸管图标，在目标颜色上单击即可。如果点了没反应，可能是图片未完全加载（等进度条消失），或者浏览器阻止了鼠标事件（极少见，可刷新重试）。本工具纯前端运行，点击取色不需要额外按钮，直接点图片任意位置即可，取到的颜色会出现在下方色块和代码区。
问取出来的颜色和我用 PS 吸管吸的不一样，差很多，哪个准？＋
答
如果差很多（肉眼可见色差），通常是取色位置偏差——鼠标点击时可能没点中你想的那个像素。本工具取的是你鼠标点击处单个像素的 RGB 值，而 PS 默认吸管是 3×3 或 5×5 平均采样，所以边缘或渐变区域会有差异。可以放大图片后再取色，或者连续取你目标区域周围几个像素对比，取色器历史记录会保留所有取样值。
问支持哪些图片格式？WebP 或 SVG 能上传吗？＋
答
支持浏览器能直接渲染的常见格式：JPG、PNG、GIF、BMP、WebP。SVG 矢量图不支持直接取色，因为浏览器渲染 SVG 时是矢量转像素，不同缩放级别颜色有差异，建议先用截图工具转成 PNG 再上传。如果上传后图片显示不出来，检查文件是否损坏或格式是否非标准。
问取色后怎么把颜色代码复制出来？有快捷键吗？＋
答
取色后，颜色代码会显示在下方色块旁边的文本框里，默认是 HEX（#RRGGBB）。直接点击文本框或点击代码旁边的“复制”按钮（如果有）即可复制到剪贴板。暂不支持键盘快捷键复制，但可以在文本框内按 Ctrl+A 全选再 Ctrl+C。如果需要 RGB 或 HSL 格式，可手动转换，本工具目前只输出 HEX。
问只能取一张图吗？能不能同时打开多张图对比颜色？＋
答
目前一次只能上传一张图片取色。如果想对比多张图的颜色，可以分别上传取色，取色器会保留所有历史记录（按顺序列出），方便复制对比。但历史记录在页面刷新后会丢失，建议及时复制需要的颜色代码。没有多图同时显示的功能，如果需要对比，可以开两个浏览器标签页。
问这个取色器会上传我的图片到服务器吗？安全吗？＋
答
不会。本工具是纯前端实现（FE），图片只在你自己的浏览器内存里处理，不会上传到任何服务器。上传后图片只在本地显示和取色，关闭页面或刷新后图片自动释放。所以不用担心隐私泄露，也可以放心处理敏感设计稿里的颜色。
问取色器历史记录能保存多久？关掉页面再打开还在吗？＋
答
历史记录仅在当前会话（页面未关闭）期间有效。刷新页面或关闭标签页后，所有取色记录会清空，不会自动保存到本地存储。如果需要长期保存某个颜色，建议取色后立即复制代码到自己的设计文档或代码里。没有登录或导出历史功能，纯粹是一次性辅助工具。
问手机浏览器上能用吗？触摸取色准不准？＋
答
手机浏览器上可以上传图片，但触摸取色精度较差。因为手指点击面积大，很难点中单个像素，尤其在小屏幕上。建议在手机端使用截图后放大图片再取色，或者用带触控笔的设备。本工具没有专门适配触摸事件，所以体验不如桌面端鼠标精准。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。