2017 Material Design中文完整版：第三章节第一节《样式：颜色》
【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。
Material Design的色彩受大胆活泼的色调启发，并配合柔和的环境，阴影和高光组成。
颜色工具可以帮助你在UI中创建、分享和使用调色板，以及测试不同颜色组合的可访问（accessibility）级别。
创建配色方案
创建配色方案，其中包括主、次色较暗和较亮的配色版本。
测试可访问性
检查在不同颜色背景下文本的易读程度，以 web内容可访问性指南 的易读性标准来评定。
在颜色中预览UI
通过Codepen中的可编辑 html、css 或 javas cript，并结合Material Design中的组件布局来预览配色方案。
调色板包括主色（Primary color）、强调色（Accent color）。调色板可以用于插画或品牌颜色。它能够帮助你配合其他人的工作。调色板以主色为基准，通过填充spectrum（光谱）形成一套完整可用的颜色。Google建议用“500”作为主色，其它的颜色作为强调色。
通过统一色调、阴影和透明度能够让应用看起来更统一。
下载色板 0.02MB（.zip）
选择一个配色方案
你的应用可以根据相应的品牌特性去自定义一个合适的配色方案。或者，你也可以使用material design的调色板创建整个新的配色方案。
创建配色方案时：
使用颜色工具创建的色板应用到你的应用中去
确保应用中的元素之间有足够的对比区分（应用需符合可访问性标准）
Material Design的颜色系统
在Material Design中，主色是应用中最常用的颜色。辅助色则是为了凸显应用中的部分UI。
可以选择或可以不选择使用Material Design调色板中的颜色。
图中颜色搭配：主色，浅色和暗色主题配色，强调色
在使用主色区域的下方，相关信息使用浅色主题背景。浮动按钮使用辅助色进行强调。
图中颜色搭配包含：主色，及更深和更浅的颜色版本
图中主色用于工具栏和状态栏，同时也用于强调浮动按钮。
主色（Primary color）
主色是应用中界面和组件使用最频繁的颜色。如果页面中没有辅助色存在，那么主色也可用于强调元素。
如果需要创建元素之间的对比，可以使用主色的更浅或更深的色调版本。更浅和更深色调间的对比有助于区分面与面之间的关系，例如状态栏和工具栏之间的区分。
颜色搭配包含：主色的不同色调（因为需要浅和深两种颜色的对比度）
辅助色（Secondary color）
辅助色最好用于：
按钮，浮动按钮和文本按钮
文本字段，光标和文本选择
进度条
选择控件，按钮和滑块
链接
标题（Headlines）
如果你使用主色的“变种”颜色（如比主色更浅或更深的色调）作为强调元素之用，那么可以不使用辅助色去突出元素。也就是说，是否使用辅助色关键看你自己的需要。
辅助色的不同色调版本
辅助色不是说一定要是颜色非常鲜艳的。只要那个颜色能与周边元素颜色形成对比，那么它就可以成为辅助色。注意：需要谨慎使用辅助色来突出UI元素
在你的应用中使用颜色
主色用于大面积的UI及元素。辅助色可用于突显小面积的UI。如果没有辅助色的话，你可以使用主色代替。
浮动按钮使用辅助色突显，而电话icon则使用主色
开关使用辅助色突显，系统栏使用主色，而工具栏则使用主色的较深色调
使用主色突显元素，例如突显按钮或复选框。
很少出现的元素（例如警告）不要使用主色，应与其他元素区分开。
使用主色突显、指示按钮和复选框已被选择
辅助色可以使用在一些典型元素上，例如按钮和链接。
辅助色和用于突显UI元素的任何东西都需要谨慎对待和使用。
可行
对某些文本 (如带链接文本) 使用辅助颜色
不可行
不要使用鲜艳的颜色作为正文文字的颜色
关于颜色在字体排版易读性方面的指导请看 颜色工具 。
可行
使用你的主色作为突显链接的颜色
可行
使用你的主色或辅助色去强调选择短文本，例如标题
可行
浮动按钮可使用辅助色
不可行
如果背景色为辅助色，那你就不能应用辅助色在背景上的元素上
可行
使用单色让图像和其他颜色元素突显
你可以在主色应用区域中的不同元素身上使用主色的不同色调（如图中的浮动按钮）
可行
文本字段和开关使用辅助色突显
可行
文本选择使用辅助色突显
备用的辅助色
如果你的辅助色相对于背景色太深或者太浅，与背景颜色形成了太过于强烈的对比，默认的做法是选择一个相对这个颜色更浅或者更深的颜色作为备用色。
可行
使用一个比背景色更深或者更浅的辅助色
不可行
不要使用与背景颜色没有足够对比度的辅助色
层级
层次结构指的是根据不同层级的重要性对内容进行组织。合理利用颜色可以向用户表达哪些内容是重要的，哪些内容相对没那么重要。
例如，在无色的背景上（黑或白）， 一个颜色鲜艳的按钮会显得非常突出。
亮色能够突显出浮动按钮和工具栏，进而向用户强调写邮件和导航功能。
无色的工具栏和按钮将有色的内容突显，这里不再强调状态和导航栏
意义
颜色可用于传递页面中各种元素的含义。天气应用可以使用颜色来表示当前天气的状况，而地图应用可以使用颜色来表示交通情况（路况颜色为红色或绿色）。
天气应用使用颜色来表示一天中的时间
地图应用使用颜色来表示路况
状态
颜色可以提供以下信息：
元素的当前状态, 如开启或禁用按钮
一个应用或元素的状态变化
表示状态变化的颜色应该是引人注目的，因为差异细微的颜色用户可能注意不到。为了确保用户能够注意到状态的变化，最好使用多种方式来表示状态变化，例如使用icon或移动元素的位置。
红色标签和帮助文本表示错误消息
颜色从蓝色变为红色：表示不同的状态
对比
应用的主色和辅助色应确保元素之间的颜色拥有足够的对比度，进而使所有用户都能看到和能使用你的应用。
在这个界面中，红色代表这一天中的时间，而绿色代表的是雾天天气
色盲用户（红绿色盲）也许只能看到左侧UI。但他们可能看不出文本和其他元素之间的区别。
考虑颜色的功能可见性（affordances）。站在更高层次来看待颜色，你需要使用颜色去向用户传递信息。
对于患有白内障的个体来说，小文本阅读起来非常困难，在他们眼中你的UI是模糊不清的。
为适用于所有用户，提供放大文本的设置。
背景中的文本
文本需要在其背景中突显出来，因此建议：
暗灰色文本应用在浅色背景上
浅灰色文本应用在深色背景上
如果你的应用有浅色和深色主题，那么文本的颜色就需要对应主题的颜色。
易读性
文本在有色背景上需满足可访问性标准保证文字的易于辨别。背景和文本必须使用颜色和不透明度，并遵循可访问性标准。网站内容可访问性指南（AA） 要求普通文本要有4.5:1的对比度，大文本需要有3:1的对比度。
可行
使用不透明度替代改变颜色能够创建更好的对比度和相对亮度。举个例子，如果背景颜色是变为洋红色，那灰色（#727272）文本就会变得很难看清
不可行
将颜色变为灰色而不是降低黑色的对比度，这样做会降低相对亮度并使用户阅读起来非常困难
深色文本在浅色背景上
文本背景是深色还是浅色决定了文本自身的不透明度。对于浅色背景上的深色文本，使用如下不透明度：
最重要的文本使用87%不透明度
次级文本的可视等级较低，所以使用54%不透明度
文本提示（如文本字段和标签）和禁用文本的可视等级更低，所以使用38%不透明度
| 深色文本（#000000） | 不透明度 |
| 主色 | 87% |
| 辅助色 | 54% |
| 禁用文本，提示文本 | 38% |
| 分隔线 | 12% |
浅色文本在深色背景上
白色文本在有色背景上的不透明度需要是100%。
图中列出了关于在深色背景上白色文本的不同重要级别
| 浅色文本（#FFFFFF） | 不透明度 |
| 主色 | 100% |
| 辅助色 | 70% |
| 禁用文本，提示文本 | 50% |
| 分隔线 | 12% |
Icons和其他元素
像icons这样的元素得益于它在38%的不透明度上有一个黑色或白色的十六进制值(而不是一个特定的颜色)，所以它可以运用在任何颜色的背景之上。
| 深色icons（#000000） | 不透明度 |
| 被触发icons | 54% |
| 未被触发icons | 38% |
| 浅色icons（#FFFFFF） | 不透明度 |
| 被触发icons | 100% |
| 未被触发icons | 50% |
有色的文本和背景
在有色背景上使用有色文本需要限制使用重要的文本元素。有色文本一般用于表示重要性和突出选择。
请参考 颜色工具 确定用于排版的某些前景色是否符合在不同颜色背景上的可访问性标准。
可行
重要文本应该使用与背景色对比差异大的颜色（比如你的辅助色）
不可行
避免在有色背景上放置大量的有色文本
可行
你可以使用同一颜色的深或浅色色调去创建一个单色并用于其他元素中。这个单色需要在视觉上看起来仍然很突出。
不可行
应用了同一颜色不同色调的元素，如果元素之间对比不明显就不要放在一起，因为这样非常难看清
主题能够让你的应用有一个统一的基调。主题规定了明暗，阴影和透明度，为了提高应用间的一致性，提供两种主题选择：浅色和深色。
下载主题 （1.23 MB(.ai)）
浅色主题
1.状态栏
2.应用栏
3.背景
4.卡片/对话框
浅色主题调色板
UI中运用
深色主题
1.状态栏
2.应用栏
3.背景
4.卡片/对话框
深色主题调色板
UI中运用
