图像色彩提取：构建实用且和谐的配色方案

上次更新时间：June 28, 2026

从照片中提取色板是最快构建一套感觉和谐的颜色集的方法。照片已经完成了选择和谐色调的艰巨工作；而提取只是测量它们。本指南将介绍提取实际如何运作、哪些方法可以生成可用于设计系统（design system）的色板，以及保持这些颜色可访问性的对比规则。

快速答案：如何从图片中提取颜色？

在颜色选择器工具中打开图片，采样 5 到 7 个最频繁的颜色，并根据每个颜色覆盖的面积进行加权。丢弃接近的重复项，保留一个主导色、一到两个辅助色和一个强调色。然后应用 60-30-10 rule：60% 主导色，30% 辅助色，10% 强调色。在发布之前，务必使用 WCAG contrast checker 检查每一个文字和背景的组合——一个看起来很美但对比度不合格的色板对于实际文本来说是无法使用的。

为什么需要从照片中提取颜色？

一张好的照片本身就包含了一个和谐的色板，因为摄影师或场景就是这样构图的。当你提取这些颜色时，你继承的是这种和谐感，而不是凭空选择 hex codes。这就是品牌设计师经常从英雄图片（hero image）、创始人最喜欢的风景照或产品照片开始的原因。

另一种方法——从调色盘选择颜色——虽然可行，但往往会产生技术上正确但情感上平淡的色板。从真实图像中提取的颜色带有上下文，使其感觉是经过深思熟虑的。

颜色提取如何工作？

提取过程将数以千计的独立像素减少到少数几个代表性颜色。目前占主导地位的方法有三种，每种都有其权衡之处。

• Frequency counting 速度快，但会过度权重像天空这样的大背景。
• Median cut 平衡了速度和质量，是大多数编辑使用的方法。
• K-means 生成的结果最“设计感”，但速度更慢。

一个实用的细节：提取之前始终将图片缩小到大约 100×100 pixels。一张全分辨率的照片有数百万个像素，额外的细节不会改变主要的颜色，只会减慢计数速度。Mozilla canvas pixel manipulation reference 记录了作为浏览器提取器基础的读取像素步骤。

应该保留哪些颜色？

提取通常会返回比你实际能使用的更多的颜色。一张照片可能产生十二个候选色，但一个可用的色板只有五个到七个。过滤步骤是大多数色板出错的地方。

• 保留一个主导色——覆盖面积最大的颜色，通常是中性色或天空色。
• 保留一两个辅助色来支持主导色。
• 严格保留一个强调色用于行动呼吁（calls to action）和高亮显示。
• 丢弃接近的重复项；相差三个色阶的两种绿色看起来就像一种泥泞的颜色。
• 除非设计需要它们作为中性色，否则丢弃纯黑和纯白。

应用色板的 60-30-10 rule

一旦你有了颜色，60-30-10 rule 就会告诉你每个颜色应该使用多少比例。这是一个来自室内设计的指南，可以干净地应用于界面设计。

一个实际示例：从一片森林的照片中提取颜色，你可能会得到一种主导绿色、一种较浅的辅助绿色和一种棕色强调色。绿色作为页面背景使用 60%，较浅的绿色填充卡片使用 30%，而棕色则驱动行动呼吁按钮使用 10%。最终的结果感觉就像一片森林，但它并不是一个字面意义上的森林。

如何检查颜色是否可访问？

一个对比度不合格的色板就不是一个完成的色板。文字需要与背景有最低的对比度才能清晰阅读，而标准是 WCAG 2.1。

• 普通文本至少需要 4.5:1 的对比度。
• 大号文本（18pt 或 14pt bold）需要 3:1。
• 如果可以，目标是让正文达到 7:1；这对低视力阅读者有帮助。

测试你实际计划使用的每一个组合——强调色在主导色上、文字在辅助色上，以此类推。WebAIM contrast checker 是标准的免费工具，而 W3C WCAG 2.1 contrast guidance 定义了数学原理。如果一个强调色在你的背景上对比度不合格，你需要加深强调色或提亮背景，直到它通过测试为止。

将色板转化为设计系统

一套 hex codes 只有在分配了角色并构建了变体（variants）之后，才是一个系统。这是将情绪板（mood board）与开发者可以使用的东西区分开来的步骤。

1. 按角色命名每种颜色（primary, secondary, accent, surface, text），而不是按色调。
2. 为每种颜色生成一个 light 和 dark 变体，以便支持这两种模式。
3. 通过轻微改变饱和度或亮度来定义 hover 和 active 状态。
4. 将色板锁定到工具的变量中，以保持一致性。

一旦色板到位，其余的构建过程就会更快。按钮、标题和卡片都从相同的命名 token 中获取颜色。对于将位于此系统中的图片，请通过 image compressor 和 image resizer 进行处理，以匹配系统的性能预算。image optimization guide 介绍了保持色彩丰富的设计快速的格式和尺寸决策。

何时提取会给出错误的色板？

提取测量的是照片中包含的内容，而不是你的品牌需要什么。一些常见的失败模式包括：

• 天空明亮占据了大部分计数，导致你得到五个蓝色。
• 一个小但重要的强调色因为覆盖面积太小而被忽略。
• 压缩伪影引入了看起来像真实色块的噪声颜色。
• 一张光线混合的照片会产生泥泞的中调。

当提取的色板感觉不对劲时，不要根据原始频率来加权提取结果，而是根据感知影响——亮度、饱和度和边缘对比度——进行加权。或者选择不同的源图片。源照片是决定最终色板是否可用的最大因素，所以要选择一个已经拥有你想要情绪的照片。对于需要受控双色调色板而不是采样色板的风格化品牌工作，duotone effect guide 详细介绍了如何有意识地将图片映射到两种颜色。如果提取的颜色也将驱动徽标或图标集，那么 SVG to PNG converter 可以确保矢量标记在色板触及的任何尺寸下都保持清晰。

常见问题解答

如何从图片中提取颜色？

工具通过相似性对图片的像素进行聚类，并返回最频繁的颜色作为色板——通常是五个或六个。每种颜色都会附带其 hex 或 RGB 值。结果是一个基于照片而非猜测的数据驱动型色板。

我应该保留哪些提取的颜色？

主导色（最频繁），一两个强调色和一个中性色。丢弃那些彼此过于接近或只出现在极小区域的颜色。五个颜色通常就足够了；更多的碎片化了色板。使用 60-30-10 rule 来应用它们。

什么是 60-30-10 rule？

这是一个比例指南：设计中 60% 使用主导色，30% 使用辅助色，10% 使用强调色。它能保持色板的平衡而不是泥泞不堪。提取的颜色直接喂入这些角色中。

如何检查颜色是否可访问？

测试文字和背景颜色之间的对比度比例是否符合 WCAG 阈值（普通文本为 4.5:1）。即使看起来很美，如果浅色的强调色放在浅色背景上，色板仍然可能不具备可访问性。调整的是色调的深浅，而不是色相，来修复对比度问题。

色板应该有多少种颜色？

通常是五个：一个主导色、一两个辅助色、一个强调色和一个中性色。更多的碎片化了色板，使其难以保持一致的应用。五个颜色可以干净地映射到 60-30-10 proportion rule 上。

如何将提取的色板应用于设计？

使用 60-30-10 rule：主导色覆盖 60% 的设计（通常是背景），辅助色占 30%（表面、次要元素），强调色占 10%（行动呼吁、高亮）。这种比例能保持色板的平衡而不是泥泞不堪。丢弃任何不符合这三个角色的提取颜色，即使它们出现在源照片中也是如此。