返回图片工具
图片取色器
隐私优先的图片取色器:从图片中提取像素颜色并自动生成调色板,支持 K-means / 中位切分 / 频率直方图三种算法,内置 WCAG 对比度检查与色盲模拟,完全在浏览器内运行。
零上传。像素数据从不离开你的设备。
待分析图片
拖拽图片到此处、粘贴,或点击上传
最大 10 MB,支持 PNG / JPG / WebP / GIF。
试试示例图片
收藏调色板0 colors
点击图片或使用自动调色板开始收集颜色。
工具
色盲模拟
导出
收藏调色板为空。
最近图片
暂无历史。
隐私优先
每个像素都留在你的设备上。我们用 Canvas API 解码图片,所有算法都在浏览器内运行 — 零上传,零网络请求携带像素数据。
三种图片取色方式
取色器模式读取光标下的单个像素,并附带 8× 放大镜;调色板模式对整张图片运行聚类算法;区域模式允许你拖框选区,仅在框内分析 — 适合 Logo / 主体在角落的场景。
为何算法选择很重要
频率直方图在 5-bit / 通道的颜色立方体里建直方图 — 速度最快,但容易被大面积纯色背景主导;中位切分沿最宽通道轴递归切分像素桶 — 适合海报与插画;K-means 在 CIE L*a*b* 空间聚类(欧式距离≈感知差异) — 速度稍慢但对照片最准。
WCAG 与色盲模拟
Shift+点击任意两个收藏色块即可查看 WCAG 2.1 对比度比值与 AA / AA 大字号 / AAA / AAA 大字号四档徽章。切换 Protanopia / Deuteranopia / Tritanopia,可实时预览调色板在常见色觉缺陷下的视觉表现 — 模拟基于 SVG feColorMatrix。
常见问题
- 图片会上传吗?
- 不会。图片通过浏览器 Canvas 解码,任何网络请求都不会携带像素数据。
- 为什么 K-means 用 Lab 色彩空间?
- Lab 是感知均匀的:同样的欧式距离≈大致相同的视觉色差。在 RGB 空间聚类会过度偏向绿通道、低估色度。
- 我该选哪种算法?
- K-means 准确度最高;中位切分平衡速度与质量;频率直方图在大图上反馈最快。
- 为什么 K-means 每次结果都不一样?
- K-means++ 采用随机初始化。结果会收敛到相近的颜色,但具体 HEX 值可能在每个通道上有几个单位的浮动。重新运行可得到不同 seed 的结果。
- WCAG 4.5:1 是什么意思?
- 这是 WCAG 2.1 AA 对正常字号正文的最低对比度要求。AAA 需要 7:1。
- 色盲模拟是怎么实现的?
- 我们用 LMS 视锥响应矩阵 + SVG feColorMatrix 过滤器实时模拟 — 与 Chromium DevTools 同一方法。仅为近似模拟,不能替代真实用户测试。
- 可以传透明背景的 Logo 吗?
- 可以。完全透明的像素会被自动从调色板算法中排除。
- 为什么 EyeDropper 按钮是灰的?
- 原生取色器 API 仅在 Chromium 浏览器中可用(Chrome 95+ / Edge 95+)。Firefox / Safari 会自动回退到 canvas 内取色 — 悬停 / 点击图片即可读取像素。