Material Design Color System

Color System

Key colors

1. 基本的颜色方案是由五种主要的颜色组成

3. Key colors是创建动态颜色方案的基础。当Key colors建立之后，Material算法会指定所有用来表达状态、错误和对比的颜色。

4. Custom Colors

Accent colors - 突出颜色

• Primary key colors: 用来生成主要的UI组件颜色规则，比如悬浮按钮、主要按钮、活跃的状态(比如Tab被选中)、突出的表面的颜色

• Secondary key colors: 用来给不那么重要的组件，比如筛选Tag，同时用来拓宽颜色的表达。

• Tertiary key color: 用来去生成与前两种颜色所能够突出对比的规则，平衡前两种颜色或者去突出显示内容。这个颜色可以自行决定是否使用。也用来支持更广的颜色表达。

Neutral colors - 中性颜色

• Neutral key color: 用来生成表面或者背景颜色，也用来突出一些文本或者图标

• Neutral variant key color: 用与不那么突出的文本或图标、表面或者组件的边框

Additional colors - 其他颜色

• Error colors

• Product-specific custom colors
自定义的颜色

调色板

百分之百色调是百分之百的白，是范围中最亮的颜色；百分之零色调是百分之百的黑，是范围中最黑的颜色。

Color Roles - 颜色成员/颜色作用

颜色方案中的成员

• 每种Accent color提供了四个不同色调、不同重点、不同视觉表达的相互兼容的颜色。
以Primary key color为例，会提供四种颜色模式：
• Primary: 基础颜色
• On-primary: 应用到Primary的内容区(在Primary之上的内容，例如文字、图标等)
• Primary container: 应用到比Primary不那么突出的元素
• On-primary container: 应用到Primary container的内容区

• Neutral color被使用在表层或者背景上，也使用在需要突出的文字或者图标上

映射Accent color成员

1. Primary

 

 

1. On-primary

2. Primary

 

 

 

 

 

©

 

 

3. On-primary container

4. Primary container

 

 

 

 

 

 

1. Secondary





1. Icon: On secondary container 2. Secondary container

2. Tertiary

映射Neutral colors成员: 背景和表层

1. Neutral



虽然背景颜色需要一直，但是表层颜色不能这样。
可以分为1-5级的表层被基于primary colors的颜色叠加着色，给表层分等级给表层基线引入了色调的变化。
不同色调的表层有一下益处：
• 在相对比且层级不同的区域产生差异
• 在可访问与不可访问(比如可点击和不可点击)之前创建差异
• 能有视觉上的哇塞(非错别字)
• 弱化交互元素之间的过渡



层级：
1. Surface 1 - 层级为1的具有表面颜色容器的组件
surface color + 5%透明度的primary color



2. Surface 2 - 层级为2的具有表面颜色容器的组件
surface color + 8%透明度的primary color



3. Surface 3 - 层级为3的具有表面颜色容器的组件
surface color + 11%透明度的primary color



d. Surface 4 and 5 - 层级为4和5的具有表面颜色容器的组件

surface color + 12%/14%透明度的primary color



相反的规则 - 颜色方案中额外的规则，用于映射到需要的组件中



Inverse Surface和Inverse On Surface被用来作为展示与周围UI颜色相反的内容，例如弹出的需要突出的内容。

2. Neutral Variant



Surface Variant和On Surface Variant可以被使用来与Surface产生差异。
Outline是用来创建边界和强调可用性一种工具色，这与分割线不同。分割线是使用Surface variant颜色成员，且装饰性大于实用性的分割内容的东西。

Custom colors - 自定义颜色

协调性

Content和On Content颜色成员应用到这些按钮上，并且自定义的绿色色调与其相协调

Container和On Container颜色成员应用到卡片上

 

Product-specific custom colors

 

自定义颜色将通常需要的特定色调与 UI 中的富有表现力的颜色固定在一起，作为传达传统含义（例如错误）的一种方式。

除了多变的动态颜色环境中，这也被使用在给设计/开发团队更多的颜色控制和颜色定制