创建可访问、个性化的配色方案,用颜色表达产品的层级、状态与品牌属性。
一. 概述
Material 色彩系统包含:
- 内置的可访问性色彩关系
- 超过 26 种映射到组件的颜色角色(color roles)
- 内置深色主题配色
- 静态的基准色彩方案,为每个颜色角色提供默认色值
- 动态色彩功能,包括用户生成色与基于内容的色彩
如果你的产品正从 M2 迁移到 M3,建议先将 基准色彩方案(baseline color scheme) 映射到现有产品中,之后便可随时切换为动态取色。
了解 Material 3 动态色彩系统的价值、作用,以及它与以往色彩系统的差异。

支持动态色彩的产品可以自动生成并分配 UI 所需的颜色。这将带来:
- 个性化 UI(Personalized UI)
- 可访问的对比度(Accessible contrast)
- 用户可控对比度(User-controlled contrast)
- 自动深色模式(Automatic dark theme)
UI 颜色会根据输入动态变化。
1. 最新更新
2024 年 8 月
文字与图标的颜色更鲜明
以下颜色角色在浅色主题中进行了更新,更加鲜明但仍保持可访问的对比度:
- On primary container
- On secondary container
- On tertiary container
- On error container
受影响的组件包括:
- Badges
- Bottom app bar
- Buttons / Extended FAB / FAB
- Icon buttons
- Segmented buttons
- Chips
- Lists
- Menus
- Navigation bar / drawer / rail
- Switches

文字与图标的颜色现在更加鲜明、饱满。
2023 年 10 月
指南框架已重新组织
使用同一套色彩系统,但以新的方式进行说明。更新的章节包括:
- 系统如何工作
- 高级自定义
- 色彩资源(Color resources)

指南内容已重新组织与更新
2023 年 2 月
基于色阶(tone-based)的表面颜色
基于色阶的表面色替代了以往基于海拔层级(+1 ~ +5 elevation)的方式。新的颜色角色不再与海拔关联,在色彩灵活性与用户可控对比度方面具有更高的适配性。

新的基于色阶(tone-based)的表面颜色提供了更高的灵活性和更强的支持能力
为了与 Android 系统界面一致,进行了以下技术调整:
- 将浅色主题的默认表面色从 tone 99 调整为 tone 98
- 中性调色板(neutral palette)的色度从 4 提升到 6
- 深色主题的表面颜色略微变深

浅色主题默认表面色在色阶与色度上有所变化
2023 年 2 月
新增强调色(accent colors)
新增的强调色组带来更多色彩组合的自由度。
Primary / Secondary / Tertiary 强调色组新增的固定色(Fixed)在浅色与深色主题中保持一致,不会变化。

新增的强调色组为配色提供更多可选方案
二. 系统如何运作
1. 就像数字填色一样
想象一下,你的产品界面就像一张数字填色画布,界面中的每个元素都有一个对应的编号,而每个编号都会被分配特定的一种颜色。在「X 光视图」中,每个界面元素不显示颜色,而是显示编号。









