PPT配色撞色
周一上午十点要提案，昨晚发现客户logo的绿色和PPT模板里的蓝色撞得一塌糊涂，屏幕上看脏兮兮的。把logo截图丢进工具，提取出主色和辅色，再把辅色饱和度调低20%，得到一组同色系渐变，贴进图表和标题栏，整份PPT从刺眼变成沉稳。前后花了不到三分钟，比手动吸色试色快得多。
拖入 / 点击 / 粘贴图片
自动提取主色调色板 · 点图可精确取色 · 本地处理不上传
上传图片后，
自动提取主色与配色方案
自动提取主色与配色方案
主色数
6 色
导 出Copy & Export
就绪 · 上传图片提取主色调色板，全程本地处理不上传
第一节
关于本工具
About设计师对着截图反复吸色，结果主色被白色背景稀释，渐变过渡也看不出方向。把图片拖进来，它直接输出 N 个主色的十六进制值，并自动生成线性渐变声明——背景色干扰、光照偏色都不影响。提取在浏览器本地完成，图片不上传服务器，适合处理品牌 Logo 或版权素材。
使用场景
装修刷墙选色
老婆看中一张北欧风客厅照片，但照片里的墙漆品牌已停产。把照片上传，工具提取出墙面主色（#D4C5A9）和地板木色（#8B7355），拿着这两个色号去立邦色卡上比对，找到最接近的色号。避免了靠肉眼比色卡反复跑建材城的折腾，刷出来的效果和原图几乎一致。
品牌VI延展物料
公司新Logo定了，但设计手册只给了标准色#005A9E，没有给出做海报、做折页时的辅助渐变色。把Logo源文件截图丢进工具，提取出主色和次色，生成了一个从标准蓝到浅灰蓝的线性渐变。用这个渐变做底图，加上白色文字，印出来的折页视觉统一，不用再找设计师临时调色。
淘宝主图调色
卖的是莫兰迪色系针织衫，但拍照那天阴天，衣服拍出来偏灰偏暗，和详情页里模特图色差很大。把模特图丢进工具，提取出衣服的主色（#B8A99B），再用这个色号去调自己拍的图的白平衡和色相，让两张图的衣服颜色肉眼看起来一致，减少了退货纠纷。
UI界面取色
在Dribbble上看到一套很喜欢的卡片设计，但原作者没给色值。截图后丢进工具，提取出背景色、标题色、按钮色三个主色，再手动微调对比度确保WCAG AA标准。直接拿这些色值去Figma里搭组件，不用靠眼睛硬猜色号，还原度很高。
第二节
使用指南
Getting Started使用步骤
- 1上传一张图片（支持 JPG、PNG、WEBP），工具自动提取主色并显示色块与十六进制色值
- 2拖动「颜色数量」滑块（2-10），色块列表实时增减，每个色块对应图片中占比最高的颜色
- 3点击「生成渐变」按钮，工具基于主色顺序生成线性渐变预览，色值序列同步展示在下方
- 4点击任一色块旁的复制图标，该色值自动存入剪贴板；点击渐变预览图，整段渐变 CSS 代码被复制
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 一张包含蓝天、绿草、红花的风景照片（JPEG，800×600） | 主色：蓝色 #2E6B9E（32%）、绿色 #4A7C3F（28%）、红色 #C23B22（15%）、白色 #F5F5F5（12%）、灰色 #9E9E9E（13%） | 常规：多色自然照片，验证工具能否正确提取视觉主色并给出占比，覆盖常见使用场景 |
| 一张纯色填充的图片（#FF0000 红色，PNG，100×100） | 主色：红色 #FF0000（100%） | 边界：纯色图片，验证工具在颜色单一情况下的输出，确保不返回多余颜色或错误占比 |
| 一张黑白渐变图片（从 #000000 到 #FFFFFF，宽度 500px） | 渐变：从 #000000 到 #FFFFFF，中间色 #808080，步长 256 级 | 常规：渐变图片，验证工具能否正确识别并输出渐变方向、中间色和色阶数 |
| 一张透明背景的 PNG 图标（主体为蓝色 #0000FF，背景透明） | 主色：蓝色 #0000FF（100%） | 边界：透明背景图片，验证工具是否忽略透明像素，只提取非透明区域的主色 |
| 一张分辨率极低的图片（16×16 像素，包含红黄蓝三色块） | 主色：红色 #FF0000（33%）、黄色 #FFFF00（33%）、蓝色 #0000FF（34%） | 边界：极小尺寸图片，验证工具在低分辨率下能否准确提取颜色，不因采样不足而丢失颜色 |
| 一张经过强压缩的 JPEG 图片（质量 10%，原本为纯色 #00FF00） | 主色：绿色 #01FE02（85%）、浅绿 #B2FFB2（10%）、深绿 #007F00（5%） | 易错：有损压缩导致颜色偏移，验证工具对 JPEG 伪影的敏感度，用户可能误以为工具不准 |
| 一张包含渐变和纯色混合的图片（上半部纯蓝 #0000FF，下半部红到黄渐变） | 主色：蓝色 #0000FF（50%）、红色 #FF0000（25%）、黄色 #FFFF00（25%） | 易错：混合内容图片，验证工具能否区分纯色区域与渐变区域，并正确汇总主色占比 |
| 一张带有水印的图片（水印为半透明白色文字，覆盖在深色背景上） | 主色：深灰 #333333（60%）、白色 #FFFFFF（40%） | 易错：半透明水印可能被误识别为主色，验证工具是否对半透明区域做合理处理，用户需注意水印影响 |
常见错误对照
1.上传透明背景 PNG，提取到白色或黑色主色
✗ 错误
上传一张透明背景的图标（如白色箭头 PNG），提取出主色为白色（#FFFFFF）✓ 修复
上传前将透明背景替换为纯色（如灰色 #808080），或使用带实色背景的图片透明像素的 RGBA 值为 (0,0,0,0)，部分算法将其视为黑色或白色参与统计，导致主色偏移。应确保图片无透明区域。
2.图片尺寸过大，提取结果全是中间色
✗ 错误
上传一张 4000×3000 像素的照片，提取 5 个主色，结果全是灰棕色✓ 修复
将图片缩小到 800×600 以内再上传，或使用工具自带的缩放选项像素级聚类算法（如 K-Means）的计算量与像素数成正比，超大图片会导致聚类中心收敛到全局均值附近，丢失局部鲜艳色彩。
3.期望提取渐变色，但只得到两个纯色块
✗ 错误
上传一张蓝→紫渐变图，设置提取 2 个主色，结果得到 #0000FF 和 #800080✓ 修复
增加主色数量到 5-8 个，或使用工具提供的「渐变模式」选项主色提取默认做离散聚类，2 个聚类中心只能代表渐变两端。要还原渐变过渡，需要更多聚类中心或专门的渐变采样算法。
4.使用 JPEG 图片，主色包含大量灰色
✗ 错误
上传一张 JPEG 格式的红色图片，提取结果中出现 #F0F0F0（浅灰）✓ 修复
使用 PNG 或 WebP 无损格式，或在提取前用工具内置的「去压缩噪点」功能JPEG 的有损压缩会在色块边缘产生 DCT 块效应，引入大量中间灰色像素。这些像素数量多、分布广，容易被聚类算法误判为主色。
5.提取结果中颜色数量少于预期
✗ 错误
设置提取 10 个主色，但结果只返回 3 个颜色✓ 修复
检查图片是否色彩单一（如纯色背景 + 小面积物体），或降低「最小颜色面积」阈值多数提取算法会过滤掉像素占比低于阈值的颜色（如 <1%），避免噪声色。图片色彩单一或物体面积过小时，有效聚类中心会少于设定数。
6.把提取的色值直接用于网页设计，显示效果有偏差
✗ 错误
从图片提取 #FF6600 后直接写入 CSS，在另一台显示器上看起来偏黄✓ 修复
提取时确认色彩空间为 sRGB，并在目标设备上做色域映射或校准图片可能内嵌 Adobe RGB 或 Display P3 色域，提取的色值在 sRGB 显示器上会因色域截断产生色偏。工具默认输出 sRGB，但输入图片需提前转换。
7.多次提取同一图片，结果不一致
✗ 错误
同一张照片上传两次，第一次主色是 #123456，第二次变成 #654321✓ 修复
使用固定随机种子（seed）或选择「确定性模式」选项K-Means 等聚类算法依赖随机初始化，不同运行会得到不同局部最优解。固定 seed 可保证结果可复现。
第三节
工作原理
How It Works核心公式
C_k = \frac{1}{|S_k|} \sum_{(i,j) \in S_k} p_{ij}
变量说明
C_k第 k 个主色的 RGB 向量S_k第 k 个颜色簇的像素集合|S_k|该簇包含的像素总数p_{ij}位置 (i,j) 处像素的 RGB 值
示例
一张 100×100 像素图片经 K-Means (K=3) 聚类后，第 1 簇含 3200 个像素，各像素 RGB 累加和为 (R: 780000, G: 510000, B: 320000)，则 C₁ = (780000/3200, 510000/3200, 320000/3200) = (243.75, 159.38, 100.00)，取整后主色为 rgb(244,159,100)。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问上传了一张风景照片，为什么提取出来的主色全是灰色和蓝色，看不出照片里花的颜色？＋
答
工具提取的是整张图片的**全局主色**，由像素频率决定。如果花的面积占比很小（比如一朵红花只占画面的 5%），而天空和山体占了 95%，那么前几个主色必然被蓝灰色主导。解决办法：先用裁剪工具把花的部分裁出来单独上传，或者在本工具的结果区勾选“忽略背景色”选项（如果有），让算法只计算前景色块。
问我想提取 10 个颜色，但结果里好几个看起来差不多，都是深浅不同的灰色，怎么让它区分开？＋
答
这是颜色聚类算法的合并阈值问题。当图片颜色丰富时，相近色（如 #E5E5E5 和 #E0E0E0）会被归到不同簇但肉眼难以区分。解决方法：1）减少提取数量，比如从 10 改为 5，算法会拉大簇间差异；2）如果工具提供“色差阈值”参数，调高一点（默认 10→15），让相近色强制合并；3）尝试“鲜艳优先”模式（如果有），算法会忽略中性色而保留高饱和度色。
问为什么我传的 PNG 透明背景图，提取出来的主色是白色？背景明明是透明的。＋
答
透明像素在浏览器中被渲染为白色或棋盘格，工具读取的是渲染后的 RGBA 数据，透明通道（A=0）会被当作白色（R=255,G=255,B=255）参与统计。所以透明背景会作为白色计入主色。解决方法：上传前先用图片编辑软件把透明背景填充为纯色（比如黑色或你想排除的颜色），或者确认工具是否有“忽略透明像素”选项；本工具目前默认不忽略，建议填充后再上传。
问提取出来的颜色和我在 Photoshop 里用吸管点出来的颜色不一样，哪个准？＋
答
两者目的不同。PS 吸管取的是**单像素**颜色，而本工具提取的是**统计主色**——对全图所有像素聚类后取中心色。举例：一片树叶有深绿、浅绿、黄绿杂色，PS 吸管点到的可能是其中某个具体像素值，工具给出的是这堆绿色的平均色。如果要验证：用本工具的结果色值在 PS 里填充一个矩形，再放到原图旁边对比，视觉上应该是“整体最像”，而不是“某点最像”。
问上传了一张 10MB 的大图，等了很久没反应，是不是卡死了？＋
答
本工具在浏览器端（FE）运行，大图解码和聚类计算会占用主线程。10MB 以上的图片建议先压缩到 1920px 边长以内再上传，因为算法对分辨率不敏感——缩小到 800px 宽的主色结果和原图几乎一致，但计算时间从几十秒降到 1 秒。如果已经卡住：刷新页面重试，上传前用图片软件把尺寸缩到 1200px 以内，或者格式转为 JPEG（质量 80%），文件体积可降至 1-2MB。
问我拿一张纯白图片（#FFFFFF）去提取，结果居然告诉我主色是灰色 #F2F2F2，这工具是不是坏了？＋
答
不是坏了，是 JPEG 压缩或浏览器解码带来的**色偏**。纯白 #FFFFFF 在 JPEG 压缩后，很多像素会变成 #FEFEFE、#FDFDFD 等极浅灰；聚类算法取平均值后得到 #F2F2F2 是正常的统计结果。验证方法：用 PNG 格式（无损）保存同样纯白图再上传，结果会接近 #FFFFFF。如果工具提供“颜色精度”选项，调为“高精度”模式可减少此误差。
问提取出来的渐变颜色，怎么在 CSS 里直接用？复制出来的代码好像不对。＋
答
本工具输出的渐变颜色列表是按**视觉过渡顺序**排列的，但 CSS 渐变需要指定方向（如 to right）和色标位置（百分比）。当前复制的是纯色值列表，不是完整的 CSS 代码。正确用法：1）复制色值后，在 CSS 里手动写成 `linear-gradient(90deg, #A, #B, #C)`；2）如果工具提供了“CSS 代码复制”按钮，确保浏览器版本支持 CSS Color Level 4（现代浏览器都支持）；3）色标位置默认均匀分布，如需自定义请手动添加百分比。
问手机拍的照片，为什么提取出来的颜色和电脑上看到的差别很大？＋
答
两个原因：1）手机屏幕通常过饱和（OLED 广色域），而电脑显示器可能是 sRGB 标准色域，同一个色值在不同设备上视觉不同；2）手机相机会自动优化色彩（如华为的“鲜艳模式”），导致原图颜色已经失真。解决：在电脑上打开原图，用截图工具截取后再上传到本工具（避免手机端浏览器解码差异）；或者确认工具是否标注了色域（如 sRGB/Display P3），本工具输出为 sRGB 色值，与大多数网页显示一致。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。