Material Design Color

Posted on | Visitors:

Material Design 颜色参考。

调色板 [Google官网文档(需要科学上网)]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="Red_50">  #FFEBEE</color>
    <color name="Red_100"> #FFCDD2</color>
    <color name="Red_200"> #EF9A9A</color>
    <color name="Red_300"> #E57373</color>
    <color name="Red_400"> #EF5350</color>
    <color name="Red_500"> #F44336</color>
    <color name="Red_600"> #E53935</color>
    <color name="Red_700"> #D32F2F</color>
    <color name="Red_800"> #C62828</color>
    <color name="Red_900"> #B71C1C</color>
    <color name="Red_A100">#FF8A80</color>
    <color name="Red_A200">#FF5252</color>
    <color name="Red_A400">#FF1744</color>
    <color name="Red_A700">#D50000</color>

    <color name="Pink_50">  #FCE4EC</color>
    <color name="Pink_100"> #F8BBD0</color>
    <color name="Pink_200"> #F48FB1</color>
    <color name="Pink_300"> #F06292</color>
    <color name="Pink_400"> #EC407A</color>
    <color name="Pink_500"> #E91E63</color>
    <color name="Pink_600"> #D81B60</color>
    <color name="Pink_700"> #C2185B</color>
    <color name="Pink_800"> #AD1457</color>
    <color name="Pink_900"> #880E4F</color>
    <color name="Pink_A100">#FF80AB</color>
    <color name="Pink_A200">#FF4081</color>
    <color name="Pink_A400">#F50057</color>
    <color name="Pink_A700">#C51162</color>

    <color name="Purple_50">  #F3E5F5</color>
    <color name="Purple_100"> #E1BEE7</color>
    <color name="Purple_200"> #CE93D8</color>
    <color name="Purple_300"> #BA68C8</color>
    <color name="Purple_400"> #AB47BC</color>
    <color name="Purple_500"> #9C27B0</color>
    <color name="Purple_600"> #8E24AA</color>
    <color name="Purple_700"> #7B1FA2</color>
    <color name="Purple_800"> #6A1B9A</color>
    <color name="Purple_900"> #4A148C</color>
    <color name="Purple_A100">#EA80FC</color>
    <color name="Purple_A200">#E040FB</color>
    <color name="Purple_A400">#D500F9</color>
    <color name="Purple_A700">#AA00FF</color>

    <color name="DeepPurple_50">  #EDE7F6</color>
    <color name="DeepPurple_100"> #D1C4E9</color>
    <color name="DeepPurple_200"> #B39DDB</color>
    <color name="DeepPurple_300"> #9575CD</color>
    <color name="DeepPurple_400"> #7E57C2</color>
    <color name="DeepPurple_500"> #673AB7</color>
    <color name="DeepPurple_600"> #5E35B1</color>
    <color name="DeepPurple_700"> #512DA8</color>
    <color name="DeepPurple_800"> #4527A0</color>
    <color name="DeepPurple_900"> #311B92</color>
    <color name="DeepPurple_A100">#B388FF</color>
    <color name="DeepPurple_A200">#7C4DFF</color>
    <color name="DeepPurple_A400">#651FFF</color>
    <color name="DeepPurple_A700">#6200EA</color>

    <color name="Indigo_50">  #E8EAF6</color>
    <color name="Indigo_100"> #C5CAE9</color>
    <color name="Indigo_200"> #9FA8DA</color>
    <color name="Indigo_300"> #7986CB</color>
    <color name="Indigo_400"> #5C6BC0</color>
    <color name="Indigo_500"> #3F51B5</color>
    <color name="Indigo_600"> #3949AB</color>
    <color name="Indigo_700"> #303F9F</color>
    <color name="Indigo_800"> #283593</color>
    <color name="Indigo_900"> #1A237E</color>
    <color name="Indigo_A100">#8C9EFF</color>
    <color name="Indigo_A200">#536DFE</color>
    <color name="Indigo_A400">#3D5AFE</color>
    <color name="Indigo_A700">#304FFE</color>

    <color name="Blue_50">  #E3F2FD</color>
    <color name="Blue_100"> #BBDEFB</color>
    <color name="Blue_200"> #90CAF9</color>
    <color name="Blue_300"> #64B5F6</color>
    <color name="Blue_400"> #42A5F5</color>
    <color name="Blue_500"> #2196F3</color>
    <color name="Blue_600"> #1E88E5</color>
    <color name="Blue_700"> #1976D2</color>
    <color name="Blue_800"> #1565C0</color>
    <color name="Blue_900"> #0D47A1</color>
    <color name="Blue_A100">#82B1FF</color>
    <color name="Blue_A200">#448AFF</color>
    <color name="Blue_A400">#2979FF</color>
    <color name="Blue_A700">#2962FF</color>

    <color name="LightBlue_50">  #E1F5FE</color>
    <color name="LightBlue_100"> #B3E5FC</color>
    <color name="LightBlue_200"> #81D4FA</color>
    <color name="LightBlue_300"> #4FC3F7</color>
    <color name="LightBlue_400"> #29B6F6</color>
    <color name="LightBlue_500"> #03A9F4</color>
    <color name="LightBlue_600"> #039BE5</color>
    <color name="LightBlue_700"> #0288D1</color>
    <color name="LightBlue_800"> #0277BD</color>
    <color name="LightBlue_900"> #01579B</color>
    <color name="LightBlue_A100">#80D8FF</color>
    <color name="LightBlue_A200">#40C4FF</color>
    <color name="LightBlue_A400">#00B0FF</color>
    <color name="LightBlue_A700">#0091EA</color>

    <color name="Cyan_50">  #E0F7FA</color>
    <color name="Cyan_100"> #B2EBF2</color>
    <color name="Cyan_200"> #80DEEA</color>
    <color name="Cyan_300"> #4DD0E1</color>
    <color name="Cyan_400"> #26C6DA</color>
    <color name="Cyan_500"> #00BCD4</color>
    <color name="Cyan_600"> #00ACC1</color>
    <color name="Cyan_700"> #0097A7</color>
    <color name="Cyan_800"> #00838F</color>
    <color name="Cyan_900"> #006064</color>
    <color name="Cyan_A100">#84FFFF</color>
    <color name="Cyan_A200">#18FFFF</color>
    <color name="Cyan_A400">#00E5FF</color>
    <color name="Cyan_A700">#00B8D4</color>

    <color name="Teal_50">  #E0F2F1</color>
    <color name="Teal_100"> #B2DFDB</color>
    <color name="Teal_200"> #80CBC4</color>
    <color name="Teal_300"> #4DB6AC</color>
    <color name="Teal_400"> #26A69A</color>
    <color name="Teal_500"> #009688</color>
    <color name="Teal_600"> #00897B</color>
    <color name="Teal_700"> #00796B</color>
    <color name="Teal_800"> #00695C</color>
    <color name="Teal_900"> #004D40</color>
    <color name="Teal_A100">#A7FFEB</color>
    <color name="Teal_A200">#64FFDA</color>
    <color name="Teal_A400">#1DE9B6</color>
    <color name="Teal_A700">#00BFA5</color>

    <color name="Green_50">  #E8F5E9</color>
    <color name="Green_100"> #C8E6C9</color>
    <color name="Green_200"> #A5D6A7</color>
    <color name="Green_300"> #81C784</color>
    <color name="Green_400"> #66BB6A</color>
    <color name="Green_500"> #4CAF50</color>
    <color name="Green_600"> #43A047</color>
    <color name="Green_700"> #388E3C</color>
    <color name="Green_800"> #2E7D32</color>
    <color name="Green_900"> #1B5E20</color>
    <color name="Green_A100">#B9F6CA</color>
    <color name="Green_A200">#69F0AE</color>
    <color name="Green_A400">#00E676</color>
    <color name="Green_A700">#00C853</color>

    <color name="LightGreen_50">  #F1F8E9</color>
    <color name="LightGreen_100"> #DCEDC8</color>
    <color name="LightGreen_200"> #C5E1A5</color>
    <color name="LightGreen_300"> #AED581</color>
    <color name="LightGreen_400"> #9CCC65</color>
    <color name="LightGreen_500"> #8BC34A</color>
    <color name="LightGreen_600"> #7CB342</color>
    <color name="LightGreen_700"> #689F38</color>
    <color name="LightGreen_800"> #558B2F</color>
    <color name="LightGreen_900"> #33691E</color>
    <color name="LightGreen_A100">#CCFF90</color>
    <color name="LightGreen_A200">#B2FF59</color>
    <color name="LightGreen_A400">#76FF03</color>
    <color name="LightGreen_A700">#64DD17</color>

    <color name="Lime_50">  #F9FBE7</color>
    <color name="Lime_100"> #F0F4C3</color>
    <color name="Lime_200"> #E6EE9C</color>
    <color name="Lime_300"> #DCE775</color>
    <color name="Lime_400"> #D4E157</color>
    <color name="Lime_500"> #CDDC39</color>
    <color name="Lime_600"> #C0CA33</color>
    <color name="Lime_700"> #AFB42B</color>
    <color name="Lime_800"> #9E9D24</color>
    <color name="Lime_900"> #827717</color>
    <color name="Lime_A100">#F4FF81</color>
    <color name="Lime_A200">#EEFF41</color>
    <color name="Lime_A400">#C6FF00</color>
    <color name="Lime_A700">#AEEA00</color>

    <color name="Yellow_50">  #FFFDE7</color>
    <color name="Yellow_100"> #FFF9C4</color>
    <color name="Yellow_200"> #FFF59D</color>
    <color name="Yellow_300"> #FFF176</color>
    <color name="Yellow_400"> #FFEE58</color>
    <color name="Yellow_500"> #FFEB3B</color>
    <color name="Yellow_600"> #FDD835</color>
    <color name="Yellow_700"> #FBC02D</color>
    <color name="Yellow_800"> #F9A825</color>
    <color name="Yellow_900"> #F57F17</color>
    <color name="Yellow_A100">#FFFF8D</color>
    <color name="Yellow_A200">#FFFF00</color>
    <color name="Yellow_A400">#FFEA00</color>
    <color name="Yellow_A700">#FFD600</color>

    <color name="Amber_50">  #FFF8E1</color>
    <color name="Amber_100"> #FFECB3</color>
    <color name="Amber_200"> #FFE082</color>
    <color name="Amber_300"> #FFD54F</color>
    <color name="Amber_400"> #FFCA28</color>
    <color name="Amber_500"> #FFC107</color>
    <color name="Amber_600"> #FFB300</color>
    <color name="Amber_700"> #FFA000</color>
    <color name="Amber_800"> #FF8F00</color>
    <color name="Amber_900"> #FF6F00</color>
    <color name="Amber_A100">#FFE57F</color>
    <color name="Amber_A200">#FFD740</color>
    <color name="Amber_A400">#FFC400</color>
    <color name="Amber_A700">#FFAB00</color>

    <color name="Orange_50">  #FFF3E0</color>
    <color name="Orange_100"> #FFE0B2</color>
    <color name="Orange_200"> #FFCC80</color>
    <color name="Orange_300"> #FFB74D</color>
    <color name="Orange_400"> #FFA726</color>
    <color name="Orange_500"> #FF9800</color>
    <color name="Orange_600"> #FB8C00</color>
    <color name="Orange_700"> #F57C00</color>
    <color name="Orange_800"> #EF6C00</color>
    <color name="Orange_900"> #E65100</color>
    <color name="Orange_A100">#FFD180</color>
    <color name="Orange_A200">#FFAB40</color>
    <color name="Orange_A400">#FF9100</color>
    <color name="Orange_A700">#FF6D00</color>

    <color name="DeepOrange_50">  #FBE9E7</color>
    <color name="DeepOrange_100"> #FFCCBC</color>
    <color name="DeepOrange_200"> #FFAB91</color>
    <color name="DeepOrange_300"> #FF8A65</color>
    <color name="DeepOrange_400"> #FF7043</color>
    <color name="DeepOrange_500"> #FF5722</color>
    <color name="DeepOrange_600"> #F4511E</color>
    <color name="DeepOrange_700"> #E64A19</color>
    <color name="DeepOrange_800"> #D84315</color>
    <color name="DeepOrange_900"> #BF360C</color>
    <color name="DeepOrange_A100">#FF9E80</color>
    <color name="DeepOrange_A200">#FF6E40</color>
    <color name="DeepOrange_A400">#FF3D00</color>
    <color name="DeepOrange_A700">#DD2C00</color>

    <color name="Brown_50"> #EFEBE9</color>
    <color name="Brown_100">#D7CCC8</color>
    <color name="Brown_200">#BCAAA4</color>
    <color name="Brown_300">#A1887F</color>
    <color name="Brown_400">#8D6E63</color>
    <color name="Brown_500">#795548</color>
    <color name="Brown_600">#6D4C41</color>
    <color name="Brown_700">#5D4037</color>
    <color name="Brown_800">#4E342E</color>
    <color name="Brown_900">#3E2723</color>

    <color name="Grey_50"> #FAFAFA</color>
    <color name="Grey_100">#F5F5F5</color>
    <color name="Grey_200">#EEEEEE</color>
    <color name="Grey_300">#E0E0E0</color>
    <color name="Grey_400">#BDBDBD</color>
    <color name="Grey_500">#9E9E9E</color>
    <color name="Grey_600">#757575</color>
    <color name="Grey_700">#616161</color>
    <color name="Grey_800">#424242</color>
    <color name="Grey_900">#212121</color>

    <color name="BlueGrey_50"> #ECEFF1</color>
    <color name="BlueGrey_100">#CFD8DC</color>
    <color name="BlueGrey_200">#B0BEC5</color>
    <color name="BlueGrey_300">#90A4AE</color>
    <color name="BlueGrey_400">#78909C</color>
    <color name="BlueGrey_500">#607D8B</color>
    <color name="BlueGrey_600">#546E7A</color>
    <color name="BlueGrey_700">#455A64</color>
    <color name="BlueGrey_800">#37474F</color>
    <color name="BlueGrey_900">#263238</color>

    <color name="Black">#000000</color>
    <color name="White">#FFFFFF</color>
</resources>

几个关键颜色的用法

整体颜色

颜色 色号 适用场景
Primary color (基色,原色) 500 / 700 / 100 1. 屏幕中使用最广
2. 一般会配一个深色或浅色的色号colorPrimaryDark
Secondary color (间色) 1. 用于标明相关的动作或者信息
2. 一般是主色调的一个更深或更浅的颜色变化
Accent color (重点色) A200 / A400 / A100 重点色一班用于FAB和互动的元素(文本、游标、文本选择、进度条、选择控制器、按钮、滑动器、连接)
Alternative accent colors (备用重点色) 对于背景颜色太亮或太暗时，使用较暗或较亮的颜色替代
Primary color variations (原色变化) 500 1. 另一种替代重点色的方案是使用原色的500色号
2. 如果原色已经是500色号了，那么就使用100%的白色或者54%的黑色

浅色背景下的深色文字

Dark text （#000000） Opacity
Primary text （重要文字） 87%
Secondary text （次要文字） 54%
Disabled text, hint text, and icons 38%
Dividers （分割线） 12%
Primary text#00000087%
Secondary text#00000054%
Disabled/Hint text#00000038%
Primary color#3E50B4100%
Accent　color#FF3F80100%

深色背景下的白色文字

Dark text （#000000） Opacity
Primary text （重要文字） 100%
Secondary text （次要文字） 70%
Disabled text, hint text, and icons 50%
Dividers （分割线） 12%
Primary text#FFFFFF100%
Secondary text#FFFFFF70%
Disabled / Hint text#FFFFFF50%
Primary color#3E50B4100%
Accent color#FF3F80100%

使用透明度替代灰色

  • 黑色的文字，设置不透明度为0.54，但是要保证文字和背景的和谐

Icons和其他元素

Dark icons (#000000)暗色图标 Opacity 透明度
Active icon 活动图标 54%
Inactive icon 无效图标 38%
Light icons (#FFFFFF)亮色图标 Opacity 透明度
Active icon 活动图标 100%
Inactive icon 无效图标 50%

示例主题

样式统一色系

Light theme 亮色主题

位置 色度
Status bar（1 状态栏） 300
App bar（2 应用程序栏） 100
Background（3 背景） 50
Cards/Dialogs（4 卡片/警告栏） White

Dark theme 暗色主题

位置 色度
Status bar（1 状态栏） Black 100%
App bar（2 应用程序栏） 900
Background（3 背景） #303030
Cards/Dialogs（4 卡片/警告栏） 800