UI色板（附色板下载）
色彩
Material设计语言中，所使用的色彩鲜活，能够完美搭配柔和的背景环境。取色灵感来自当代减除、路标、道路的减速带、操场。通过浓厚的阴影和强烈地高光强调。带来一种惊喜和缤纷的色彩。
UI色板
这份色板每一张均从基本颜色开始，然后逐渐扩充，创建出一套完整、可复用的配色体系，可用于网页设计、安卓设计和iOS设计。500种选择
- 红色 Red500#e51c23
- 50#fde0dc
- 100#f9bdbb
- 200#f69988
- 300#f36c60
- 400#e84e40
- 500#e51c23
- 600#dd191d
- 700#d01716
- 800#c41411
- 900#b0120a
- A100#ff7997
- A200#ff5177
- A400#ff2d6f
- A700#e00032
- 粉红色 Pink500#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
- 紫色 Purple500#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 Purple500#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
- 靛蓝 Indigo500#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
- 蓝色 Blue500#5677fc
- 50#e7e9fd
- 100#d0d9ff
- 200#afbfff
- 300#91a7ff
- 400#738ffe
- 500#5677fc
- 600#4e6cef
- 700#455ede
- 800#3b50ce
- 900#2a36b1
- A100#a6baff
- A200#6889ff
- A400#4d73ff
- A700#4d69ff
- 浅蓝色 Light Blue500#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
- 青色 Cyan500#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
- 蓝绿色 Teal500#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
- 绿色 Green500#259b24
- 50#d0f8ce
- 100#a3e9a4
- 200#72d572
- 300#42bd41
- 400#2baf2b
- 500#259b24
- 600#0a8f08
- 700#0a7e07
- 800#056f00
- 900#0d5302
- A100#a2f78d
- A200#5af158
- A400#14e715
- A700#12c700
- 浅绿色 Light Green500#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
- 青橙绿色 Lime500#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
- 黄色 Yellow500#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
- 琥珀色 Amber500#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
- 橙色 Orange500#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 Orange500#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
- 棕色Brown500#795548
- 50#efebe9
- 100#d7ccc8
- 200#bcaaa4
- 300#a1887f
- 400#8d6e63
- 500#795548
- 600#6d4c41
- 700#5d4037
- 800#4e342e
- 900#3e2723
- 灰色 Grey500#9e9e9e
- 50#fafafa
- 100#f5f5f5
- 200#eeeeee
- 300#e0e0e0
- 400#bdbdbd
- 500#9e9e9e
- 600#757575
- 700#616161
- 800#424242
- 900#212121
- 1000#000000
- 1000#ffffff
- 蓝灰色Blue Grey500#607d8b
- 50#eceff1
- 100#cfd8dc
- 200#b0bec5
- 300#90a4ae
- 400#78909c
- 500#607d8b
- 600#546e7a
- 700#455a64
- 800#37474f
- 900#263238
UI 中的色彩应用
1.选择配色合理的配色板
先选主色，色调限制在3种之内。在第二张色板中再选择强调色。强调色在后面的使用中可能会发生改变。
2.文本、图标、分割线要设置透明度
为了打造更高效的信息层级，文本要使用不同色调。白色背景中，标准的文本透明度是87%(#000000)。而次级文本/图标，不透明度应该是48% (#000000)。提示文本，处于还要更低的视觉层级，那么不透明度是24% (#000000).
其他元素，比如说图标和分割线，也应该设置透明度，效果要比纯色好，这样的透明度设置（下图），能适应任何背景色。
而有色背景上的黑白色文本，请参考上图的配色表，来设置透明度，提高对比感。
推荐在界面设计中，在较为大块的区域大胆拥塞。界面中的不同元素采用不同的色彩主题。如下图，工具栏，以及较为大块的区域，采用了500蓝这种主色。这是应用的主色，而状态栏采用了700蓝，比主色稍深。
3.强调色
靓丽的强调色可被用来当做按钮和控件，例如开关和滑块。左对齐的选项（或是图标，或是标题）也可以采用强调色。
4.调整强调色
如果你的强调色过暗或过淡，那么可以调整强调色的明暗。如果你的强调色不起作用，那么干脆在白色背景上使用主色500蓝，如果背景色是主色500蓝，那么可以尝试使用透明度100%的白色，或者54%的黑色。
色彩主题
确定色彩主题能让应用的视觉保持一致。色彩样式风格决定了物体表面墨水效果的明暗度，阴影的强度。这里建议两种风格的色彩主题
- 明亮
- 深邃
AI文件下载见文末
UI色板：
原文作者：Google
=========================关于学ui网=========================
xueui.cn 学ui网发布高质量ui设计教程和设计分享，希望打造一个最好的ui学习教程平台！
APP截图站：app.xueui.cn海量APP截图，让你灵感爆发！
