从配图取三种颜色，导出前怎样核对像素

操作步骤

1. 打开图片取色板，点击“载入三色示例”。这是一张 600 × 300 像素的本地生成图片，上部是蓝、绿、橙三块实色，下部是一条半透明蓝色带。先用它核对操作，再选择自己的 PNG、JPEG 或 WebP。
2. 在 X 填 100、Y 填 100，点击“读取坐标颜色”。应看到 #2563EB、rgba(37, 99, 235, 1) 和透明度通道 255/255，点击“加入色板”。坐标从左上角的 (0, 0) 开始，不是从 1 开始。
3. 保持 Y 为 100，依次把 X 改为 300、500，每次读取后加入色板。两次色值分别是 #16A34A 和 #F97316；右侧应显示 3/12。再次加入同一个颜色不会增加数量。
4. 点击“下载 CSS 色板”，用文本编辑器打开 jijie-image-palette.css。核对三个变量的顺序与色值，再把需要的变量放入自己的样式。也可复制 CSS；浏览器拒绝复制时从文本框手动选择内容。
5. 现在选择自己的图片。新图片载入成功会清空旧色板；点击预览能读取对应像素，精确取样可输入原图坐标。先选大块纯色区域，再检查边缘是否受到抗锯齿、透明度或 JPEG 压缩影响。

跟着示例试一次

假设要让说明卡片沿用一张配图的三种颜色。示例坐标 (100,100)、(300,100)、(500,100) 分别对应蓝、绿、橙。导出内容如下。页面预览在手机上会缩小，但数字坐标始终指原图像素。

:root {
  --image-color-1: #2563EB;
  --image-color-2: #16A34A;
  --image-color-3: #F97316;
}
/* 使用示例 */
.card-title { color: var(--image-color-1); }

怎样确认结果正确

先核对 3/12 与导出文件的三行变量，确认蓝色为 #2563EB，而不是凭肉眼比较显示器颜色。对于 600 像素宽的示例，X=599 有效、X=600 应报错。修改坐标后必须重新读取才可加入颜色。遇到透明 PNG，页面显示的 alpha 通道应保留；例如蓝色通道为 255、其他颜色通道为 0、alpha 为 128 的像素导出 #0000FF80，而不是不透明的 #0000FF。

常见问题与边界

读取的是浏览器解码至 sRGB 画布的像素，不能由照片反推物体真实颜色，也不能替代品牌原始色值、印刷色或屏幕校色。半透明边缘经过解码与预乘处理可能有细小舍入差异；完全透明处的 RGB 没有可见颜色含义。棋盘格只是透明背景提示，不会加入取色。 本工具不自动提取主色，不做颜色搭配或文字对比度判断；需要时另用本站对比度检查。最多收集 12 个不同色值，透明色输出八位 HEX，使用前核对目标软件是否支持。文件限 10 MiB、1600 万像素、单边 16,000 像素，只接受 PNG/JPEG/WebP；动画图片只读取浏览器选取的一个静态帧，不提供逐帧选择，不支持 SVG、GIF、远程图片网址或跨页面屏幕取色。读取失败保留旧图片与色板，要留意文件名与错误提示。图片和结果只在本页内存处理，不上传；刷新会丢失，网站页面加载仍需联网。