图片取色
上传一张图片，自动提取主色板，也可以点击任意位置取到精确像素色值。
使用说明
- 点击虚线框选择一张图片，或把文件直接拖进来。
- 页面会自动提取最多 8 个主色，按占比从高到低排列。
- 点击色块复制该颜色的 HEX 值，点「复制全部色值」可按行拿到整组。
- 点击图片任意位置，可以取到那个像素的精确颜色与 RGB 值。
- 图片只在当前页面解码，刷新后需要重新选择。
常见问题
图片会被上传吗？
为什么提取的颜色和原图不完全一样？
可以提取多少个颜色？
支持哪些图片格式？
使用步骤
- 选择或拖入图片
点虚线框选择文件，或把图片直接拖进来。浏览器能解码的格式都支持，图片不会离开本机。
- 看自动提取的主色板
页面会给出最多 8 个主色，按占比从高到低排列，每个色块下面标着 HEX 与占比。
- 点击色块复制
点任意色块即复制该 HEX 值；点「复制全部色值」可以一次拿到整组配色。
- 点击图片取单点色
想取某个细节的颜色，直接点图片上那个位置，结果区会显示精确 HEX、RGB 与透明度。
- 拿去用
把色值粘进设计软件、CSS 变量或主题配置即可，需要配色方案时再配合色板生成器扩展。
工具详细介绍
做海报、PPT 或网页时，常需要从一张照片或截图里提炼配色。肉眼估计色值容易偏，吸色工具又只能取单点，遇到渐变或复杂画面就无从下手。主色板解决的是另一个问题：这张图整体看起来是什么色调，哪几个颜色占了大部分面积。把它提取出来，配色就有了可复用的起点。同一张图在明暗不同的屏幕上也会变味，取色只是逼近。
本页先把图片画到画布上并缩到最长边 360 像素，再忽略半透明像素，用中位切分把颜色聚成若干桶。每个桶取平均色作为一个主色，占比按桶内像素数计算。点击图片取色走另一条路径，用原尺寸画布读取单个像素，因此能拿到精确值。所有解码与计算都在本地完成。色板只是起点，最终配色仍要按内容调整，别把它当唯一答案。
原理与背景
中位切分把颜色看作三维空间里的点，先找出跨度最大的通道，按该通道的中位数把点集切成两半，重复到桶数达到目标。它比逐像素统计更抗噪，也比 k-means 更快，代价是结果依赖切分顺序。照片里大面积天空会单独占一个桶，少量高饱和点缀可能被合并，所以主色板反映的是面积分布，不是视觉重点。想更贴近视觉重点，可以改用 k-means 或按区域加权。
提取结果还要经过一层人工判断。JPEG 压缩会在色块边缘产生杂色，同一面墙可能读出三四个相近的 HEX。屏幕色彩配置不同，同一张图在两台设备上看起来也不一样。把色值用于文字与背景时，记得用对比度检查器确认可读性，别只凭肉眼觉得好看就上线。深色模式下的同一个色值，明度感受与浅色模式差别很大，发布前在两种模式下各看一眼。
典型使用场景
- 做一套 PPT 配色
拿到一张风景照做主视觉，想让它和模板协调。先提取主色板，挑一个深色做标题底，一个浅色做正文背景，再从点缀色里选强调色，整套幻灯片很快统一。
- 从竞品截图找品牌色
只有一张产品截图，没有设计规范。提取主色板后对照按钮与导航的颜色，能快速还原对方的品牌色与辅助色。做竞品分析时省去反复吸色，省下来的时间可以放在版式上。
- 给照片配主题色
个人博客想按封面图自动换主题色。把封面提取出的主色存成 CSS 变量，浅色模式取高明度色，深色模式取低明度色。换封面时主题跟着变，维护成本很低。
使用技巧
- 截图里的纯色区域最可靠，照片受光线与压缩影响，同一个物体可能出现多个相近色。
- 提取出的深色适合做背景，浅色适合做卡片，中间调留给强调元素，先按明度分层再挑。
- 品牌色要求严格时，以设计规范里的色值为准，提取结果只用来找灵感。
注意事项
- 把提取色当品牌色
照片经过压缩与调色，提取出的 HEX 与真实品牌色常有偏差。对外物料仍以设计规范为准，提取结果只作为参考。色差在小面积上不明显，放大到整屏就会露馅。
- 忽略对比度
从图片里挑的颜色放在一起好看，做成文字与背景却可能读不清。定稿前用对比度工具算一次，正文尽量保证 4.5:1 以上。浅灰配白尤其容易翻车，对比度不足的页面读三行就累。
- 没注意透明背景
PNG 的透明区域在取色时被跳过，提取结果只反映可见像素。若图片大部分透明，色板数量会明显偏少。需要完整色板时，先把透明背景合成为纯色再提取。