颜色系统之主色&色调

内容

主要颜色

调色板

色彩系统在处理变化时，让动态主题颜色随着用户输入的改变而改变。色调关系的逻辑、色相变化、饱和度为颜色的灵活应用提供了基础。颜色主题可以看做是一组有凝聚力的相关色调，而不是一组固定的色值。

主要颜色

配色方案的基础是设定5个关键颜色，每个色单独生成13个相关的颜色色板 ，色板里的每个颜色分配到UI里扮演不同的颜色角色。

主要颜色是创建动态颜色主题的基础，建立了关键颜色后，Material的算法指定了需要表达交互状态、错误和访问对比的全部范围颜色。

自定义颜色同样可以添加到主题，了解更多关于自定义颜色。

主要颜色：主色&中性色

主色

在整个界面里，主色（下图 Primary Key Color）运用在一些重要突出的组件里，像FAB（悬浮按钮）、一些突出的按钮，选中状态以及hover状态。

二级颜色（下图 Secondary Key Color）运用在一些不是特别突出的组件里，像筛选这样的小部件，同时又能增加视觉表达。

三级颜色（下图 Te Key Color）主要运用在平衡主色与二级色，或者想要突出某个元素上。三级颜色由团队自行决定使用，目的是为了增加颜色在产品中的表现力。

中性颜色

中性颜色（下图 Neutral key color）主要运用于一些填充和背景，以及高强度突出的文本和图标。

中性衍生颜色（下图 Neutral variant key color）主要运用于中等突出的文本和图标、填充和线框组件上。

其他颜色

错误色

除了主色和中性色外，颜色系统包括了错误色，错误（ Error ）本身，加上在不同背景下的4种展示（Error，On-error, Error Container, on-error container，英文对应下图）。

产品自定义色

自定义颜色（Custom colors）在界面中，通常和富有表现力的颜色一起使用，作为常规表达的一种形式，像错误。

它们还可以增加团队对颜色的可控性和个性化表达，以及动态颜色系统的灵活性运用。

调色板

100为白色，是最亮的颜色；0为黑色，是最暗的颜色。

一个颜色生成13个颜色

1个主色（Primary Key Color）由13个颜色组成，包括黑色和白色。100为最亮的白色。下方0-100的数字，表示颜色的亮度。

每个颜色的数值，表达了该主色（上图Primary Key Color）的数字关联。例如，上方标有数字40的颜色，是主色（上图Primary Key Color）亮度（明度）值40%时候的颜色。

————————————————————————————————————————————

英语单词

1. Neutral colors

中性色

2. Tonal palettes

色调版

3. Hue

色相

4. Saturation

饱和度

5. Brightness

明度