使用颜色表达风格和传达含义。设置应用程序的颜色对于个性化、定义语义目的以及当然定义品牌标识至关重要。
要点
- 为了确保无障碍
- 检查颜色对比度，避免将颜色与类似色调配对。
- 请考虑红色和绿色是常见的模式，但它们对患有某些类型的色盲的用户来说也是不可访问的。
- 练习有意义地使用颜色：应用程序可以充满活力和富有表现力，但要坚持使用调色板。用太多语义颜色扩展您的方案可能会令人困惑，而使用太多装饰性颜色可能会让人不知所措。
- 颜色可能具有模式，因此重复已建立的颜色模式。如果在您的应用程序中使用语义颜色，请使用一致的颜色。
- 为了使您的应用程序在不同的环境中都能正常运行，请构建一个亮色和暗色配色方案（理想情况下还应包含对比主题）。
- 使用标记分配颜色以指示元素的颜色角色，而不是使用硬编码值。
- 颜色可以来自各种动态和静态源，但避免在同一视图中混合太多颜色。
- 在使用动态内容颜色时，请尽量避免从多个内容片段中提取颜色。
Android 上的颜色空间
为了正确理解 Android 如何将颜色应用于您的 UI，首先了解它在设备上的显示方式非常重要。
颜色如何在设备上显示
您的应用程序显示在背光屏幕上，该屏幕使用数字颜色并遵循某些模型和规则，以帮助我们的眼睛感知该颜色。数字颜色是加色，它是通过“添加”或混合不同的光来创建全光谱的颜色。人类从一个屏幕到另一个屏幕感知颜色的方式可能会有很大差异，具体取决于设备的颜色校准、屏幕类型、设置和颜色空间。
在设计应用程序时，请考虑所使用的颜色可能由于这些因素而并不完全相同，更不用说每个用户的独特颜色感知了。
关于颜色空间
颜色空间是使用颜色模型组织颜色的方式。RGB 是一种加色模型，它通过红色、绿色和蓝色创建颜色光谱，而用于打印的 CMYK 则是减色。出于这个原因，交互式设计师通常使用 RGB 或类似模型来选择颜色。
Material 3 (M3) 引入了 HCT，这是一种新的颜色空间，它使用色调、彩度和色调来定义与 HSL 等其他模型相比感知准确的颜色。
要详细了解 HCT 的色彩科学和开发，请阅读 颜色与设计的科学。
色调、彩度和色调
HCT 允许更个性化和灵活地使用颜色，同时保持在系统参数范围内。HCT 使用色调、彩度和色调对颜色进行建模。
- 色调：色调类似于单个用户用来描述颜色的形容词，例如“红色”或“电光紫”。色调的 HCT 值范围为 0–360。
- 彩度：彩度表示颜色的鲜艳程度，范围从中性灰色到完全鲜艳。在 HCT 颜色空间中，彩度的最大值为约 120。
- 色调：色调是颜色的亮度或亮度。HCT 使用色调来创建对比度。设置为相同色调值的颜色对于某些无障碍环境不可访问。较低色调值的颜色较暗，较高色调值的颜色较亮。
颜色系统流程
M3 颜色基于 HCT 模型构建，用于导出和谐的无障碍配色方案，并有助于动态颜色功能。M3 颜色系统从源颜色开始。此源颜色被转换为五种关键颜色：主色、辅色、第三色、中性色和中性变体。这五种关键颜色创建了色调调色板，该调色板由每种关键颜色的色调增量组成。
如果您手动分配关键颜色，请注意输入的彩度和色调，因为颜色的色调可能不是颜色角色的色调值。
M3 颜色系统由 Material Color Utilities (MCU) 提供支持，MCU 是一组颜色库，其中包含算法和实用程序，使您更轻松地在应用程序中开发颜色主题和方案。
以下视频介绍了配色方案的推导方式。
颜色限制
颜色限制是颜色的物理限制——无论是实际的物理限制、我们自身的生物视觉限制，还是屏幕颜色渲染的限制。例如，某些色调无法与特定的彩度或色调共存。颜色限制是浅蓝色或鲜艳的亮红色等颜色无法完全实现的原因。色调颜色映射必须在所有色调值上保持一致。
上图展示了 H105、H25 和 H285 色调值的三个不同的色调映射图。
图 1——色调 105（黄色）。指示颜色的可用性。彩度和色调就像一个图表一样。黄色色调在图表上的特定色调下有有限的彩度，黄色在较低色调下没有很宽的鲜艳度范围。
图 2——色调 25（红色）。显示比色调 105（黄色）更多的色度选项。在这个色调图中，最高彩度点位于较低的色调水平。
图 3——色调 285（蓝色）。显示最高的彩度出现在更暗的色调中。另一方面，在较浅的色调下，彩度容量会损失。
配色方案
配色方案是根据特定色调衍生出来的强调色和表面集，并分配给颜色角色，然后映射到 UI 元素和组件。颜色角色指的是颜色的用途，而不是颜色的色调。例如，on-primary 而不是 on-blue。
配色方案旨在和谐一致，确保文本可访问，并区分 UI 元素和表面。颜色角色对（由容器和 on-容器角色组成）具有提供可访问对比度的色调值。
创建了浅色和深色方案，并具有各自的特定色调分配。
Material 颜色系统和自定义方案为颜色提供默认值，作为定制的起点。
了解有关M3 颜色系统的更多信息。
要创建可定制的配色方案，请探索Android UI 工具包。
将颜色应用到你的 UI
UI 颜色由强调色、语义色和表面色组成。
- 强调色指的是核心颜色，通常是 Android 品牌调色板的一部分。
- 语义色（或 Material 3 中的自定义颜色）是具有特定含义的颜色。
- 表面色指的是用于背景色的任何中性衍生颜色。
强调色
强调色通常在 UI 中表现出最大的表现力，无论是用于品牌、突出显示操作、个人表达，还是用户表达。
每种强调色（主色、次色和三色）都以四到八种不同色调的兼容颜色组的形式提供，用于配对、定义强调和视觉表达。
动态颜色
强调色可以从动态源定义。
从 Android 12（API 级别 31）开始，动态颜色使系统能够从用户的壁纸或应用内内容（如关键艺术资产）中提取源颜色。动态颜色使用 MCU 算法和流程来创建方案并轻松地实施它们。要将动态颜色应用到你的应用，请阅读让用户个性化他们应用中的颜色体验。
尝试一下可视化动态颜色的代码实验室，以直观地了解动态颜色。
静态
静态方案是一种具有不变（或相对不变）值的方案。创建静态方案的一种常见方法是使用品牌颜色，将主色、次色和三色与品牌的主题调色板对齐。
即使你正在使用动态颜色，我们也强烈建议创建一个静态方案作为备用方案，如果用户设备不支持动态颜色，则可以使用它。否则，系统将使用基准紫色配色方案。
使用 Material 主题构建器，你可以应用 MCU 颜色算法来生成静态的自定义主题。这会导致你选择的颜色，但与 M3 颜色系统令牌和和谐的可访问性原则保持一致。
仍然可以创建完全自定义的静态方案。为此，在颜色样式（color.kt 或 color.xml）中分配不同的值，或者在更新 Figma 样式属性后，从 Material 主题构建器导出 Figma 主题文件。
用法
Material 组件具有预先分配的颜色角色，但你可以在整个 UI 和自定义元素中使用颜色令牌。谨慎使用所有强调色，考虑到人眼特别容易被鲜艳的颜色吸引。
与类型一样，系统以层次结构应用颜色，主色及其相应的角色分配给至关重要的行动号召（CTA）。我们建议将浮动操作按钮（FAB）之类的组件设置为主要角色。
选择主色时，最好分配你的品牌的主题颜色。或者，你可以选择一种颜色来代表交互式组件，这样你的品牌颜色就可以更少地使用。次色和三色在突出重要性方面继续向下延伸层次结构。
过度饱和的外观会导致只使用主色、次色或三色的基本颜色角色。为了帮助你的颜色层次结构，请应用配色方案以包含不太鲜艳的容器颜色和轮廓角色。
为了确保更好的用户体验，请使用更鲜艳的主色来表示应用的视觉层次结构中更突出的操作。在下图中，第一个图像中的 FAB 具有与导航相同的色调和彩度的柔和颜色，使其融入其中。第二个图像显示了一个 FAB，它使用鲜艳的主色更引人注目。
要直观地了解动态颜色，请尝试一下自定义 Material 颜色的代码实验室。
语义色
语义色是指具有特定含义的颜色。例如，错误是一种语义颜色。
对颜色的含义保持一致——如果你建立了一种模式，请在整个应用中重复它。例如，如果你已将紫色设置为表示会员功能，请在所有会员功能实例中使用紫色。
在下面的示例中，一个应用使用红色表示一个文本字段中的错误，但使用紫色表示另一个文本字段中的错误——这会导致在浏览表单时产生混淆。
虽然 Material 配色方案提供了语义错误颜色，但可以通过自定义颜色创建额外的语义颜色，以扩展你的配色方案。了解有关自定义颜色的更多信息。
协调提供了一种将动态用户生成的颜色与应用中的自定义颜色对齐的方法，以创建更和谐的调色板。
表面色
表面色专为背景元素而设计，例如组件容器、表单和窗格，并且代表了应用中的大部分颜色。不要羞于使用大量的表面空间；人眼需要空间来放松。表面也有助于包含内容并引导读者。
M3 引入了色调表面的概念，这意味着所有颜色都源于色调调色板。色调创造了深度和更大的对比度，以帮助可访问性。有关表面角色的更多信息，请参阅表面角色 M3 指南。
可访问性和颜色
人们根据自己的视力以不同的方式看待颜色。由于某些读者是色盲，因此你需要检查颜色组合，以确保 UI 元素不会融合在一起。虽然不透明度和权重可能不是颜色的字面色调，但它们对用户对颜色的感知具有强大的视觉影响。
颜色对比度是前景和背景元素亮度之间的差异，以比率格式表示。此比率标准被评定为等级。例如，测量按钮上的文本与其容器之间的对比度有助于确定文本的可读性。颜色对比度指南分为文本和非文本，每个指南都有自己的等级集。阅读使用可访问的颜色进行设计以了解更多详细信息。
切勿将颜色作为可使用操作的唯一便利性或指示器。使用组件按钮、字体重量的改变，甚至图标来帮助告知用户他们可以与该元素进行交互。
实施颜色
令牌是设计数据的微小可变语义表示。它们是可重复的，并且使用具有自解释名称的令牌替换静态值，例如用于颜色的十六进制代码。要分配元素的颜色角色，请使用令牌而不是硬编码的颜色值。
查看现在在 Android Figma 示例以获取颜色角色映射的示例。
颜色值是在颜色文件color.kt 中使用Compose（或使用视图的color.xml）设置的。这些设置为样式的颜色是主题的一部分。在Android 移动主题设计中了解有关此内容的更多信息。
要在 Android 上设置颜色值，请使用十六进制代码，它以 6 位格式表示 RGB。要捕获不透明度，请将该值附加到前面以创建一个 8 位代码。
使用 Material 主题构建器
你可以使用 Material 主题构建器 (MTB) 创建自定义的浅色和深色配色方案。
MTB 允许你可视化动态颜色、生成 Material 设计令牌并自定义你的配色方案。
可以通过更新 Figma 检查器面板中的样式属性来完全自定义配色方案。这些修改后的值将被导出。
