Material Design 3 颜色角色总结

本文总结自m3.material.io

Material Design 3（MD3）引入了26+种颜色角色（color roles），这些角色像“画数字画布中的数字”一样，定义了UI元素之间的颜色连接，确保强调、容器类型和元素关系的一致性，同时保证足够的对比度。颜色角色分为品牌/强调（用于突出动作）、中性/表面（用于背景和容器）、状态/反馈（用于错误等）以及线条/覆盖层等类别。以下是主要角色的列表、含义、使用场景和常见组件映射。

品牌与强调角色（Brand & Accent Colors）

这些角色用于品牌表达和用户交互的高亮。

• primary / onPrimary
  含义：主要品牌或动作颜色及其内容颜色。
  使用场景：最重要的积极动作、选中高亮、活动状态。
  常见组件：高强调填充、文本、图标和按钮

• primaryContainer / onPrimaryContainer
  含义：主要颜色的柔和版本及其内容颜色，用于较大表面。
  使用场景：色调卡片或部分，品牌导向但不需过于突出。
  适用于：Floating action button悬浮动作按钮（FAB）。

• secondary / onSecondary
  含义：辅助强调颜色及其内容颜色。
  使用场景：不太突出的动作、过滤器、次要高亮。
  常见组件：次要图标、辅助动作、次要FAB。

• secondaryContainer / onSecondaryContainer
  含义：次要颜色的柔和表面及其内容颜色。
  使用场景：需要视觉分组但不使用全强度品牌的地方，表面上不太突出的填充、文本和图标 常见组件：默认填充色调按钮、过滤/建议。

• tertiary / onTertiary
  含义：额外的强调颜色（常用于内容类别或可视化）及其内容颜色。
  使用场景：标签、图表、头像、装饰性高亮。
  常见组件：类别药丸、图表系列颜色。

• tertiaryContainer / onTertiaryContainer
  含义：第三级颜色的柔和表面及其内容颜色。
  使用场景：与surface互补的填充、文本和图标,可以由设计师自行决定应用。它们旨在支持更广泛的颜色表达。

• inversePrimary
  含义：设计为在反向表面上可读的“翻转”主要颜色。
  使用场景：反向表面区域上的动作（如深色UI中的底部栏）。

表面角色（Surface Colors）

这些角色用于创建层次感和容器背景，支持光暗主题。surface可以理解为整个应该的背景颜色 surfaceContainer颜色可以理解为导航栏颜色（包括底部 左右导航栏）

• surface / onSurface
  含义：通用容器表面及其主要内容颜色。
  使用场景：卡片、片、应用栏、菜单——大多数组件容器。
  常见组件：卡片容器、应用栏容器、菜单容器。

• surfaceVariant / onSurfaceVariant
  含义：更安静、对比度较低的表面及其内容颜色。
  使用场景：列表行、卡片、数据表、占位符。
  常见组件：着色列表背景、建议。

• surfaceContainerLowest / surfaceContainerLow / surfaceContainer / surfaceContainerHigh / surfaceContainerHighest
  含义：用于分层UI的一致容器色调梯度（从最低到最高亮度）这里的Lowest Low 指的是强调层度。
  使用场景：传达深度/层次而不使用随机阴影；替代旧的surfaceVariant。
  常见组件：页面背景（Lowest）、列表卡片（Low/标准）、模态片（High）、对话框/抽屉（Highest）。

• surfaceDim / surfaceBright
  含义：主题级偏好，较暗或较亮的画布（基于色调）。
  使用场景：选择一个作为脚手架背景以设置屏幕氛围；替代旧的不透明度模型。
  常见组件：内容优先/深色氛围（Dim）、明亮/通风（Bright）。

• inverseSurface / inverseOnSurface
  含义：对比度翻转的表面对及其内容颜色。
  使用场景：需要与页面强对比的底部栏/顶部栏。
  常见组件：深色底部栏在浅色屏幕上（或反之）。

状态与反馈角色（State & Feedback Colors）

用于错误、警告等状态反馈。

• error / onError
  含义：关键/破坏性动作或状态的颜色及其内容颜色。
  使用场景：破坏性填充按钮、错误图标/徽章。
  常见组件：“删除”调用动作、严重错误状态。

• errorContainer / onErrorContainer
  含义：用于较大区域的柔和错误表面及其内容颜色。
  使用场景：错误横幅、错误卡片、文本字段的错误背景。
  常见组件：错误状态容器。

线条与覆盖层角色（Lines & Overlays）

用于边界和遮罩。

• outline
  含义：标准、可见的边框颜色。
  使用场景：描边按钮、输入边框、强烈的分隔线。

• outlineVariant
  含义：较软的边框/分隔线颜色。
  使用场景：微妙的分割线、密集的数据表、低强调的分隔线。

• scrim
  含义：模态/抽屉后面的暗化背景颜色。
  使用场景：背景遮罩；很少需要覆盖。

关键指南

• 生成方式：从源颜色通过算法生成色调调色板，确保光暗主题一致。
• 自定义：可调整角色以匹配品牌，但需保持对比度（至少4.5:1）。无内置成功/警告角色，建议自定义映射到secondary/tertiary。
• 应用：在Compose/Flutter等框架中，通过ColorScheme直接使用，支持动态颜色提取。