M3 颜色系统的核心概念
1. 动态色彩 (Dynamic Color)
这是 M3 颜色系统最显著的特征。
用户驱动的个性化： 动态色彩允许用户设备（通常是 Android 12 及更高版本）根据用户的壁纸、系统主题偏好等，自动生成一套个性化的颜色主题。支持 M3 的应用可以采用这套颜色主题，实现与系统和用户偏好高度一致的视觉效果。
Monet 主题引擎： 这种能力来源于 Android 的 Monet 主题引擎。当用户更换壁纸时，Monet 会从壁纸中提取主要颜色，并生成一个包含多种色调的调色板。
应用程序适配： 应用可以读取并应用这些生成的颜色，从而实现与用户设备的高度融合，提供独一无二的个性化体验。当然，应用也可以选择使用品牌自定义的颜色。
2. 语义化颜色角色 (Semantic Color Roles)
M3 引入了一套基于语义而非单纯色彩名称的颜色角色。这意味着颜色不再是“红色”、“蓝色”，而是“主色”、“背景色”、“错误色”等，这大大增强了颜色系统的可理解性、可维护性和可访问性。
五种关键色角色 (Key Color Roles)：
Primary (主色): 最常用于突出品牌元素和最主要的操作。
Secondary (辅助色): 用于次要的界面元素或强调内容。
Tertiary (第三色): 用于与主色和辅助色形成对比的强调，或提供额外的视觉区分。
Neutral (中性色): 主要用于背景、表面和文本，提供沉稳的基础色。
Neutral Variant (中性变体色): 中性色的变体，用于与中性色形成细微的区分，例如次要背景或边框。
派生色调 (Tonal Palettes)： 每种关键色都会派生出一个包含 13 种色调的色调调色板（Tonal Palette），从 0 到 100，涵盖了从深到浅的各种色调。这些色调用于构建界面中不同状态、不同强调程度的元素。
容器和内容色 (Container & On-Color Roles)：
_Container(容器色): 用于组件的背景色，通常比其对应的“on”色更浅。例如primaryContainer是主色容器的背景色。On_(内容色): 用于放置在对应容器色或关键色之上的内容，例如文本或图标。它保证了与背景色的高对比度，确保可读性。例如onPrimary是放在主色上的文字或图标的颜色，onPrimaryContainer是放在主色容器上的文字或图标的颜色。
系统状态色 (System Status Colors)：
Error(错误色): 用于表示错误状态或重要的警告。OnError(错误内容色): 放在错误色之上的内容颜色。ErrorContainer(错误容器色): 错误元素的背景色。OnErrorContainer(错误容器内容色): 放在错误容器色之上的内容颜色。
表面色和背景色 (Surface & Background Colors)：
Background(背景色): 应用的最底层背景色。OnBackground(背景内容色): 放在背景色之上的内容颜色。Surface(表面色): 浮在背景色之上的组件（如卡片、工作表）的背景色。OnSurface(表面内容色): 放在表面色之上的内容颜色。SurfaceVariant(表面变体色): 表面色的变体，用于与表面色形成区分的元素，如分隔线。OnSurfaceVariant(表面变体内容色): 放在表面变体色之上的内容颜色。InverseSurface(反转表面色): 用于在暗色模式下显示亮色内容，或在亮色模式下显示暗色内容。InverseOnSurface(反转表面内容色): 放在反转表面色之上的内容颜色。InversePrimary(反转主色): 主色的反转版本，用于在反转表面上显示主色。
3. 色调高度 (Tonal Elevation)
M3 不再像 M2 那样主要依靠阴影来表示组件的“海拔”或层级。相反，它更多地使用色调叠加层（Tonal Color Overlays）。
亮度调整： 随着组件“海拔”的增加，其背景色会叠加一层半透明的
primary色调，使其看起来稍微变暗（在浅色模式下）或变亮（在暗色模式下），从而形成视觉上的层级感。一致性： 这种方法在亮色和暗色模式下都能保持一致的视觉效果，并且减少了阴影对界面元素的影响，使得界面更加干净。
M3 颜色系统的优势
更强的个性化： 动态色彩让应用能更好地融入用户设备，提供独特的视觉体验。
更好的可访问性： 语义化颜色角色和对比度指导确保了高对比度，使所有用户都能轻松阅读和理解内容。
更高的灵活性： 尽管有规范，但 M3 提供了足够的灵活性，允许品牌在保持 M3 风格的同时融入自己的品牌特色。
更一致的用户体验： 无论是在亮色模式还是暗色模式下，或是在不同设备上，M3 的颜色系统都能提供一致且美观的视觉效果。
简化的开发： 语义化的颜色命名使得开发人员更容易理解和应用颜色，减少了颜色管理上的错误。
示例：一个购物应用的界面
假设我们要设计一个购物应用的界面，在 M3 颜色系统下，这个应用界面的颜色是如何构建的。
1. 动态色彩的应用
用户A的设备： 用户A的壁纸是蓝色调的风景图。当他打开我们的购物应用时，如果应用支持动态色彩，那么应用的主色 (
Primary) 可能会自动从蓝色调中提取，例如#006780这样的深青色。用户B的设备： 用户B的壁纸是橙色调的日落图。当她打开同一款购物应用时，应用的主色可能会变成
#9F4000这样的深橙色。
这样，同一个应用在不同用户的设备上呈现出不同的主题色，与用户的个性化偏好无缝融合。
2. 语义化颜色角色的应用
在上述的蓝色主色调场景下，我们来看各个语义化颜色角色如何映射到具体的界面元素上：
Primary(主色):#006780(深青色)应用场景： 主要的行动按钮（如“立即购买”按钮的背景色）、选中的导航栏图标、进度条的填充色。
OnPrimary(主色内容色):#FFFFFF(白色)应用场景： 放在主色背景上的文本或图标，例如“立即购买”按钮上的白色文字。这保证了在深青色背景上的文字清晰可见。
PrimaryContainer(主色容器色):#B3EBFF(浅青色)应用场景： 顶部应用栏的背景色、某些促销卡片的背景、高亮显示的部分筛选器标签。
OnPrimaryContainer(主色容器内容色):#001F29(深蓝绿)应用场景： 放在主色容器背景上的文本或图标，例如应用栏上的标题文字或返回箭头。
Secondary(辅助色):#4C626C(灰色蓝)应用场景： 次要行动按钮（如“添加到购物车”按钮的背景色）、非选中状态的切换按钮。
OnSecondary(辅助色内容色):#FFFFFF(白色)应用场景： 放在辅助色背景上的文本或图标。
SecondaryContainer(辅助色容器色):#D0E7F4(浅灰蓝)应用场景： 次要的标签、分类标题的背景。
OnSecondaryContainer(辅助色容器内容色):#071E27(深蓝灰)应用场景： 放在辅助色容器背景上的文本或图标。
Neutral(中性色):#70787D(中灰)应用场景： 大部分常规文本（如商品描述）、图标、分隔线。
Background(背景色):#FBFCFD(几乎白色)应用场景： 整个应用界面的最底层背景色。
OnBackground(背景内容色):#191C1E(几乎黑色)应用场景： 放在背景色之上的主要文本内容。
Surface(表面色):#FBFCFD(几乎白色，与背景色相同，但在高海拔处会有色调叠加)应用场景： 卡片（如商品列表中的商品卡片）、模态框、底部导航栏的背景色。
OnSurface(表面内容色):#191C1E(几乎黑色)应用场景： 放在表面色之上的文本或图标，例如商品卡片上的商品名称和价格。
Error(错误色):#BA1A1A(鲜红色)应用场景： 错误提示信息、输入框验证失败时的边框。
OnError(错误内容色):#FFFFFF(白色)应用场景： 放在错误色背景上的文本或图标。
ErrorContainer(错误容器色):#FFDAD6(浅红色)应用场景： 错误提示条的背景。
3. 色调高度的应用
底部导航栏： 作为一个“浮”在内容之上的组件，底部导航栏的背景色是
Surface。如果它具有较高的“海拔”，那么在亮色模式下，其Surface色上会叠加一层半透明的Primary色（例如#006780的某个色调），使其看起来比背景色更深一点，从而暗示其更高的层级。弹出模态框： 当一个模态框弹出时，它通常具有最高的“海拔”。因此，它的
Surface背景色会叠加最深的Primary色调，使其在视觉上非常突出，与下层内容形成鲜明对比。