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。
    
    
    
    
    
    
    

配色方案

1. 选择一个调色板

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

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

2.选取材料颜色

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

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

应用程序示例

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

• 基础色（或主调色）：该颜色应该尽可能的应用在所有界面或组件中。

• 合成色：该颜色被用来指示相关动作或信息。合成色可以是基础色更暗或更浅的变体颜色。
  
  （基础色）合成色100 #C5CAE9

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

  • 文本字段和游标
  • 文本选择
  • 进度条
  • 选择控件，按钮和滑块
  • 链接
    浮动操作按钮 & 切换按钮

以下是一些使用示例：

文本中的超链接

应用栏上的按钮


状态栏 & 应用栏 & 按钮

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

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

  • 使用更深或更浅的强调色。
    
    备选强调色示例

• 使用基础色的变体色

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