_color-palette.scss
ASCII text
1
// Based on 2014 Material Design color palettes:
2
// https://material.io/design/color/#tools-for-picking-colors
3
4
// Red
5
$red-50: #FFEBEE;
6
$red-100: #FFCDD2;
7
$red-200: #EF9A9A;
8
$red-300: #E57373;
9
$red-400: #EF5350;
10
$red-500: #F44336;
11
$red-600: #E53935;
12
$red-700: #D32F2F;
13
$red-800: #C62828;
14
$red-900: #B71C1C;
15
$red-a100: #FF8A80;
16
$red-a200: #FF5252;
17
$red-a400: #FF1744;
18
$red-a700: #D50000;
19
20
// Pink
21
$pink-50: #FCE4EC;
22
$pink-100: #F8BBD0;
23
$pink-200: #F48FB1;
24
$pink-300: #F06292;
25
$pink-400: #EC407A;
26
$pink-500: #E91E63;
27
$pink-600: #D81B60;
28
$pink-700: #C2185B;
29
$pink-800: #AD1457;
30
$pink-900: #880E4F;
31
$pink-a100: #FF80AB;
32
$pink-a200: #FF4081;
33
$pink-a400: #F50057;
34
$pink-a700: #C51162;
35
36
// Purple
37
$purple-50: #F3E5F5;
38
$purple-100: #E1BEE7;
39
$purple-200: #CE93D8;
40
$purple-300: #BA68C8;
41
$purple-400: #AB47BC;
42
$purple-500: #9C27B0;
43
$purple-600: #8E24AA;
44
$purple-700: #7B1FA2;
45
$purple-800: #6A1B9A;
46
$purple-900: #4A148C;
47
$purple-a100: #EA80FC;
48
$purple-a200: #E040FB;
49
$purple-a400: #D500F9;
50
$purple-a700: #AA00FF;
51
52
// Deep Purple
53
$deep-purple-50: #EDE7F6;
54
$deep-purple-100: #D1C4E9;
55
$deep-purple-200: #B39DDB;
56
$deep-purple-300: #9575CD;
57
$deep-purple-400: #7E57C2;
58
$deep-purple-500: #673AB7;
59
$deep-purple-600: #5E35B1;
60
$deep-purple-700: #512DA8;
61
$deep-purple-800: #4527A0;
62
$deep-purple-900: #311B92;
63
$deep-purple-a100: #B388FF;
64
$deep-purple-a200: #7C4DFF;
65
$deep-purple-a400: #651FFF;
66
$deep-purple-a700: #6200EA;
67
68
// Indigo
69
$indigo-50: #E8EAF6;
70
$indigo-100: #C5CAE9;
71
$indigo-200: #9FA8DA;
72
$indigo-300: #7986CB;
73
$indigo-400: #5C6BC0;
74
$indigo-500: #3F51B5;
75
$indigo-600: #3949AB;
76
$indigo-700: #303F9F;
77
$indigo-800: #283593;
78
$indigo-900: #1A237E;
79
$indigo-a100: #8C9EFF;
80
$indigo-a200: #536DFE;
81
$indigo-a400: #3D5AFE;
82
$indigo-a700: #304FFE;
83
84
// Blue
85
$blue-50: #E3F2FD;
86
$blue-100: #BBDEFB;
87
$blue-200: #90CAF9;
88
$blue-300: #64B5F6;
89
$blue-400: #42A5F5;
90
$blue-500: #2196F3;
91
$blue-600: #1E88E5;
92
$blue-700: #1976D2;
93
$blue-800: #1565C0;
94
$blue-900: #0D47A1;
95
$blue-a100: #82B1FF;
96
$blue-a200: #448AFF;
97
$blue-a400: #2979FF;
98
$blue-a700: #2962FF;
99
100
// Light Blue
101
$light-blue-50: #E1F5FE;
102
$light-blue-100: #B3E5FC;
103
$light-blue-200: #81D4FA;
104
$light-blue-300: #4FC3F7;
105
$light-blue-400: #29B6F6;
106
$light-blue-500: #03A9F4;
107
$light-blue-600: #039BE5;
108
$light-blue-700: #0288D1;
109
$light-blue-800: #0277BD;
110
$light-blue-900: #01579B;
111
$light-blue-a100: #80D8FF;
112
$light-blue-a200: #40C4FF;
113
$light-blue-a400: #00B0FF;
114
$light-blue-a700: #0091EA;
115
116
// Cyan
117
$cyan-50: #E0F7FA;
118
$cyan-100: #B2EBF2;
119
$cyan-200: #80DEEA;
120
$cyan-300: #4DD0E1;
121
$cyan-400: #26C6DA;
122
$cyan-500: #00BCD4;
123
$cyan-600: #00ACC1;
124
$cyan-700: #0097A7;
125
$cyan-800: #00838F;
126
$cyan-900: #006064;
127
$cyan-a100: #84FFFF;
128
$cyan-a200: #18FFFF;
129
$cyan-a400: #00E5FF;
130
$cyan-a700: #00B8D4;
131
132
// Teal
133
$teal-50: #E0F2F1;
134
$teal-100: #B2DFDB;
135
$teal-200: #80CBC4;
136
$teal-300: #4DB6AC;
137
$teal-400: #26A69A;
138
$teal-500: #009688;
139
$teal-600: #00897B;
140
$teal-700: #00796B;
141
$teal-800: #00695C;
142
$teal-900: #004D40;
143
$teal-a100: #A7FFEB;
144
$teal-a200: #64FFDA;
145
$teal-a400: #1DE9B6;
146
$teal-a700: #00BFA5;
147
148
// Green
149
$green-50: #E8F5E9;
150
$green-100: #C8E6C9;
151
$green-200: #A5D6A7;
152
$green-300: #81C784;
153
$green-400: #66BB6A;
154
$green-500: #4CAF50;
155
$green-600: #43A047;
156
$green-700: #388E3C;
157
$green-800: #2E7D32;
158
$green-900: #1B5E20;
159
$green-a100: #B9F6CA;
160
$green-a200: #69F0AE;
161
$green-a400: #00E676;
162
$green-a700: #00C853;
163
164
// Light Green
165
$light-green-50: #F1F8E9;
166
$light-green-100: #DCEDC8;
167
$light-green-200: #C5E1A5;
168
$light-green-300: #AED581;
169
$light-green-400: #9CCC65;
170
$light-green-500: #8BC34A;
171
$light-green-600: #7CB342;
172
$light-green-700: #689F38;
173
$light-green-800: #558B2F;
174
$light-green-900: #33691E;
175
$light-green-a100: #CCFF90;
176
$light-green-a200: #B2FF59;
177
$light-green-a400: #76FF03;
178
$light-green-a700: #64DD17;
179
180
// Lime
181
$lime-50: #F9FBE7;
182
$lime-100: #F0F4C3;
183
$lime-200: #E6EE9C;
184
$lime-300: #DCE775;
185
$lime-400: #D4E157;
186
$lime-500: #CDDC39;
187
$lime-600: #C0CA33;
188
$lime-700: #AFB42B;
189
$lime-800: #9E9D24;
190
$lime-900: #827717;
191
$lime-a100: #F4FF81;
192
$lime-a200: #EEFF41;
193
$lime-a400: #C6FF00;
194
$lime-a700: #AEEA00;
195
196
// Yellow
197
$yellow-50: #FFFDE7;
198
$yellow-100: #FFF9C4;
199
$yellow-200: #FFF59D;
200
$yellow-300: #FFF176;
201
$yellow-400: #FFEE58;
202
$yellow-500: #FFEB3B;
203
$yellow-600: #FDD835;
204
$yellow-700: #FBC02D;
205
$yellow-800: #F9A825;
206
$yellow-900: #F57F17;
207
$yellow-a100: #FFFF8D;
208
$yellow-a200: #FFFF00;
209
$yellow-a400: #FFEA00;
210
$yellow-a700: #FFD600;
211
212
// Amber
213
$amber-50: #FFF8E1;
214
$amber-100: #FFECB3;
215
$amber-200: #FFE082;
216
$amber-300: #FFD54F;
217
$amber-400: #FFCA28;
218
$amber-500: #FFC107;
219
$amber-600: #FFB300;
220
$amber-700: #FFA000;
221
$amber-800: #FF8F00;
222
$amber-900: #FF6F00;
223
$amber-a100: #FFE57F;
224
$amber-a200: #FFD740;
225
$amber-a400: #FFC400;
226
$amber-a700: #FFAB00;
227
228
// Orange
229
$orange-50: #FFF3E0;
230
$orange-100: #FFE0B2;
231
$orange-200: #FFCC80;
232
$orange-300: #FFB74D;
233
$orange-400: #FFA726;
234
$orange-500: #FF9800;
235
$orange-600: #FB8C00;
236
$orange-700: #F57C00;
237
$orange-800: #EF6C00;
238
$orange-900: #E65100;
239
$orange-a100: #FFD180;
240
$orange-a200: #FFAB40;
241
$orange-a400: #FF9100;
242
$orange-a700: #FF6D00;
243
244
// Deep Orange
245
$deep-orange-50: #FBE9E7;
246
$deep-orange-100: #FFCCBC;
247
$deep-orange-200: #FFAB91;
248
$deep-orange-300: #FF8A65;
249
$deep-orange-400: #FF7043;
250
$deep-orange-500: #FF5722;
251
$deep-orange-600: #F4511E;
252
$deep-orange-700: #E64A19;
253
$deep-orange-800: #D84315;
254
$deep-orange-900: #BF360C;
255
$deep-orange-a100: #FF9E80;
256
$deep-orange-a200: #FF6E40;
257
$deep-orange-a400: #FF3D00;
258
$deep-orange-a700: #DD2C00;
259
260
// Brown
261
$brown-50: #EFEBE9;
262
$brown-100: #D7CCC8;
263
$brown-200: #BCAAA4;
264
$brown-300: #A1887F;
265
$brown-400: #8D6E63;
266
$brown-500: #795548;
267
$brown-600: #6D4C41;
268
$brown-700: #5D4037;
269
$brown-800: #4E342E;
270
$brown-900: #3E2723;
271
272
// Grey
273
$grey-50: #FAFAFA;
274
$grey-100: #F5F5F5;
275
$grey-200: #EEEEEE;
276
$grey-300: #E0E0E0;
277
$grey-400: #BDBDBD;
278
$grey-500: #9E9E9E;
279
$grey-600: #757575;
280
$grey-700: #616161;
281
$grey-800: #424242;
282
$grey-900: #212121;
283
284
// Blue Grey
285
$blue-grey-50: #ECEFF1;
286
$blue-grey-100: #CFD8DC;
287
$blue-grey-200: #B0BEC5;
288
$blue-grey-300: #90A4AE;
289
$blue-grey-400: #78909C;
290
$blue-grey-500: #607D8B;
291
$blue-grey-600: #546E7A;
292
$blue-grey-700: #455A64;
293
$blue-grey-800: #37474F;
294
$blue-grey-900: #263238;
295
296
// Black
297
$black: #000000;
298
299
// White
300
$white: #FFFFFF;
301