颜色系统
Material Design颜色系统可以用来创建表现品牌风格的颜色主题。
目录
用法与调色板
主题创建
选色工具
用法与调色板
Material Design颜色系统使用有规律的方法将颜色运用到UI中。在这个系统里，通常会选择一个主色和一个辅助色来代表品牌，每个颜色的深浅衍生色也能在UI中通过不同的方式来使用。
颜色和主题
应用程序的主色、辅助色以及它们的衍生色有助于创建和谐的颜色主题，确保了文本可读以及元素与界面的对比。
要选择主色和辅助色并生成它们对应的衍生色，请使用Material Design调色板工具、主题编辑器或2014 Material Design调色板。
主色和辅助色调色板
1. 主色意符*
2. 辅助色意符
3. 深浅衍生色
*此处翻译“意符”借用了诺曼《设计心理学》中的概念，也就是能表达功能含义的具体意象或指示符号。
原则
• 层级化
颜色可表示哪些元素可交互、元素间的相互关系以及它们的重要等级。重要元素应该是最突出的。
• 可读性
文本和重要元素（例如图标）显示在有色背景上时，在任何屏幕和设备上都应满足可读性标准。
• 表现力
在关键时刻通过品牌色来强化品牌形象，从而更突出品牌风格。
主题创建
基准Material颜色主题
Material Design有设计内置的基准主题，可直接作为通用框架。
这些颜色包括主色、辅助色以及它们的衍生色。这个基准主题也包含定义UI的附加颜色，例如背景色、前景色、错误色、文本色以及图标色等。所有这些颜色都能根据不同的应用程序来自定义。
基准Material颜色主题
主色
主色是整个应用程序界面以及组件中出现频率最高的颜色。
如果没有辅助色，主色也可用于强调元素。
主色的衍生色
主色和其衍生色可用来创建一个颜色主题。
区分UI元素
为了使UI元素间形成对比，例如区分顶部应用栏和系统栏，可以在两个元素上应用不同明度的主色衍生色。你也可以使用衍生色来区分组件，例如将不同的衍生色分别用于浮动操作按钮的容器和其内部的图标。
使用主色的深浅衍生色区分系统栏和顶部应用栏。
这个UI使用了一个主色和两个主色衍生色。
辅助色
辅助色给强调和突出产品提供了更多的途径。可根据实际情况决定是否选用辅助色，在强调UI选项部分时应谨慎使用。
辅助色适用于：
• 浮动操作按钮
• 选择控件，如滑块和开关
• 选中文本高光
• 进度条
• 链接和标题
辅助色的深浅衍生色
和主色一样，辅色也有深浅衍生色。你可以使用主色、辅助色以及它们的衍生色来创建颜色主题。
主色的深浅衍生色和辅助色
这个界面使用了具备主色、主色衍生色和辅助色的颜色主题。
表面色、背景色和错误色
表面色、背景色和错误色一般不代表品牌：
• 表面色会影响组件（例如卡片、表单和菜单等）的外观。
• 背景色出现在滚动内容之后。基准背景色和表面色为#FFFFFF。
• 错误色标识出错组件（如文本框）。基准错误色为#B00020。
这个界面展示了背景、表面和错误的基准色
文字与图标色
颜色“之上”
应用程序内的元素选用调色板中的特定颜色（例如主色）。当其它界面中的元素（例如文本或图标）出现在有特定颜色的表面上时，这些元素应选用专门设计的颜色，使之与其背后的颜色形成对比并让内容清晰可读。
这种颜色称为颜色“之上”，指的是实际中它们时常会对置于主色、辅助色、表面色、背景色或者错误色等关键面上的元素进行配色。这些颜色用加上后缀（“之上”）的初始类别（例如主色）作为名称。
颜色“之上”主要应用在文本、图标和线段中，有时候也应用于表面。
这些颜色默认值是#ffffff和#000000。
这个UI展示了文本和图标基准色。
无障碍颜色
为确保浅色或深色文本后面是无障碍的背景色，可以使用主色或辅助色的深浅衍生色。
相反，也可将这些颜色用于浅色或深色背景前面的内容中。
颜色样本
颜色样本是从一系列相似颜色中选择的样本颜色。
复选标记表示文本颜色在背景前是否清晰可读：
• 白色复选标记表明了白色文字在背景颜色上清晰可读
• 黑色复选标记表明了黑色文字在背景颜色上清晰可读
对于使用白色文本的应用程序，背景必须与白色相反的颜色接近。这些白色复选标记表示在各种背景颜色下无障碍识别的白色文本。此应用程序UI使用400色样。
对于使用黑色文本的APP，背景必须与黑色相反的颜色接近。这些黑色复选标记表示各种背景颜色下无障碍识别的黑色文本。此应用程序UI使用50色样。
可选色
Material颜色系统支持可选色，这些颜色可作为品牌主色或者辅助色（它们形成了主题的附加色）的可选色。应用程序可以通过使用可选色创建多种主题来区分不同的部分。
可选色适用于：
• 有深浅主题色调的应用
• 不同区域主题不同的应用
• 作为系列产品中一部分的应用
可选色应谨慎使用，因为与原有颜色主题的融合具备一定挑战性。
分类主题可选色
可选色可用于应用程序的分类主题。
这个APP有三个主色。不同的分类使用不同的颜色主题，让用户在使用中能更好地定位。
主题1
黄色为主色，用于登录和兴趣选择等区域。
主题2
蓝色为主色，用于应用程序中个人账户的相关区域，如已选课程。
主题3
粉红为课程的主色。
数据可视化的可选色
应用程序可使用附加颜色来表示主要颜色主题之外的类别。它们仍然是整个调色板的一部分。
这个APP的颜色主题有五种附加色，在多类可视化数据出现在同一界面上时使用。
1. 账户部分使用绿色
2. 账单部分使用橙色和黄色
3. 预算部分使用紫色和蓝色
选色工具
Material调色板生成器
Material调色板生成器可根据任意的输入色生成调色板。色相、饱和度、明度的可调性也使所创建的调色板既实用又美观。
输入色
调色板可由输入的主色来生成，是否构成相似色、互补色或三元色也与其主色相关。或者，这个工具也可为任意主色和辅助色生成扩展调色盘。
颜色的无障碍衍生色
这些调色板提供了使用主色和辅助色的附加方法，通过给出更浅或更深的选项来区分界面以及提供符合可访问标准的颜色。
2014 Material Design调色板
这些调色板最初由Material Design于2014年创建，包含可以协调配搭的一系列颜色，可用来搭建品牌调色板。要生成自己的和谐调色板，请使用调色板生成工具或Material主题编辑器。
*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考
