颜色系统

Material 3 Expressive 颜色框架使用动态颜色主题,基于映射到 HCT(色相、饱和度和明度)颜色系统的两个种子颜色。

基本术语

颜色角色
就像按数字绘画画布上的“数字”一样,颜色角色被分配给特定的界面元素。它们有诸如 primary、on primary 和 primary container 的名称。浅色和深色主题都使用相同的颜色角色。查看所有颜色角色
HCT
HCT 代表色相 (hue)、饱和度 (chroma) 和明度 (tone)。

使用色相、饱和度和明度 (HCT) 定义颜色

HCT 颜色生成器从一个种子颜色创建一组调色板,从而创建一个基于颜色(色相)、饱和度(饱和度)和亮度(明度)定义颜色的三维颜色模型。

主要有三种强调色:主色 (primary)、辅色 (secondary) 和第三色 (tertiary)。中性色调(例如带有主色提示的各种灰色调)由于其单色性质,非常适合用作丰富内容的容器颜色。

色相

色相是对颜色的感知,例如红色、橙色、黄色、绿色、蓝色和紫色。色相由 0-360 范围内的数字量化,是一个圆形光谱(值 0 和 360 是相同的色相)。

饱和度

饱和度表示颜色看起来有多么鲜艳或中性(灰色、黑色或白色)。饱和度由一个数字量化,范围从 0(完全灰色、黑色或白色)到无穷大(最鲜艳),尽管 HCT 中的饱和度值最高约为 120。

由于生理和屏幕渲染的限制,不同的色相和不同的明度将具有不同的最大饱和度值。

明度

明度表示颜色看起来有多么亮或多么暗。明度有时也称为 亮度。明度由一个数字量化,范围从 0(纯黑,无亮度)到 100(纯白,完全亮度)。

明度对于视觉无障碍至关重要,因为它决定了对比度。明度差异较大的颜色会产生更高的对比度,而差异较小的颜色则会产生较低的对比度。

动态颜色(颜色主题)

Wear OS 实现了符合 Web 内容无障碍指南 (WCAG)-AAA 的主题系统,该系统源自两个指定的种子颜色。具体来说,这些种子颜色用作主色和第三色调色板的基础。利用这两个初始颜色,系统会生成一个包含主色、辅色、第三色和表面调色板的综合调色板。随后,此生成的主题将应用于 Wear OS 组件、系统界面元素、Tiles 和应用。

Higher seed values represent colors that are closer to white
每个表盘定义两个种子颜色,用于主色和第三色调色板。

这些种子颜色通过一个算法,生成五个色调范围,特定的明度(基于亮度)被分配到由方案组成的预定义角色中。颜色通过设计令牌映射到方案。

然后,每个设计令牌将应用于已选择使用动态颜色的 SysUI、Tiles 和应用。

根据您的偏好,您可以使用特定的种子颜色或品牌颜色来派生动态颜色。

从种子颜色生成

动态颜色将基于特定的种子颜色自动创建一个可访问的颜色方案。

由于界面可能最终使用任意数量的不同源颜色,因此最好先使用基线颜色方案进行设计,以便您可以确保正确的颜色角色映射到产品中的正确组件。使用 Material Theme Builder 查看您的界面模拟图在不同源颜色下的显示效果,并根据需要调整设置。

调色板(来自表盘种子颜色)

应用于 Tile 的颜色主题

应用于应用屏幕的颜色主题

从品牌颜色生成

与 Material 3 Expressive 处理颜色角色的方式类似,Wear OS 通过动态且可访问的颜色表达为个性化体验应用颜色。Wear OS 仅使用深色主题,因为可穿戴设备界面构建在黑色背景上。作为一个在触控设备上运行的平台,Wear OS 的调色板也更有限,因为它不需要那么多悬停和焦点状态。使用 Wear OS 特定的颜色主题构建工具,围绕您的品牌构建自定义主题,并生成支持 Material Design 令牌且与系统界面组件无缝协作的完整参考调色板和分配的颜色角色。

调色板(来自图稿种子颜色)

应用于 Tile 的颜色主题

应用于应用屏幕的颜色主题