图片取色器

功能

• 点图任意位置取色，给出 HEX、RGB、HSL 三种写法
• 整图平均色 —— 做配色、找主色调时的第一参考
• 主色板用中位切分，按占比排序（不是色立方量化）
• 主色数量可选 5 / 6 / 8 个，每个标出占全图的比例
• 取样半径 1×1 / 3×3 / 5×5 —— 压缩照片默认 3×3 避开噪点
• 半透明像素不计入统计，抠过图的 PNG 不会被透明区拖黑
• 结果另存为 PNG 色卡与一份可复制的文本说明
• 图片不上传，断网也能用

使用方法

1. 把图片拖进来，或用 Ctrl/⌘ + V 粘贴截图
2. 按需要选取样半径与主色数量
3. 整图平均色与主色板立刻出现，可另存为 PNG 色卡
4. 点预览图上的任意位置，取到那一处的颜色

常见问题

取样半径该选哪个？

看图片的来源。压缩过的照片（手机 JPEG、聊天软件转发过的图）同一个纯色区域里相邻像素会有 ±3 的抖动，1×1 常常取到一个噪点；默认的 3×3 取一小块平均，更接近你肉眼看到的颜色。需要精确到某一个像素（比如读一张 UI 截图里的准确色值）时才用 1×1。

主色板为什么不用「量化成 256 色」那种做法？

把颜色量化到 8×8×8 的色立方是最省事的写法，但它会把相近的颜色拆到不同的格子里 —— 于是同一个大面积的主色被切成好几条、每条占比都很小，排序之后真正的主色反而排在后面。中位切分按像素分布递归二分，主色会完整落在一个区域里，占比才是真实占比。

透明的地方会被算进去吗？

不会。alpha 低于一半的像素完全排除在平均色与主色板之外。这一点很关键：抠过图的 PNG，透明区域的 RGB 常常是 0，算进去的话整张图的平均色会被拖黑 —— 这是这类工具最常见的错。

图片会上传吗？

不会。取色与统计都在浏览器里用 canvas 完成，全程在本机内存里，断网也能用。