色彩样式 - Material design 设计指南

色彩

设计师从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比，强调大胆的阴影和高光，引出意想不到且充满活力的颜色。

---

• 调色板
• 配色方案
• 文字和背景颜色
• 主题

---

调色板

描述颜色常见有四种种方式：RGB、CMYK、HSB、HEX（16进制值）。

• RGB：由红-Red、绿-Green、蓝-Blue三基色共同描述一个颜色。将三基色各划分为256阶，共计可以描述256256256=约1680万种颜色。

  • 用途：常用于描述电子显示其中的颜色。
  • 示例：如 rgb(0,0,225) 标示蓝色

• HSB：H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。 HSB模式对应的媒介是人眼。。饱和度为500的红色值等于#F44336

• CMYK：印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。

  • C：Cyan = 青色，又称为天蓝色或湛蓝
  • M：Magenta = 品红色，又称为洋红色
  • Y：Yellow = 黄色
  • K：Key Plate(blacK) = 定位套版色（黑色）

• HEX（16进制值）：将RGB的10进制颜色数值转换为16进制数值，常常被用在界面设计和程序开发上。

以下是谷歌官方提供的调色板，由以下图可见，供选取了红色、粉色、紫色、深紫色、靛蓝色、蓝色、浅蓝色、青色、水鸭色、绿色、浅绿色、绿黄色、黄色、琥珀色、橙色、深橙色、棕色、灰色、蓝灰色、黑白两色，共计20类基础色和16类强调色。

• 基础色：按照饱和度划分为10个等级，谷歌建议将饱和度500的基础色作为主调颜色。

• 强调色：按照饱和度划分为4个等级，以A开头，如A100。

  

  Red & Pink & Purple Colors
  

  Deep Purple & Indigo & Blue Colors
  

  Light Blue & Cyan & Teal Colors
  

  Green & Light Green & Lime Colors
  

  Yellow & Amber & Orange Colors
  

  Deep Orange & Brwon & Grey Colors
  

  Blue Grey & Black & White Colors

下载调色板

---

配色方案

选择一个调色板

这些调色板可以根据您的品牌来定义自己的调色板，例如单色，黑白，全色或中性，再或者您可以直接使用Material Design调色板。

注意：所有调色板应在不同UI元素之间包含足够的对比度。

选取材料颜色
首先从选好的调色板中选择三个不同饱和度的颜色作为基础色，其中饱和度500的作为主调颜色。然后在其他调色板中选取一个饱和度A开头的强调色，如A200 #68EFAD

基础色-紫色 & 强调色-绿色

应用程序示例

基础色和强调色该如何使用呢？

• 基础色（或主调色）：该颜色应该尽可能的应用在所有界面或组件中。
• 合成色：该颜色被用来指示相关动作或信息。合成色可以是基础色更暗或更浅的变体颜色。

（基础色）合成色100 #C5CAE9

（强调色）合成色A100 #FF80AB

• 强调色：该颜色被应用于浮动操作按钮和交互式元素，例如：

  • 文本字段和游标
  • 文本选择
  • 进度条
  • 选择控件，按钮和滑块

  • 链接

    
    
    

    浮动操作按钮 & 切换按钮

以下是一些使用示例：

文本中的超链接

应用栏上的按钮

状态栏 & 应用栏 & 按钮

聚焦状态或选择状态的控件

• 备选强调色：分为深色调和浅色调。如果您的强调色太浅或太暗，与背景颜色对比不够明显的话，改如何解决呢？

  • 使用更深或更浅的强调色。

    
    
    

    备选强调色示例

  • 使用基础色的变体色
    使用基础色在白色背景下的饱和度为500的颜色值作为备选强调颜色。
    但是，如果您的背景颜色已经是饱和度为500的基础色颜色值，请将颜色设置为100％的白色或54％的黑色。

---

文本和背景颜色

文本可以用不同的不透明度显示，以表达某些信息相对于其他信息的重要性。文本的不透明度级别取决于您的背景是更暗还是更浅。

浅色背景上的黑色文本

对于浅色背景上的黑色文本，应用以下不透明度级别：

• 最重要的文本的不透明度为87％。
• 次要文本（在视觉层次结构中较低）具有54％的不透明度。
• 文本提示（如文本字段和标签中的文本提示）和禁用文本的视觉突出性甚至更低，透明度为38％。

浅色背景上的黑色文本示例

黑色背景上的白色文本
表格中的值取决于黑色背景上的白色文本重要性的相对水平。出现在彩色背景上的白色文字应该以100％的不透明度显示。

黑色背景上的白色文本示例

用不透明度替代灰色
透明的黑色或白色文本相对于背景颜色的变化保持清晰，活泼。这使得它比同样上下文中的灰色文本更灵活。

不透明度替代灰色示例

图标和其他元素
像白色或黑色图标（而不是一个特定颜色）的元素可以在不透明度为38%的十六进制值上使用，使得它们在任何颜色的背景上表现良好。

图标和其他元素不透明度参数

---

主题

主题可以让您的应用程序拥有一致的意境。主题指定表面的暗度，阴影的水平和墨水元素适当的不透明度。为了提高应用程序之间的一致性，可以选择浅色和深色主题。

浅色调主题

1. 状态栏
2. 应用栏
3. 背景
4. 卡片/对话框

浅色调主题配色

浅色调主题示例

暗色调主题

1. 状态栏
2. 应用栏
3. 背景
4. 卡片/对话框

暗色调主题配色

暗色调主题示例