获取图片的主色调
适合让页面配色贴合一张照片,或者在找不到品牌规范手册时,从标志图片里把品牌色找回来。
- 完全在你的浏览器里运行
- 断网也能用
- 不上传
- 不用注册
- 没有水印
正在加载工具……
工作原理
- 拖入一张或多张图片。
- 选择想要提取的颜色数量。
- 把结果复制为 CSS 变量(用于网页)或 JSON。
为什么什么都不用上传
这个页面上的每一步操作,都由运行在你浏览器标签页里的代码完成,用的就是渲染网页的那套引擎。文件从磁盘读进标签页的内存,在那里被处理,再作为下载写回去。它不会被送到任何地方 —— 不会送给我们,也不会送给第三方。
自己动手验证
- 打开浏览器的开发者工具(F12),选择“网络”(Network)面板。
- 载入你的文件,运行这个工具。
- 你能看到的请求只有这些:工具自己的代码 —— 少数几个重型工具还会从公共 CDN 取它们的开源引擎 —— 外加一条发往 loreatec.jp 的小小访问记录(页面地址和标题,仅此而已)。没有一条带着你的文件。
常见问题
颜色是怎么挑出来的?
相近的颜色会被归到同一组,再按各组占图片的面积排序,所以排第一的颜色,就是你会称之为"背景色"的那个。同一张图片每次得到的结果都一样,这一点在敲定品牌色时很重要。
为什么调色板的颜色看起来有点发闷?
因为每个色块都是所在分组的平均值。一张大面积灰墙上印着鲜红标志的照片,整体上大部分是灰色,排序也会如实反映这一点。想让这些次要的点缀色显出来,可以要求提取更多颜色。
能取到标志的精确颜色吗?
对于平面图形可以 —— 因为色块本身是均匀的,平均值就是真实值。对于印刷标志的实拍照片就不行:光线会让每个像素都有偏差,结果只能是一个接近值。
透明区域会怎么处理?
透明像素会被直接忽略,而不是当成白色计入统计,所以一个没有背景的 PNG 标志,提取出来的是标志本身的颜色,而不是被白色主导的调色板。