共有 26 个标准颜色角色，按照 6 大类进行组织：主色（primary）、次色（secondary）、第三色（tertiary）、错误色（error）、表面色（surface）、描边色（outline）。

1. 什么是颜色角色？

颜色角色就像“数字填色画”里的数字，它们是 UI 元素与颜色分配之间的“连接组织”，决定界面中每个元素应该使用什么颜色。

1. 颜色角色会映射到所有 Material 组件上。

无论你使用的是静态基础配色方案，还是动态配色方案，都需要使用这些颜色角色。如果你的产品中包含自定义组件，也必须正确映射到这一套颜色角色中。

2. 颜色角色确保可访问性。

整个配色系统建立在可访问的色彩配对之上，这些配对能保证至少 3:1 的对比度，满足可访问性要求。

3. 颜色角色被“令牌化”（tokenized）。

颜色角色在设计和代码中通过“设计令牌”（design tokens）实现。设计令牌是设计系统中一条可复用的、原子级的视觉决策。

展示所有 Material 颜色角色的示意图，其中包含可选的“表面扩展色（surface add-on roles）”以及“固定强调色（fixed accent roles）”。

2. 基础概念

以下是你在颜色角色（Color Roles）名称中经常会看到、并需要理解的关键术语：

• 表面色（Surface） —— 用于界面背景、大片区域以及低强调内容的颜色角色。
• 主色 / 次色 / 第三级强调色（Primary / Secondary / Tertiary） —— 用于强调前景元素的“强调色角色”，用于表达层级与重要性。
• 容器色（Container） —— 用作前景元素（如按钮）的填充色角色。不能用于文字或图标。
• 前景色（On） —— 前缀为 “On” 的角色代表叠加在对应“父色”之上的文字或图标颜色。例如：on primary = 用在 primary 容器色上的文字/图标颜色。
• 变体色（Variant） —— 后缀为 “variant” 表示该角色是其原版颜色的低强调版本。例如：outline variant = 相比 outline 更弱化的轮廓色。

颜色配对与叠加

为了确保视觉无障碍（可达性）与足够对比度，你必须按照规范中推荐的“配对”和“叠加顺序”使用颜色角色。如果你随意组合颜色，可能会破坏必要的对比度，导致无法阅读。尤其在动态取色（如用户调节对比度）生效时，会进一步放大问题。

3. 强调色角色

强调色角色包括 Primary（主强调色）、Secondary（次强调色）、Tertiary（第三强调色）。 在 UI 中应根据元素的重要性和所需的强调程度进行分配。 如果为了视觉效果随意更换强调色角色，要慎重，因为会影响层级与可访问性。

主强调色（Primary roles）用于最重要、最需要突出显示的操作或元素，例如用于“新建消息”的 FAB（悬浮操作按钮）。

次强调色（Secondary）用于不需要立即关注、也不需要强强调的元素，例如导航图标的“选中状态”，或一个“取消/忽略”类按钮。

第三强调色（Tertiary）用于体量较小但需要一定强调、但不要求立刻关注的元素，例如 badge（徽章）或提醒通知。

1. 主强调色（Primary roles）用于最重要的元素，例如“星标邮件”以及“新建邮件”的 FAB 按钮。2.第三强调色（Tertiary）用于较小但需要强调的元素，例如“需要跟进”的提示徽章（badge）。3. 次强调色（Secondary）用于优先级较低的元素，例如未激活星标图标的背景，或收件箱图标的选中状态背景。

4. 主强调色

在整个 UI 里，把 主色（Primary）相关的颜色角色用在最醒目、最重要的组件上，比如 FAB（悬浮操作按钮）、高强调按钮、以及各种激活态。

• 主色（Primary）：用于 Surface（表面/背景）之上的高强调填充色、文字色或图标色。
• 主色上的前景色（On primary）：用于放在 Primary 背景上的文字和图标颜色。
• 主色容器（Primary container）：在 Surface 背景上更“跳出来”的主色容器填充色，用于关键组件，比如 FAB。
• 主色容器上的前景色（On primary container）：用于放在 Primary container 背景上的文字和图标颜色。

Primary 这一组颜色角色包含 primary 和 primary container，并各自配套对应的 On 色（on primary / on primary container）。

① 主色上的前景色、② 主色（左图）                   ① 主色容器上的前景色、 ②主色容器 （右图）

5. 次级色

将 次级色（Secondary） 用于界面中强调程度较弱的组件，例如 筛选标签（Filter chips），次级色包含四种角色：

1. 次级色（Secondary）：用于表面（Surface）上的 次级填充、次级文字与次级图标。
2. 次级前景色（On secondary）用于显示在 次级色（Secondary）背景上 的文字和图标。
3. 次级容器色（Secondary container）用于表面（Surface）上的 弱强调容器背景色，常用于 色调按钮（Tonal buttons） 等低优先级组件。
4. 次级容器前景色（On secondary container）用于显示在 次级容器色（Secondary container）背景上 的文字和图标

次级色角色包含：次级色（Secondary）／次级前景色（On secondary）/次级容器色（Secondary container）／次级容器前景色（On secondary container）

① 图标按钮使用 次级容器色（Secondary container） 作为按钮背景，②图标使用 次级容器前景色（On secondary container）

6. 第三强调色

将第三强调色（Tertiary）用于在视觉上与主色（Primary）和次级色（Secondary）形成互补的强调色，或用于需要额外吸引注意力的区域，例如 输入框（Input field）。

1. 第三强调色（Tertiary）用于表面（Surface）上的 互补色填充、文字与图标。

2. 第三强调色前景色（On tertiary）用于显示在第三强调色（Tertiary）背景上 的文字与图标。

3. 第三强调色容器色（Tertiary container）用于表面上的 互补色容器背景，常见于如 输入框（Input field） 等需要额外视觉吸引力的组件。

4. 第三强调色容器前景色（On tertiary container）用于显示在 第三强调色容器色（Tertiary container）背景上 的文字与图标。

第三强调色包括：第三强调色（Tertiary）／第三强调色前景色（On tertiary）/第三强调色容器色（Tertiary container）／第三强调色容器前景色（On tertiary container）

第三强调色（Tertiary）角色可由设计师根据场景自由使用，其存在旨在为系统提供更丰富、更灵活的色彩表达能力。

①第三强调色前景色（On tertiary） ② 第三强调色容器色（Tertiary container）

7. 错误色

使用 错误色（Error） 来传达错误状态，例如：输入框中输入了错误的密码。

错误色体系包含四种角色：

1. 错误色（Error）：用于表面（Surface）上的 高注意力填充／图标／文字，强调紧急性或需要立即处理的状态。

2. 错误前景色（On error）：用于显示在 错误色（Error）背景上 的文字与图标。

3. 错误容器色（Error container）：一种更柔和但仍具有注意力的 容器背景色，用于承载错误提示内容。

4. 错误容器前景色（On error container）：用于显示在 错误容器色（Error container）背景上 的文字与图标。

错误色（Error）是一个 静态色（Static color） 的典型例子：即使在 动态色彩（Dynamic color） 模式下，它也 不会随系统配色源发生变化。在任何动态配色方案中，错误色体系仍保持静态。但它依然会自动适配 明亮模式（Light theme） 与 暗色模式（Dark theme） 的对比需求。

错误色体系包括：错误色（Error）／错误前景色（On error）/错误容器色（Error container）／错误容器前景色（On error container）

8. 表面色

使用 表面色（Surface）体系 来提供中性背景；对于卡片（Card）、底部面板（Sheet）、对话框（Dialog）等组件，则使用相关的 容器色（Container colors）。

三种表面基础角色：

• 表面色（Surface）作为背景区域的默认底色。
• 表面前景色（On surface）用于显示在 表面色（Surface） 或 各类表面容器色（Surface container） 之上的文字与图标。
• 表面前景变体色（On surface variant）用于较低强调度的文字与图标，显示在任意表面或容器背景上。

浅色主题中的表面色与表面前景色

五种表面容器角色，这些角色根据强调层次（Emphasis level）区分：

1. 表面容器·最低强调（Surface container lowest）最低视觉强调的容器背景色。

2. 表面容器·低强调（Surface container low）较低强调的容器背景色。

3. 表面容器（Surface container）默认容器背景色。

4. 表面容器·高强调（Surface container high）较强视觉强调的容器背景色。

5. 表面容器·最高强调（Surface container highest）强调度最高的容器背景色。

表面容器色是默认角色，但其他容器层级在大屏布局中尤其有助于构建层级关系与嵌套容器。

5种表面容器色在深浅两种主题中的表现

最常见的表面配色结构是：表面色（Surface）用作大面积背景区域，表面容器（Surface container）用于导航栏（Navigation Bar）等区域背景

文字与图标通常使用：表面前景色（On surface）和表面前景变体色（On surface variant）

① 表面色和 ② 表面容器

所有颜色映射 ，尤其是表面类颜色， 在不同窗口尺寸等级的布局区域中都应保持一致。例如，在手机和平板上，正文区域都使用 Surface（表面色），导航区域都使用 Surface container（表面容器色）

① 表面色和  ② 表面容器

根据所需的层级、功能区域和设计逻辑，在更大的窗口尺寸等级中，你可以使用附加的 Surface（表面色）系列颜色，只要这些颜色的应用保持一致即可。

在这个示例中，主体区域（body）和导航区域（navigation）在不同窗口尺寸等级中始终使用相同的颜色角色（分别为 Surface（表面色）与 Surface container（表面容器色）），并在更大的尺寸中额外加入其他 Surface container（表面容器色）层级。

默认情况下，诸如导航栏、菜单或对话框等中性色组件，会被映射到特定的 Surface container（表面容器色）角色；但设计者可以根据用户需求重新映射这些角色

默认应用在组件上的 Surface container 角色：① 表面容器色·低层级（Surface container low）② 表面容器色·默认层级（Surface container）③ 表面容器色·高层级（Surface container high）④ 表面容器色·最高层级（Surface container highest）

反向颜色（Inverse colors）

反向颜色角色（Inverse roles） 会被选择性地应用在特定组件上，用来实现与周围 UI 颜色相反的视觉效果，从而形成更强的对比。

• 反向表面色（Inverse surface）：用于在 表面色（surface） 上形成对比的背景填充色。
• 反向表面前景色（Inverse on surface）：用于显示在 反向表面色（inverse surface） 之上的文字与图标。
• 反向主色（Inverse primary）：用于位于 反向表面色（inverse surface） 上的可交互元素，例如文字按钮（text button）等。

反向表面色（Inverse surface）、反向表面前景色（Inverse on surface）与反向主色（Inverse primary）角色在配色体系中的呈现（浅色模式示例）

一个使用以下配色角色的 Snackbar：①反向表面色（Inverse surface）作为背景色、② 反向表面前景色（Inverse on surface）作为文本颜、③ 反向主色（Inverse primary）作为文字按钮的颜色

9. 描边色

用于 Surface（表面色）之上的两种描边相关颜色如下：

• 描边色（Outline）：用于重要的边界元素，例如文本输入框的外边框。
• 描边变体色（Outline variant）：用于装饰性元素，例如分隔线；也用于当界面中已有其他元素可以提供 4.5:1 对比度时。

10. 附加色彩角色

大多数产品都不需要使用这些附加色彩角色（Add-on roles）。但对于某些需要更高灵活性与色彩控制的产品来说，这些附加角色会非常有用。如果你不确定你的产品是否需要使用附加色彩角色，那通常意味着：你完全可以忽略它们。

1. 固定强调色（Fixed accent colors）

主强调色固定（Primary fixed）、次强调色固定（Secondary fixed）、第三强调色固定（Tertiary fixed）是用于“表面（Surface）”之上的填充色（fill colors）。这些颜色在浅色主题（Light）与深色主题（Dark）中保持相同明度（Tone），而普通的容器颜色（Container colors）在不同主题下会改变明度。当你需要色彩在明暗模式中完全一致时，就可以使用“固定（Fixed）”角色来替代对应的容器色角色。

主强调色固定·深（Primary fixed dim）、次强调色固定·深（Secondary fixed dim）、第三强调色固定·深（Tertiary fixed dim）相比于普通的固定色，这些“固定·深（Fixed dim）”具有更深、更突出的色调（Tone）。适用于以下场景：当你需要颜色更浓、更强调，但仍保持“固定色在明暗模式不变”的特性时。

固定强调色（Fixed）与固定强调色·深（Fixed dim）角色，适用于主强调色（Primary）、次强调色（Secondary）、第三强调色（Tertiary）三个色彩组， 并在浅色（Light）与深色（Dark）主题中统一展示。请注意：这些颜色在不同主题之间保持完全一致，不会随明暗模式而变化。

固定色与固定色·深（fixed / fixed dim）在实际界面中的应用示例：①主强调色·固定（Primary fixed）用于 FAB 的容器填充色、②主强调色·固定深（Primary fixed dim）用于图标按钮的容器填充色

2. 固定强调色上的文字色（On fixed accent colors）

固定强调前景色（On fixed colors）用于显示在对应固定色（Fixed color）背景上的文字与图标。例如，主色固定前景色（On primary fixed）用于主色固定色（Primary fixed）背景上的文字与图标。同样的规则也适用于次级固定色（Secondary fixed）与第三强调固定色（Tertiary fixed）。

固定强调前景变体色（On fixed variant colors）用于在对应固定色背景上显示低强调的文字与图标。例如，主色固定前景变体色（On primary fixed variant）用于主色固定色（Primary fixed）背景上的低强调文字与图标。同样的规则也适用于次级固定色（Secondary fixed）与第三强调固定色（Tertiary fixed）的变体色。

主色（Primary）、次级色（Secondary）与第三强调色（Tertiary）三组强调色中 —— 固定前景色（On fixed）与固定前景变体色（On fixed variant）在亮色与暗色主题下的展示

一个自定义横幅（banner），其中：①使用 主要固定前景变体色（On primary fixed variant） 来呈现弱化文本（deemphasized text）②使用 主要固定前景色（On primary fixed） 来呈现强调文本（emphasized text）

3.明亮与昏暗表面角色（Bright surface / Dim surface）

有两个附加的表面色角色（add-on surface roles）：

• 表面昏暗色（Surface dim）：在浅色 / 深色主题中都属于最昏暗的表面色
• 表面明亮色（Surface bright）：在浅色 / 深色主题中都属于最明亮的表面色

表面昏暗色（Surface dim）、表面色（Surface）、表面明亮色（Surface bright）在浅色主题中的表现

表面昏暗色（Surface dim）、表面色（Surface）、表面明亮色（Surface bright）在深色主题中的表现

默认表面色（Surface） 会在浅色与深色主题之间自动反转 —— 在浅色主题中呈现为较亮颜色，在深色主题中反转为较暗颜色；但 表面明亮色（Surface bright） 与 表面昏暗色（Surface dim） 的反转方式略有不同。更准确地说，它们会在浅色与深色主题中 保持彼此之间的相对明度关系不变。

例如：如果界面区域使用的是 默认表面色（Surface），那么这个区域在 浅色主题中是最亮的区域，而在 深色主题中则变为最暗的区域。如果界面区域使用的是 表面明亮色（Surface bright），那么这个区域在 浅色主题和深色主题中都会保持为最亮的区域。

① 使用 表面昏暗色（Surface dim） 作为背景的 导航栏（Navigation rail）、② 使用 表面明亮色（Surface bright） 作为背景的 聊天窗口（Chat window）