材料设计的颜色系统可以被用来创建一个可以反映你的品牌和风格的颜色主题。
目录：
颜色用法和调色板
颜色和主题、原则
颜色主题创建
材料设计颜色主题基线、主色（主色的深浅变体 、区分用户界面元素）、副色（副色的深浅变化体）、表面、背景和错误颜色、文字和图标颜色（“上面”颜色 ）、无障碍颜色、色板、其他颜色、部分主题的其他颜色（主题1 、主题2 、主题3）、用于数据可视化的其他颜色
选色工具
材料设计调色板生成器、输入颜色 、无障碍的多样颜色
颜色的用法和调色板
材料设计颜色系统使用一种有组织的方法让颜色应用到你的用户界面上。在这个系统里，一个主色和一个副色代表性的被选择表现你的品牌。不同颜色的深浅变化然后可以通过不同的方式应用到你的用户界面里。
颜色和主题
你的应用的主和副色和他们的变体，要帮助创建一个和谐的颜色主题，要确保文本的可理解性，还要区分用户界面元素与表层。
选择主色和副色，并生成每种颜色的深浅变化，可以使用材料设计调色板工具、主题编辑器或2014材料设计调色板。
一个主（P）副（S）色调色板
1.主色指示器
2.副色指示器
3.深浅变化
原则
等级分明
颜色表明哪些元素是可交互的，它们如何和其他元素联系，它们的突出程度。重要的元素应该最突出。
易于阅读
文本和重要的元素，比如图标，在所有屏幕和设备类型的彩色背景出现应该符合易读性的标准。
富有感情
通过在难以忘记的时刻展示品牌的颜色加强你的品牌风格。
颜色主题创建
材料设计颜色主题基线
材料设计设计出来由可以直接用的一个内建的基线主题。
这个主题包括默认的主、副色和它们的变体。这个基线主题也包括可以定义用户界面的其他颜色，比如背景、表面、错误、排版、图像。所有这些颜色会自定义你的应用。
一个材料颜色主题基线
主色
主色是在你应用屏幕和组件之间显示最频繁的颜色。如果你没有一个副色，那么你的主色也可以被用来强调元素。
主色的深浅变体
你可以使用你的主色和主色的深浅变化为你的应用创建一个颜色系统。
区分用户界面元素
为了在不同用户界面元素间创建对比度，比如在系统栏里区分出顶栏，你可以使用主色的深浅变化在每一个元素上。你也可以使用变体主色在一个组件中区分元素，比如不同的变体应用在带有图标的悬浮按钮容器里。
主色的深浅变体从系统栏区分出顶栏
这个用户界面使用一个主色和两个主色的变体
副色
副色提供更多方式突出和区分你的产品。副色的选择应该被谨慎的用于突出你选择的用户界面的部分。
副色最好用于：
悬浮按钮、选择控件（滑块、开关）、被选中的高亮文本、进度条、链接和标题
副色的深浅变体
就像主色，你的副色可以有深浅变体。你可以使用你的主色、主色变体、副色、副色变体创建颜色主题。
主副色深浅变化
这个用户界面使用一个包含一个主色、主色变体和副色的颜色主题
表面、背景和错误颜色
表面、背景、错误颜色通常不表现品牌：
表面颜色用在比如卡片、表格、菜单这些组件的表面；
背景颜色用在可以滚动内容的后面。咱这个基线背景和表面色是#FFFFFF；
错误颜色表明比如文本字段的错误组件。咱这个基线错误颜色是#B00020。
这个用户界面展示了表面、背景和错误的基线颜色
文字和图标颜色
“上面”颜色
一个应用的元素从你的调色板的特定类别中使用颜色，比如一个主色。无论文本或是图标这类其他的屏幕元素使用这些颜色出现在表面之上，这些元素应该使用被设计特别的颜色使与它们后面的颜色对比之下清晰、易读。
这类颜色被称为“上面”颜色，他们的颜色元素有时位于关键的使用一个主色、副色、表面色、背景色或者错误色的表面的上头。它们使用原始类别名称（比如主色）的前缀加“上面”来标记。
“上面颜色”主要应用在文本、图标、笔画。有时，它们也应用在表面。
默认的这些颜色是 #FFFFFF和#000000。
这个用户界面展示了文字和图标的基线颜色
无障碍颜色
为了确保一种颜色提供在深或浅文本后面合宜的背景，你可以使用你的主副色的深浅变体。
或者，这些颜色可以用于在深浅背景前的文字。
色板
一个色板是一种颜色的一系列相似色选择出来的一个例子。
勾号表明是否文本颜色在背景前是易读的
当在背景色上白色文本易读时，用白勾暗示；
当在背景色上黑色文本易读时，用黑勾暗示。
对于使用白色文本的应用，背景必须与白色合宜的相对。这个白勾暗示了白色文本与各种背景色板合宜的相对。这个400色板被应用在这个用户界面
对于使用白黑色文本的应用，背景必须与黑色合宜的相对。这个黑勾暗示了黑色文本与各种背景色板合宜的相对。这个50色板被应用在这个用户界面
其他颜色
材料设计颜色系统支持可选的其他颜色，这些颜色被用在你品牌的主副色的其他选择（它们构成你的主题的额外颜色）。应用可以使用其他颜色创作区分不同部分的主题。
其他颜色最好用于：
应用的亮暗主题；
应用在不同部分不同主题；
应用作为一套产品中的一部分的存在。
其他颜色应该谨慎使用，因为它们与存在的颜色主题和谐是有挑战性的。
部分主题的其他颜色
其他颜色可以定制应用不同部分的主题。
这个应用有三个主色。不同的主题用在应用的不同部分，允许用户在应用内对它们自己有更好的定位
主题1
黄色被用来作比如引导和选择感兴趣区域的主色
主题2
蓝色被用来作应用中的用户个人账户相关的区域的主色，比如被选择的课程
主题3
粉色被用来作课程的主色
用于数据可视化的其他颜色
应用可以使用其他颜色去传达你主要颜色主题之外的其他类型，它们仍然是你全部调色板的一部分。
这个应用有一个包含五个额外颜色的颜色主题，当多数据可视化被展示在同一页面时被使用
1.账户部分使用绿色
2.账单部分使用橘色和黄色
3.预算部分使用紫色和蓝色
选色工具
材料设计调色板生成器
材料调色板可以被用来生成有你输入的任何颜色的一个面板。色调、色度、亮度的算法创建了美观愉悦实用的调色板。
输入颜色
调色板可以生成基于输入的主色，和想要的与主色相联系的邻近色，互补色还是三角色。或者工具可以生成扩展的任何输入的主副色的调色板。
无障碍的多样颜色
这些调色板提供额外的方式使用你主副颜色，通过提供更深和更浅的选择与表面分离和提供符合无障碍标准的颜色。
调色板（链接）
2014材料设计调色板
这些调色板最初与2014版的材料设计创建，颜色包括在一起和谐的，可以用来开发你的品牌调色板。为了生成你自己和谐的色板，可以使用色板生成工具也可以是材料设计主题编辑器。
网友评论