怎样从图片里取出某个像素的准确颜色值？

移到目标处，放大镜显示周围 11×11 像素并框出中心格，点击即读取该像素的 8 位 sRGB 值（0–255）。聚焦画面后也可用方向键逐像素移动，Shift 每次 10 像素，按 Enter 记录。

主色提取的百分比是怎么算出来的？

先把图片缩小到约 4 万个像素，忽略透明度低于 50% 的像素，再用中位切分分成 4–12 组。占比 = 组内像素数 ÷ 参与统计的像素数，合计 100%。算法没有随机步骤，同图结果固定。

为什么取到的颜色和设计软件里显示的不一样？

多是色彩配置所致：浏览器把 Display P3、Adobe RGB 等配置换算成 sRGB 再读取，设计软件可能显示原配置数值。16 位 PNG 会换算为 8 位，JPEG 压缩也使相邻像素差几级。

图片取色器

点击图片读取像素颜色，输出 HEX、RGB、HSL，并自动提取主色与占比

浏览器本地计算

载入图片后在画面上移动查看放大镜，点击即可记录颜色；下方会自动列出主色和占比。

选择或拖入一张图片也可以直接粘贴剪贴板中的图片。图片只在当前浏览器中处理，不会上传。每次处理一张 JPG、PNG、WebP、AVIF、BMP 或 GIF 图片，不超过 50 MB。

示例

输入

sample.png（页面生成，1200×800）· 主色 6 种 · 在画面中心 (600, 400) 取色

示例结果

中心像素的 HEX / RGB / HSL，6 种主色按占比从高到低排列，并显示平均色

示例图带细噪点，相邻像素的数值会相差几个级别；取色时可借助放大镜确认具体像素。

技术细节与边界

颜色从 Canvas 的 8 位 sRGB 像素读取（每通道 0–255），浏览器会先把嵌入的 ICC 配置转换到 sRGB。最长边超过 4096 像素的图片按比例缩小后取色，坐标仍换算回原图像素。主色提取把图片缩小到约 4 万个像素，忽略透明度低于 50% 的像素，用中位切分把颜色分成指定数量的组，占比 = 组内像素数 / 参与统计的像素数；算法不含随机步骤，同一张图结果固定。

关于此工具

载入图片后点击任意位置读取该像素的颜色，放大镜显示周围 11×11 像素以便精确定位，也可以用方向键逐像素移动后按 Enter 记录。取到的颜色按 HEX、RGB、HSL 列出并可逐项复制，最多保留 24 条记录；同时自动提取 4–12 种主色及其占比，并给出整张图的平均色。图片只在浏览器中读取，不会上传。

操作步骤

拖入、点击选择或粘贴一张图片。
在图片上移动查看放大镜，点击（或用方向键定位后按 Enter）记录颜色。
复制需要的颜色值，或选择主色数量查看配色与占比。

输入 / 输出说明

输入: 一张 JPEG、PNG、WebP、AVIF、BMP 或 GIF（只取第一帧）图片，不超过 50 MB、5000 万像素。
输出: HEX、RGB、HSL 颜色值、像素坐标、4–12 种主色及占比和平均色。
限制: 读取的是显示用的 8 位 sRGB 值，不输出 CMYK、Lab 或印刷色号；超过 4096 像素的图片会缩小后取色。

注意事项

JPEG 压缩会让相邻像素出现细微差异，需要精确色值时请从 PNG 等无损原图取色。颜色值可在颜色转换工具中继续换算。

常见问题

怎样从图片里取出某个像素的准确颜色值？: 移到目标处，放大镜显示周围 11×11 像素并框出中心格，点击即读取该像素的 8 位 sRGB 值（0–255）。聚焦画面后也可用方向键逐像素移动，Shift 每次 10 像素，按 Enter 记录。
主色提取的百分比是怎么算出来的？: 先把图片缩小到约 4 万个像素，忽略透明度低于 50% 的像素，再用中位切分分成 4–12 组。占比 = 组内像素数 ÷ 参与统计的像素数，合计 100%。算法没有随机步骤，同图结果固定。
为什么取到的颜色和设计软件里显示的不一样？: 多是色彩配置所致：浏览器把 Display P3、Adobe RGB 等配置换算成 sRGB 再读取，设计软件可能显示原配置数值。16 位 PNG 会换算为 8 位，JPEG 压缩也使相邻像素差几级。