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

1. 什么是颜色角色？

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

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

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

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

2. 基础概念

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

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

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

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

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

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

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

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

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

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