先把问题解决
优先在未缩放改写的原始 PNG 实心区域中央取色，记录 HEX 与位置，再用邻近点复核。本站图片取色显示六位 RGB HEX，不展示透明度，也不恢复原始设计变量；边缘、透明区和 JPG 像素不能直接当作品牌标准色。
先区分设计色、文件像素与屏幕观感
设计稿中设定的颜色、导出文件的像素和屏幕上看到的颜色是三个检查对象。取色能帮助读出当前文件，不能证明它仍等于设计师最初设定的值。显示器、浏览器解码和图片本身也会影响观感。需要严格色彩管理的任务，应使用相应工作流，不靠一次截图定案。
MDN 的像素读取说明描述了画布区域的图像数据。本站实现会把图片绘制到画布，并将点击位置映射到原始尺寸，再读取一个像素的 RGB；显示出来的代码没有包含第四个透明度通道。
这四种位置，能回答不同问题
| 位置 | 读到的是什么 | 适合的判断 |
|---|---|---|
| 大面积实心区中央 | 当前文件内部的像素色 | 核对导出色块 |
| 字体或图形边缘 | 可能混合前景与背景的像素 | 检查边缘过渡 |
| 阴影或渐变区域 | 该点在渐变中的颜色 | 分析局部效果 |
| 透明区域 | RGB 与透明度共同决定外观 | 六位 HEX 不足以还原外观 |
想检查白边与背景关系，可先读透明图片边缘检查，不要把边缘点误认成主体色。
用双色 PNG 建立一个可重复的检查
这是自编验收样例，不是摄影素材或品牌规范：新建 600×300 的不透明 PNG，左半边填充 #0d9488，右半边填充 #334155，不添加纹理、阴影或色彩转换。两侧都有足够大的区域，便于避开边缘。样例的已知输入用来检查操作路线，不能据此推断其他照片的准确度。
- 打开图片取色器，选择样例 PNG，等待图片显示。工具使用当前浏览器读取你选择的文件。
- 在左半边中央点击，读取页面上显示的 HEX。再点同一区域的邻近位置，检查是否仍为 #0d9488。
- 点击右半边中央，检查是否为 #334155。记录输入文件、取色区域和结果，避免把剪贴板中较早的代码当成当前值。
- 回到真实图片，优先选择大块均匀区域。如果邻近点差异明显，先检查是否存在渐变、压缩或缩放，不急着取平均并宣布它是标准色。
同一张图的两种结论
在字母边缘点一下，把读到的值命名为“品牌色”。
在实心背景中部取样，并将结果记为“这份 PNG 该区域的像素值”。
透明区看起来白，不等于像素就是白
图片透明区域常显示页面的底色；那是合成后的外观。六位 HEX 只表达 RGB，没有说明该像素是否不透明。即使读到 #000000，也不能立刻判断透明区会在设计中显示黑色。本站页面不显示 alpha，因此不要用这个输出证明透明度正确。
如果要在浅色和深色背景上使用图标，分别预览实际合成效果，并保留支持透明度的文件。JPG 不保留透明背景，且有损编码可能改变局部像素。可以用PNG、JPG 与 WebP 的选择指南确定交付格式，再对最终交付文件复核。
不要通过反复截图、放大截图或另存 JPG 来“提高取色精度”。这会换掉检查对象。照片包含光照与纹理时，不存在一个点击就能还原材质原色的通用方法。
把颜色代码交付成可追溯的记录
自动复制依赖浏览器剪贴板权限，显示值仍应作为当前结果核对。复制未成功时可以手动复制 HEX。本站不提供印刷专色匹配、校准显示器或批量调色板认证；这些需求应使用专门工具。
使用颜色前核对
- 记录的是原图文件和明确区域，而不是无来源截图。
- 已避开边缘，并比较同一实心区域的邻近点。
- 已说明输出是 RGB HEX，未声称包含透明度。
- 最终文件在目标背景和使用尺寸下完成检查。
可下载双色图：把点击位置和色值一起记录
two-colors.png 为600×300：x=0—299为#0d9488，x=300—599为#334155。坐标以原图左上为原点；界面可能缩放显示。
- 在取色器选择该PNG，开始处理后点击左半内部中心，记录显示的HEX；再点附近内部位置复查。
- 点击右半内部中心，记录第二个HEX。用区域而不是显示器上的固定屏幕坐标选点，避免缩放映射混淆。
- 另打开transparent.png检查透明角落与主体区域，记录界面实际提供的字段；没有alpha字段时不能用HEX推断透明度。
参考结果与失败后的处理
双色内部预期分别为#0d9488与#334155；HEX大小写不影响此处数值。两次内部复核应一致，但边界、浅灰线与透明区域不属于这个纯色验收区域。
点击到右半却沿用左半剪贴板值，会形成看似稳定的错误记录。先核对当前显示，再复制；正式色彩管理需求还需考虑色彩空间与输出环境，本例只检查文件像素取样。
“可下载双色图：把点击位置和色值一起记录”为自编教学案例。分别保留源材料、实际输出与核对判断；共享ZIP只是准备材料，不代表用户已经完成验收。
常见问题
为什么同一区域附近会出现多个 HEX？
边缘、渐变、阴影和有损压缩都可能产生不同像素。先扩大取样区域的观察范围，再确认是否存在真正均匀的实心区。
能直接提取透明度吗？
这个入口显示六位 RGB HEX，不输出 alpha。需要透明度时使用支持该通道的检查方法，并预览实际背景合成结果。
为什么复制后仍是旧颜色？
先看页面当前值，再检查剪贴板权限和复制是否成功。必要时手动复制当前 HEX，不把旧剪贴板内容当成刚读取的结果。
参考资料与延伸阅读
按步骤开始处理
进入对应工具，预览处理结果，检查导出的文件。
