使用颜色来表达风格和传达含义。设置应用的颜色对于个性化、定义语义目的以及定义品牌标识至关重要。
要点
- 为确保辅助功能
- 检查颜色对比度并避免将颜色与色调相近的颜色配对。
- 请注意，红色和绿色是常见的模式，但对于某些类型的色盲用户来说，它们是无法访问的。
- 有意义地使用颜色：应用可以充满活力和富有表现力，但应坚持使用调色板。使用过多的语义颜色可能会令人困惑，而使用过多的装饰性颜色可能会令人不知所措。
- 颜色可以具有模式，因此请重复已建立的颜色模式。如果在应用中使用语义颜色，请使用一致的颜色。
- 为了使您的应用在不同的环境中都能正常工作，请构建一个浅色和深色配色方案（理想情况下还有对比主题）。
- 使用标记分配颜色以指示元素的颜色角色，而不是使用硬编码值。
- 颜色可以来自各种动态和静态来源，但在同一视图中避免混合过多。
- 使用动态内容颜色时，尽量避免从多个内容片段中提取颜色。
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 颜色实用程序 (MCU) 提供支持，这是一套颜色库，包含有助于简化应用中颜色主题和方案开发的算法和实用程序。
以下视频介绍了颜色方案的推导方法。
颜色限制
颜色限制是颜色的物理限制——无论是实际物理限制、我们自身的生物视觉限制，还是屏幕颜色渲染的限制。例如，某些色相不可能与某些彩度或色调共存。颜色限制是诸如浅蓝色或亮浅红色等颜色不太可能存在的原因。色调颜色映射必须在所有色相值中保持一致。
上图显示了 H105、H25 和 H285 色相值的三个不同的色调映射图表。
图表 1——色相 105（黄色）。指示颜色的可用性。彩度和色调就像一个图表。黄色色相在图表上的某些色调下彩度有限，黄色在较低色调下没有很宽的鲜艳度范围。
图表 2——色相 25（红色）。显示比色相 105（黄色）更多的色彩选择。在这个色调图中，最高色彩的点位于较低的色调级别。
图表 3——色相 285（蓝色）。显示最高的色彩度位于更暗的色调。反过来，在较浅的色调下会损失彩度。
颜色方案
颜色方案是从特定色调派生的强调色和表面的集合，并分配给颜色角色，然后映射到 UI 元素和组件。颜色角色指的是颜色的用途，而不是颜色的色相。例如，on-primary 而不是 on-blue。
颜色方案旨在和谐一致，确保文本的可访问性，并区分 UI 元素和表面。颜色角色对（由容器和on-容器角色组成）具有提供可访问对比度的色调值。
创建明暗方案，并具有其自身的特定色调分配。
Material 颜色系统和自定义方案提供颜色的默认值作为自定义的起点。
了解更多关于 M3 颜色系统 的信息。
对于可自定义的颜色方案，请浏览 Android UI Kit。
将颜色应用于您的 UI
UI 颜色由强调色、语义色和表面色组成。
- 强调色指的是通常是 Android 品牌调色板一部分的核心颜色。
- 语义颜色（或 Material 3 中的自定义颜色）是具有特定含义的颜色。
- 表面颜色指的是用于背景颜色的任何派生的中性颜色。
强调色
强调色通常在 UI 中表现出最大的表现力，无论是用于品牌推广、突出显示操作、个人表达还是用户表达。
每种强调色（主色、次色和三次色）都提供一组四到八种不同色调的兼容颜色，用于配对、定义强调和视觉表达。
动态颜色
强调色可以从动态来源定义。
从 Android 12（API 级别 31）开始，动态颜色允许系统从用户的壁纸或应用内内容（如关键艺术资源）中提取源颜色。动态颜色使用 MCU 算法和流程来创建方案并在无需太多努力的情况下实现它们。要将动态颜色应用于您的应用，请阅读 允许用户个性化其应用中的颜色体验。
尝试 动态颜色可视化 代码实验室，亲身体验动态颜色。
静态
静态方案是指具有不变（或相对不变）值的方案。创建静态方案的一种常用方法是使用品牌颜色，将主色、次色和三次色与品牌的主题调色板对齐。
即使您使用动态颜色，我们也强烈建议创建一个静态方案作为后备方案，以防动态颜色不可用于用户的设备。否则，系统将使用基线紫色方案。
使用 Material 主题构建器，您可以应用 MCU 颜色算法来生成静态自定义主题。这将生成您选择的颜色，但这些颜色与 M3 颜色系统令牌和和谐的可访问性原则一致。
仍然可以创建一个完全自定义的静态方案。为此，请在颜色样式 (color.kt 或 color.xml) 中分配不同的值，或者在更新 Figma 样式属性后从 Figma 的 Material 主题构建器导出主题文件。
用法
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 Design 令牌和自定义您的配色方案。
可以通过更新 Figma 检查器面板中的样式属性来完全自定义配色方案。这些修改后的值将被导出。
