怎么从图片中提取颜色？3 种方法把照片变成配色方案

一、为什么要从图片提取颜色

一张照片已经替你解决了一件难事：颜色的比例和层次是现成的。光照让同一个色相自然分出深浅，画面里各色的面积也把主次排好了。凭空想的配色往往缺这一层关系，凑出来的几个色彼此平起平坐，看着就散。

• 和素材同源：配色取自宣传图本身，官网、海报、社媒图不会各说一套。
• 自带深浅梯度：照片里的阴影和高光天然提供了同色相的不同明度，省去自己编一套色阶。
• 少走弯路：方向一开始就锁定在真实素材上，改稿时的争论也少。

二、方法一：在线图片取色工具

把图片传上去，工具按像素做聚类，一次列出若干主色，每个都附带 HEX 和 RGB。整个过程不到十秒，适合先摸清"这张图大概是什么调子"。

• 适合：拿一组候选色、快速定方向，尤其是不确定该往冷调还是暖调走的时候。
• 注意：不同工具的聚类算法不一样，同一张图可能给出略有差异的几组结果，把主色值差个几度是正常的。

三、方法二：系统取色器吸取

需要精确命中某一处时，聚类结果就不够用了——比如 logo 上那个准确的红，或者产品包装上某个特定的绿。这时该用吸取的方式。

• macOS：系统自带的「数码测色计」能读取屏幕上任意一点的数值。
• Windows：PowerToys 里带一个颜色选择器，快捷键调出后取色。
• 不想装东西：用网页版屏幕取色器，直接在浏览器里吸。

代价是每次只能取一个点，哪些色算主色得你自己数。所以常见的搭配是先批量提取定方向，再用吸取的方式校准一两个关键色。

四、方法三：调色板生成器展开

前两种方法拿到的是"颜色"，还不是"配色"。几个孤立的色值放进页面，很快会碰到具体缺口：卡片背景用什么、分割线用什么、提示文字用什么——这些颜色照片里未必出现得明显。

把提出来的主色丢进调色板生成器，它会按配色关系补全其余位置：辅助色、强调色，以及配套的中性色阶。这一步把"从照片里抄到的几个色"变成"能直接用的一套方案"。

五、从主色到配色方案的提炼步骤

提取结果常常有十几个色，全用会显乱。按下面的顺序筛，一般留下三到五个就够：

1. 先取面积最大的环境色当基底。通常是墙面、天空或背景这类中性色，它决定页面的整体基调。
2. 再取视觉焦点色当主色。招牌、主体物、品牌标识所在的位置，这是配色里占比第二的角色。
3. 补一个高饱和的强调色。画面里最跳的那一小块，留给它面积最小但最要紧的位置：行动按钮、促销标签。
4. 按 60-30-10 分配面积。基底约六成、主色约三成、强调色约一成，主次就不会打架。
5. 最后检查文字对比度。不够就调明度，别急着换色相——换色相等于推翻前四步。

六、实例：把品牌照片变成 UI 配色

假设一张咖啡馆照片，提取后我们挑出这四个色（以下为示例数值）：

落到界面上的分配大致是这样：

• 页面背景：基底色铺满，约占六成面积。
• 标题、主按钮：用主色，与主色在照片里的分量对应。
• 卡片、分割线、次要标签：用辅助色，承担过渡，避免只有深浅两档。
• 促销标签、行动点：用强调色，面积最小，只出现在需要被看见的地方。

这样配出来的界面和那张照片是同源的，宣传物料与产品界面能对上。最后再过一遍对比度——如果强调色被用在文字上，明度往往还要再压一档才够读。