颜色工具
点一下取色,或让工具自动提取整套配色。全部处理在当前浏览器内完成,图片不会离开你的设备。
- jpg, jpeg, png, webp, bmp, gif
- 免注册
- 批量处理
拖拽图片到这里,或点击选择文件
支持 jpg, jpeg, png, webp, bmp, gif
单次最多 30 张 · 合计不超过 300 MB · 单张最大 50MB
单次最多 30 张 · 合计不超过 300 MB · 单张最大 50MB
待处理队列
已加载 0 项
还没有选择文件
在图上操作
就绪
处理结果
尚未开始
正在处理…
0.0s
正在你的浏览器里处理,图片不会上传;张数多或尺寸大时需要等一会儿。
处理完成后,结果会显示在这里。
颜色工具能做什么
- 提取调色板:自动分析出图片的主要颜色及各自占比,一键得到整套配色
- 单点取色:点击图片任意位置,读取该处精确颜色值
- 多格式输出:HEX、RGB 两种格式,可直接复制到样式表或绘图代码
- 排序与取样可调:按占比、明暗或色相排列,取样精度也能调整
参数怎么调
下表列出该工具的全部可调参数与建议取值。不确定时保持默认值即可,默认值是多数场景下的稳妥选择。
| 参数 | 可选值 | 默认 | 说明 |
|---|---|---|---|
| 工作模式 | 提取调色板 / 单点取色 | palette | 做设计时用提取调色板拿整套配色;校对某个具体位置的颜色用单点取色。 |
| 提取数量 | 2 – 16色 | 6色 | 想出的颜色个数。5–8 个是设计上最实用的范围,再多就会出现很多肉眼难分辨的近色。 |
| 输出格式 | HEX(#RRGGBB) / RGB / 两者都给 | hex | HEX 用于样式表和设计工具;RGB 用于绘图代码。 |
| 取样精度 | 1 – 20px | 5px | 把图片按此大小分块后统计颜色。数值越大速度越快、越偏重大色块;小数值能抓到更细微的色差。 |
| 排序方式 | 按占比 / 由亮到暗 / 按色相 | ratio | 按占比排列最接近使用直觉;按色相排列适合检查配色是否协调。 |
适用场景
- 拿到一张参考图,需要还原它的配色来做设计
- 从品牌 Logo 里取出标准色值写进样式表
- 配色前先看看照片的实际色调,避免凭感觉调错
- 检查设计稿与实现在某一处颜色是否一致
常见问题
为什么提取出来的颜色和我看到的有点不一样?
图片里同一个区域往往有大量相近但不相同的颜色(尤其是有噪点或渐变的照片)。工具是按分块统计后取代表性颜色,所以结果是一个「概括」,与你的直观感受略有差异是正常的。想精确读取某一点,请用单点取色模式。
能提取透明图片的颜色吗?
能,但透明区域会被忽略,不会被当成一种颜色。这样在 PNG 图标上取色时,不会把「透明」误算成配色的一部分。
取色准吗?有没有色彩空间的偏差?
取的像素值本身是精确的。需要注意的是图片如果带 ICC 色彩配置,浏览器渲染时会做色彩管理,显示出来的观感可能与原始数值略有差别。用于网页设计时通常不必在意这个层级。