样式 颜色

颜色

Material Design 中的配色灵感来源于大胆的色调与柔和的环境对比、阴影与高光的对比。

调色板 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

材料从现代建筑、路标、路面标记和运动场所获取灵感。颜色应该是充满了惊喜和活力。

该调色板包含了主体色和强调色,可以用来绘制插画或者设计属于你的品牌色。这些经过设计的颜色可以灵活的搭配。并且适配了 Android、Web 和 iOS,调色板由主体色开始,根据光谱填充成完整可用的调色板。Google 建议使用 500 色号的颜色作为主体色,其他颜色作为强调色。

主题通过设定表面的色度、阴影的深度以及墨迹的透明度来构建统一的视觉样式。

  • Red 500 #f44336
  • 50#ffebee
  • 100#ffcdd2
  • 200#ef9a9a
  • 300#e57373
  • 400#ef5350
  • 500#f44336
  • 600#e53935
  • 700#d32f2f
  • 800#c62828
  • 900#b71c1c
  • A100#ff8a80
  • A200#ff5252
  • A400#ff1744
  • A700#d50000
  • Pink 500 #e91e63
  • 50#fce4ec
  • 100#f8bbd0
  • 200#f48fb1
  • 300#f06292
  • 400#ec407a
  • 500#e91e63
  • 600#d81b60
  • 700#c2185b
  • 800#ad1457
  • 900#880e4f
  • A100#ff80ab
  • A200#ff4081
  • A400#f50057
  • A700#c51162
  • Purple 500 #9c27b0
  • 50#f3e5f5
  • 100#e1bee7
  • 200#ce93d8
  • 300#ba68c8
  • 400#ab47bc
  • 500#9c27b0
  • 600#8e24aa
  • 700#7b1fa2
  • 800#6a1b9a
  • 900#4a148c
  • A100#ea80fc
  • A200#e040fb
  • A400#d500f9
  • A700#aa00ff
  • Deep Purple 500 #673ab7
  • 50#ede7f6
  • 100#d1c4e9
  • 200#b39ddb
  • 300#9575cd
  • 400#7e57c2
  • 500#673ab7
  • 600#5e35b1
  • 700#512da8
  • 800#4527a0
  • 900#311b92
  • A100#b388ff
  • A200#7c4dff
  • A400#651fff
  • A700#6200ea
  • Indigo 500 #3f51b5
  • 50#e8eaf6
  • 100#c5cae9
  • 200#9fa8da
  • 300#7986cb
  • 400#5c6bc0
  • 500#3f51b5
  • 600#3949ab
  • 700#303f9f
  • 800#283593
  • 900#1a237e
  • A100#8c9eff
  • A200#536dfe
  • A400#3d5afe
  • A700#304ffe
  • Blue 500 #2196f3
  • 50#e3f2fd
  • 100#bbdefb
  • 200#90caf9
  • 300#64b5f6
  • 400#42a5f5
  • 500#2196f3
  • 600#1e88e5
  • 700#1976d2
  • 800#1565c0
  • 900#0d47a1
  • A100#82b1ff
  • A200#448aff
  • A400#2979ff
  • A700#2962ff
  • Light Blue 500 #03a9f4
  • 50#e1f5fe
  • 100#b3e5fc
  • 200#81d4fa
  • 300#4fc3f7
  • 400#29b6f6
  • 500#03a9f4
  • 600#039be5
  • 700#0288d1
  • 800#0277bd
  • 900#01579b
  • A100#80d8ff
  • A200#40c4ff
  • A400#00b0ff
  • A700#0091ea
  • Cyan 500 #00bcd4
  • 50#e0f7fa
  • 100#b2ebf2
  • 200#80deea
  • 300#4dd0e1
  • 400#26c6da
  • 500#00bcd4
  • 600#00acc1
  • 700#0097a7
  • 800#00838f
  • 900#006064
  • A100#84ffff
  • A200#18ffff
  • A400#00e5ff
  • A700#00b8d4
  • Teal 500 #009688
  • 50#e0f2f1
  • 100#b2dfdb
  • 200#80cbc4
  • 300#4db6ac
  • 400#26a69a
  • 500#009688
  • 600#00897b
  • 700#00796b
  • 800#00695c
  • 900#004d40
  • A100#a7ffeb
  • A200#64ffda
  • A400#1de9b6
  • A700#00bfa5
  • Green 500 #4caf50
  • 50#e8f5e9
  • 100#c8e6c9
  • 200#a5d6a7
  • 300#81c784
  • 400#66bb6a
  • 500#4caf50
  • 600#43a047
  • 700#388e3c
  • 800#2e7d32
  • 900#1b5e20
  • A100#b9f6ca
  • A200#69f0ae
  • A400#00e676
  • A700#00c853
  • Light Green 500 #8bc34a
  • 50#f1f8e9
  • 100#dcedc8
  • 200#c5e1a5
  • 300#aed581
  • 400#9ccc65
  • 500#8bc34a
  • 600#7cb342
  • 700#689f38
  • 800#558b2f
  • 900#33691e
  • A100#ccff90
  • A200#b2ff59
  • A400#76ff03
  • A700#64dd17
  • Lime 500 #cddc39
  • 50#f9fbe7
  • 100#f0f4c3
  • 200#e6ee9c
  • 300#dce775
  • 400#d4e157
  • 500#cddc39
  • 600#c0ca33
  • 700#afb42b
  • 800#9e9d24
  • 900#827717
  • A100#f4ff81
  • A200#eeff41
  • A400#c6ff00
  • A700#aeea00
  • Yellow 500 #ffeb3b
  • 50#fffde7
  • 100#fff9c4
  • 200#fff59d
  • 300#fff176
  • 400#ffee58
  • 500#ffeb3b
  • 600#fdd835
  • 700#fbc02d
  • 800#f9a825
  • 900#f57f17
  • A100#ffff8d
  • A200#ffff00
  • A400#ffea00
  • A700#ffd600
  • Amber 500 #ffc107
  • 50#fff8e1
  • 100#ffecb3
  • 200#ffe082
  • 300#ffd54f
  • 400#ffca28
  • 500#ffc107
  • 600#ffb300
  • 700#ffa000
  • 800#ff8f00
  • 900#ff6f00
  • A100#ffe57f
  • A200#ffd740
  • A400#ffc400
  • A700#ffab00
  • Orange 500 #ff9800
  • 50#fff3e0
  • 100#ffe0b2
  • 200#ffcc80
  • 300#ffb74d
  • 400#ffa726
  • 500#ff9800
  • 600#fb8c00
  • 700#f57c00
  • 800#ef6c00
  • 900#e65100
  • A100#ffd180
  • A200#ffab40
  • A400#ff9100
  • A700#ff6d00
  • Deep Orange 500 #ff5722
  • 50#fbe9e7
  • 100#ffccbc
  • 200#ffab91
  • 300#ff8a65
  • 400#ff7043
  • 500#ff5722
  • 600#f4511e
  • 700#e64a19
  • 800#d84315
  • 900#bf360c
  • A100#ff9e80
  • A200#ff6e40
  • A400#ff3d00
  • A700#dd2c00
  • Brown 500 #795548
  • 50#efebe9
  • 100#d7ccc8
  • 200#bcaaa4
  • 300#a1887f
  • 400#8d6e63
  • 500#795548
  • 600#6d4c41
  • 700#5d4037
  • 800#4e342e
  • 900#3e2723
  • Grey 500 #9e9e9e
  • 50#fafafa
  • 100#f5f5f5
  • 200#eeeeee
  • 300#e0e0e0
  • 400#bdbdbd
  • 500#9e9e9e
  • 600#757575
  • 700#616161
  • 800#424242
  • 900#212121
  • Blue Grey 500 #607d8b
  • 50#eceff1
  • 100#cfd8dc
  • 200#b0bec5
  • 300#90a4ae
  • 400#78909c
  • 500#607d8b
  • 600#546e7a
  • 700#455a64
  • 800#37474f
  • 900#263238
  • Black#000000
  • White#ffffff

配色方案 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

选择调色板

你可以在应用中使用定制的调色板,以适配你的品牌颜色,你可以选择单色或是黑白色、多彩的颜色或是中立的颜色。当然,你也可以使用 Material Design 的调色板。在不同的 UI 元素之间,颜色必须要有充足的对比。

使用 Material Design 的调色板

如果你还没有自己的品牌色,可以从 Material Design 的调色板中选择。你可以在主要面板中选择不超过 3 种色调,然后从次要面板中选择 1 个强调色。

示例:从主要面板中选择两种色调的紫色,以及一种强调绿色。

示例:UI 中的色彩应用。

主体色

调色板中的主体色应当被广泛的应用在多个屏幕和组件当中。

示例:当需要更暗或更亮的色调时,可以为主体色增添不同明暗度的色调。

次要颜色

次要的调色板可能被用在指示相关性的操作或内容上。

次要颜色一般是比主体色更深或更浅的同色系。

示例:当需要更暗或更亮的色调时,可以为次要颜色增添不同明暗度的色调。

强调色

强调色应当被用在浮动按钮或者可交互的元素中,包括:

  • 文本框和光标
  • 文本选中
  • 进度条
  • 选择控件、按钮、以及滑块
  • 链接

使用强调色的浮动按钮

使用强调色的开关

仅当文本为网页链接时才使用强调色。

不要为正文添加强调色。

在主要操作中使用强调色,比如主要按钮、其他组件比如开关和滑块。

不要在应用栏或其他地方大面积的使用强调色。避免在背景色中使用与浮动按钮相同的颜色。

应用栏、工具栏以及系统的状态栏均可以使用定制的强调色。 本示例中,工具栏使用 500 的靛蓝色,而状态栏使用 700 的靛蓝色。

网页链接和按钮可以可以使用定制的强调色。

文本框和选择控件可以使用定制的强调色。

文本选择可以使用定制的强调色。

替换强调色

更暗和更亮的色调

如果你的强调色对比背景色显得太亮,请使用稍暗的色调替代,如果太暗则使用稍亮的。

当强调色与背景的对比度太暗或太亮时,请使用备用的强调色。

不要使用与背景色对比不充分的强调色。

主体色的变化

如果背景是白色,另一个可用来替代强调色的方案是使用 500 的主体色。

如果你的背景色已经是 500 的主体色了,可以使用 100% 不透明的白色或者 54% 不透明的黑色。

文本与背景色 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

文本不透明度

文本使用不同的透明度来呈现哪些信息更重要。不透明的程度取决于你使用的是暗色背景还是亮色背景。

亮背景中的暗色文本

亮背景中的暗色文本,适用于以下不透明度:

  • 主要的文本不透明度为 87%。
  • 次要的文本在视觉优先级上稍低,不透明度为 54%。
  • 文本提示(比如文本框中的提示文本和标签)和不可用文本的视觉优先级更低,不透明度为 38%。

亮色背景中的暗色文本

暗色文本(#000000)

不透明度

主要文本

87%

次要文本

54%

不可用文本、提示文本和图标

38%

分割线

12%

暗色背景中的亮色文本

表格中的不透明度是相对于暗色背景中的亮色文本而言。

在有颜色的背景中使用白色文本时,其不透明度应当是 100%。

暗色背景中的亮色文本

亮色文本(#FFFFFF)

不透明度

主要文本

100%

次要文本

70%

不可用文本、提示文本和图标

50%

分割线

12%

使用不透明度而不是灰色

使用不透明的黑色或白色文本,可以保证在不同背景的变化中文本依然清晰和明显。相同情况下,不透明度的应用会比灰色更加灵活。

一旦背景从白色变成洋红色,灰色文本(HEX 值为 #727272)就变得难以阅读。

将黑色文本的不透明度设置为 0.54,可以保证在新背景中,文本的清晰度和协调性。

图标和其他元素

一些元素比如图标,得益于可以为黑白色的 HEX 值(而不是固定的颜色)设定 38% 的不透明度,所以它们可以很好的适配任何背景色。

暗色图标(#000000)

不透明度

激活的图标

54%

未激活的图标

38%

亮色图标(#FFFFFF)

不透明度

激活的图标

100%

未激活的图标

50%

主题 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

主题可以让你的应用保持统一的风格。主题的规格包括表面的明暗、阴影的层级以及墨水元素的不透明度。为了更好的适配各种场景,你可以选择亮色主体和暗色主题。

亮色主题

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

两色主体调色板

在 UI 中的应用

暗色主题

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

暗色主题调色板

在 UI 中的应用