你在截图里看到一个颜色 —— Stripe 广告里那种完美饱和的青绿、SaaS 落地页里那种让人平静的鼠尾草绿 —— 想用在自己的项目里。你知道这个颜色 就在 图片里,但怎么才能把 #xxxxxx 这个值取出来?

答案是 配色提取:扫描图片里所有像素,返回主导色。设计师过去在 Photoshop 里手动做这事做了很多年,但现在有更快、免费、纯浏览器的替代方案,30 秒搞定,不用装任何东西。

本文对比 3 种免费方法,用推荐的那个演示 30 秒流程,并教你怎么看结果,直接把颜色复制进 CSS、Figma 文件或设计 token。

3 种免费方法速览

方法速度准确性隐私成本
Photoshop / GIMP 取色器慢(手动,一次一个颜色)像素级精确100% 本地免费(GIMP)/ $25/月(Photoshop)
在线提取网站快较好⚠️ 图片上传到服务器免费带广告,高清版付费
纯浏览器工具(不上传)30 秒设计用途足够好100% 本地,图片不出浏览器免费

第三种 —— 完全在浏览器里跑的提取工具 —— 是 2026 年的最优解。接近 Photoshop 的速度产出设计级调色板,你的图片从不出设备,不需要注册、没有弹窗广告、没有 5 兆像素限制。

为什么”主色调”比”平均色”靠谱

如果你拿一张 1000×1000 的照片求所有像素的平均值,你几乎总会得到一个又脏又糊的棕灰色,这颜色在原图里根本不存在。真实例子:

  • 一张 白桌子上放黄色柠檬 的照片:平均 RGB = (178, 165, 105) —— 一个去饱和的卡其色,照片里压根没这个色
  • 同一张照片的主色调:#F4D03F —— 你肉眼看到的那个真正的柠檬黄

报告”平均色”的算法技术上没错,但视觉上毫无意义。真正的配色提取是把 相似的像素归到一组(分桶),然后报告哪些桶里像素最多。一张有柠檬、叶子、白桌的照片会输出 3 个主色调,而不是 1 个脏兮兮的平均值。

方法一:Photoshop / GIMP 取色器(老派做法)

这是 2000 到大约 2018 年设计师的做法。流程:

  1. 在 Photoshop 或 GIMP 里打开图片。
  2. 切换到 取色器工具(Photoshop 里按 I)。
  3. 单击某个像素。
  4. 从颜色选择器读 HEX 值。
  5. 想取 5-6 个颜色就重复 5-6 次。

坑: 这只能取到你 点击的那个像素 的颜色,不是图片的主色调。想要有代表性的调色板,你得知道点哪些像素 —— 通常是每种颜色最大的那块平面区域。设计师靠眼力,但需要练习,而且结果因人而异。

什么时候还该用这方法: 需要对特定区域做像素级精确采样时,比如取 UI 模型里某个按钮的精确颜色,或者匹配带抗锯齿边缘的 logo。

方法二:在线配色提取网站

像 Coolors.co、ColorThief、Adobe Color 都有”图片取色”功能。大部分工作流程一样:

  1. 上传图片。
  2. 网站在服务器端做提取。
  3. 拿到带 HEX 值的调色板,以及”导出为 ASE / GPL / CSS”按钮。

优点: 成熟工具,经常包含设计师想要的导出格式(Adobe Swatch Exchange、Sketch 调色板、CSS 变量)。

缺点:

  • 隐私:你的图片上传到了第三方服务器。个人照片不舒服,未发布产品的截图或客户工作更可能违反 NDA。
  • 限制:大部分免费版限制在 1-5 兆像素,或要求注册才能用高清。
  • 广告和弹窗:免费版经常使劲推付费订阅。
  • 无法控制算法:给你 5 个色或 8 个色,不是”我要刚好 6 个色、用 32 步长分桶”。

个人项目可以用,涉及隐私的内容 —— 或者要做两次以上 —— 摩擦成本就会累积。

方法三:纯浏览器工具(2026 默认方案)

最快、最隐私、最可复用的工作流。所有处理都在 JavaScript 里通过 <canvas> 在客户端完成,所以:

  • 不上传图片
  • 不经过服务器
  • 除了浏览器能渲染的容量之外没有文件大小限制
  • 加载一次后离线也能用

用 Piick 的免费 颜色选择器与图片取色 30 秒流程:

  1. 打开 piick.cc/tools/color-palette-extractor 页面。
  2. 点 图片取色 tab。
  3. 把任意图片(JPG、PNG、WebP、GIF,最大 10MB)拖到上传区。
  4. 选想要的色卡数(5、6 或 8)。
  5. 点 提取配色。
  6. 每个色卡显示 HEX 值和在图片里占的比例。
  7. 点任一色卡可展开 —— 你会看到 HEX、RGB、HSL 和每种格式的复制按钮。

总耗时:截图 30 秒,主图 60 秒。

算法是怎么跑的(简版)

点”提取”时,工具做四件事:

  1. 降采样 你的图片到 200×200 缩略图(这就是为什么大文件也很快)。
  2. 分桶 每个像素:把每个颜色通道取整到 32 的倍数 —— 所以 (255, 200, 150) 和 (248, 192, 144) 落到同一个桶里。
  3. 计数 落在 512 个可能桶里的像素各有多少。
  4. 返回 按像素数排序的前 K 个桶,从最多到最少。

这叫 桶量化(color quantization)。不像 k-means 那么平滑,但它:

  • 快约 10 倍(不迭代,单遍扫描像素)
  • 确定性 —— 同一张图永远给出同一套调色板
  • 容易讲清楚 —— 直方图上能看到那些桶

对设计级调色板(品牌 5-8 色、照片、UI 截图),桶量化绰绰有余。k-means 是医学影像那种科学用途的。

怎么读结果:百分比是什么意思

工具说”色 1:#3B82F6,占比 42%“,不是说图片里 42% 是 恰好 #3B82F6。是说采样的像素里有 42% 落到了取整为 #3B82F6 的那个桶里。图片那块区域的实际颜色可能是 #3580F0 到 #4290FA —— 都被归到同一个色卡。

设计用途这就够用了。如果你要一个区域的精确中间值,得换别的工具。

提取之外:手动选色器

同一个工具,颜色选择器 tab。适用场景:

  • 你从一个颜色出发(品牌风格指南里的品牌色),想同时看到 HEX、RGB、HSL
  • 想生成 配色方案 —— 一个基础色的互补、相近、三角变化 —— 不用打开 Figma 或翻色彩理论书
  • 在格式之间互转:有人给你发了 rgb(59, 130, 246),你需要 #3B82F6 写进 CSS

5 个配色 swatch 会跟着你改基础色实时更新。点任一配色可加载到选择器里。

三个真实场景

场景一:抄对手的品牌色

一个 SaaS 落地页有个按钮色,你想借用到自己的重设计里。截一张那个页面的图,打开工具,把截图丢进去。提取 6 个 swatch。按钮色会是其中之一 —— 通常是饱和度最高的那个。点开展开,复制 HEX,贴进 CSS。

提示: 先把截图裁到只剩按钮,这样其他 UI 元素不会污染调色板。

场景二:从一张照片里建调色板给博客文章用

你拍了一张森林照片准备当博客头图,想用照片的颜色当文章的强调色。从照片里提取 5 个 swatch。你会得到 2-3 种绿、一种棕、可能还有一种天蓝。挑 3 个跟背景对比最好的当强调色。

提示: 占比帮你判断哪些颜色是”背景”(占比高)哪些是”强调”(占比低)。别把占比最高的颜色当强调 —— 它会跟你实际的背景打架。

场景三:验证设计师的交付

一个自由设计师给你发了一张主视觉图,带品牌调色板。把图丢进去,提取 6 个 swatch。对比输出的 HEX 值跟品牌风格指南。如果 #FF6B35 应该是主橙但提取出来是 #FF7039,你就得聊一下 —— 每通道差 2 bit,设计师会看出来的。

常见坑(以及怎么办)

  • 调色板里太多相似色。你的图被一种色调主导(日落、雾蒙蒙的早晨)。解:只提取 5 个 swatch,或者从占比最低的几个里选强调色做对比。
  • 调色板里有脏棕色。图片压缩噪声很多。解:用更高质量的源文件(PNG 代替 JPG,或者更高分辨率的 JPG)。桶量化分不出信号和压缩伪影。
  • 主色是白或黑。图片有大片背景(截图、白底 logo)。解:取色前裁紧一点,或者用手动选择器定好背景,再去采前景。
  • 想要 8 个以上。桶量化超过 8-10 个有用 swatch 后相邻桶就开始互相打架。要 20+ 色,得用真正的设计工具(Figma、Adobe Color)。

什么时候完全不用提取

有时候答案不是”从图片提取” —— 而是”从现成调色板里挑”:

  • 品牌色 已经在风格指南里 —— 直接复制 HEX
  • Material Design / Tailwind / Bootstrap —— 成熟的调色板覆盖大多数场景
  • 无障碍驱动的调色板 —— 当 WCAG 对比度是约束时,你需要基于对比度比的工具,不是提取

桶量化解决的是”我看到一个颜色,我要它的代码”。其他需求,用别的工具。

立即试试

打开 颜色选择器与图片取色,丢进任意图片,30 秒拿到 6 色调色板带 HEX 代码。不上传、不注册、除了浏览器内存没限制。

拿到调色板后,贴进 CSS 变量块。比如一张 Stripe 风格截图的 6 色提取可能长这样:

  • --color-1: #3b82f6; —— 主品牌蓝
  • --color-2: #1e40af; —— hover/激活态
  • --color-3: #93c5fd; —— 浅色强调
  • --color-4: #fbbf24; —— 警告/高亮
  • --color-5: #f59e0b; —— 次要强调
  • --color-6: #111827; —— 文本/深底

然后在样式表里用 var(--color-1) 引用,而不是裸 HEX。发布吧。