@@ -52,6 +52,300 @@ The SharePoint color palette has been optimized for screens and devices, and to
52
52
53
53
<br />
54
54
55
- ## See also
56
55
56
+
57
+ ### Red
58
+
59
+ <table >
60
+ <tr >
61
+ <td style =" color :white ; background-color :#751b1e " >themeDarker: #751b1e</td >
62
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
63
+ </tr >
64
+ <tr >
65
+ <td style =" color :white ; background-color :#952226 " >themeDark: #952226</td >
66
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
67
+ </tr >
68
+ <tr >
69
+ <td style =" color :white ; background-color :#c02b30 " >themeDarkAlt: #c02b30</td >
70
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
71
+ </tr >
72
+ <tr >
73
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#d13438 " >themePrimary: #d13438</td >
74
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
75
+ </tr >
76
+ <tr >
77
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
78
+ </tr >
79
+ <tr >
80
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
81
+ </tr >
82
+ <tr >
83
+ <td style =" color :white ; background-color :#d6494d " >themeSecondary: #d6494d</td >
84
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
85
+ </tr >
86
+ <tr >
87
+ <td style =" color :black ; background-color :#ecaaac " >themeTertiary: #ecaaac</td >
88
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
89
+ </tr >
90
+ <tr >
91
+ <td style =" color :black ; background-color :#f6d6d8 " >themeLight: #f6d6d8</td >
92
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td ></tr >
93
+ <tr >
94
+ <td style =" color :black ; background-color :#faebeb " >themeLighter: #faebeb</td >
95
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
96
+ </tr >
97
+ <tr >
98
+ <td style =" color :black ; background-color :#fdf5f5 " >themeLighterAlt: #fdf5f5</td >
99
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
100
+ </tr >
101
+ </table >
102
+
103
+ <br />
104
+
105
+ ### Orange
106
+
107
+ <table >
108
+ <tr >
109
+ <td style =" color :white ; background-color :#6f2d09 " >themeDarker: #6f2d09</td >
110
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
111
+ </tr >
112
+ <tr >
113
+ <td style =" color :white ; background-color :#8d390b " >themeDark: #8d390b</td >
114
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
115
+ </tr >
116
+ <tr >
117
+ <td style =" color :white ; background-color :#b5490f " >themeDarkAlt: #b5490f</td >
118
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
119
+ </tr >
120
+ <tr >
121
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#ca5010 " >themePrimary: #ca5010</td >
122
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
123
+ </tr >
124
+ <tr >
125
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
126
+ </tr >
127
+ <tr >
128
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
129
+ </tr >
130
+ <tr >
131
+ <td style =" color :white ; background-color :#e55c12 " >themeSecondary: #e55c12</td >
132
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
133
+ </tr >
134
+ <tr >
135
+ <td style =" color :black ; background-color :#f6b28d " >themeTertiary: #f6b28d</td >
136
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
137
+ </tr >
138
+ <tr >
139
+ <td style =" color :black ; background-color :#fbdac9 " >themeLight: #fbdac9</td >
140
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td >
141
+ </tr >
142
+ <tr >
143
+ <td style =" color :black ; background-color :#fdede4 " >themeLighter: #fdede4</td >
144
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
145
+ </tr >
146
+ <tr >
147
+ <td style =" color :black ; background-color :#fef6f1 " >themeLighterAlt: #fef6f1</td >
148
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
149
+ </tr >
150
+ </table >
151
+
152
+ <br />
153
+
154
+ ### Green
155
+
156
+ <table >
157
+ <tr >
158
+ <td style =" color :white ; background-color :#094c23 " >themeDarker: #094c23</td >
159
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
160
+ </tr >
161
+ <tr >
162
+ <td style =" color :white ; background-color :#0c602c " >themeDark: #0c602c</td >
163
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
164
+ </tr >
165
+ <tr >
166
+ <td style =" color :white ; background-color :#0f7c39 " >themeDarkAlt: #0f7c39</td >
167
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
168
+ </tr >
169
+ <tr >
170
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#10893e " >themePrimary: #10893e</td >
171
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
172
+ </tr >
173
+ <tr >
174
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
175
+ </tr >
176
+ <tr >
177
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
178
+ </tr >
179
+ <tr >
180
+ <td style =" color :white ; background-color :#14a94e " >themeSecondary: #14a94e</td >
181
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
182
+ </tr >
183
+ <tr >
184
+ <td style =" color :black ; background-color :#7aefa7 " >themeTertiary: #7aefa7</td >
185
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
186
+ </tr >
187
+ <tr >
188
+ <td style =" color :black ; background-color :#bff7d5 " >themeLight: #bff7d5</td >
189
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td >
190
+ </tr >
191
+ <tr >
192
+ <td style =" color :black ; background-color :#dffbea " >themeLighter: #dffbea</td >
193
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
194
+ </tr >
195
+ <tr >
196
+ <td style =" color :black ; background-color :#effdf4 " >themeLighterAlt: #effdf4</td >
197
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
198
+ </tr >
199
+ </table >
200
+
201
+ <br />
202
+
203
+ ### Blue
204
+
205
+ <table >
206
+ <tr >
207
+ <td style =" color :white ; background-color :#004578 " >themeDarker: #004578</td >
208
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
209
+ </tr >
210
+ <tr >
211
+ <td style =" color :white ; background-color :#005a9e " >themeDark: #005a9e</td >
212
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
213
+ </tr >
214
+ <tr >
215
+ <td style =" color :white ; background-color :#106ebe " >themeDarkAlt: #106ebe</td >
216
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
217
+ </tr >
218
+ <tr >
219
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#0078d7 " >themePrimary: #0078d7</td >
220
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
221
+ </tr >
222
+ <tr >
223
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
224
+ </tr >
225
+ <tr >
226
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
227
+ </tr >
228
+ <tr >
229
+ <td style =" color :white ; background-color :#2b88d8 " >themeSecondary: #2b88d8</td >
230
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
231
+ </tr >
232
+ <tr >
233
+ <td style =" color :black ; background-color :#71afe5 " >themeTertiary: #71afe5</td >
234
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
235
+ </tr >
236
+ <tr >
237
+ <td style =" color :black ; background-color :#c7e0f4 " >themeLight: #c7e0f4</td >
238
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td >
239
+ </tr >
240
+ <tr >
241
+ <td style =" color :black ; background-color :#deecf9 " >themeLighter: #deecf9</td >
242
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
243
+ </tr >
244
+ <tr >
245
+ <td style =" color :black ; background-color :#eff6fc " >themeLighterAlt: #eff6fc</td >
246
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
247
+ </tr >
248
+ </table >
249
+
250
+ <br />
251
+
252
+ ### Purple
253
+
254
+ <table >
255
+ <tr >
256
+ <td style =" color :white ; background-color :#27268a " >themeDarker: #27268a</td >
257
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
258
+ </tr >
259
+ <tr >
260
+ <td style =" color :white ; background-color :#3230b0 " >themeDark: #3230b0</td >
261
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
262
+ </tr >
263
+ <tr >
264
+ <td style =" color :white ; background-color :#5250cf " >themeDarkAlt: #5250cf</td >
265
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
266
+ </tr >
267
+ <tr >
268
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#6b69d6 " >themePrimary: #6b69d6</td >
269
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
270
+ </tr >
271
+ <tr >
272
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
273
+ </tr >
274
+ <tr >
275
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
276
+ </tr >
277
+ <tr >
278
+ <td style =" color :white ; background-color :#7a78da " >themeSecondary: #7a78da</td >
279
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
280
+ </tr >
281
+ <tr >
282
+ <td style =" color :black ; background-color :#c1c0ee " >themeTertiary: #c1c0ee</td >
283
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
284
+ </tr >
285
+ <tr >
286
+ <td style =" color :black ; background-color :#e1e1f7 " >themeLight: #e1e1f7</td >
287
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td >
288
+ </tr >
289
+ <tr >
290
+ <td style =" color :black ; background-color :#f0f0fb " >themeLighter: #f0f0fb</td >
291
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
292
+ </tr >
293
+ <tr >
294
+ <td style =" color :black ; background-color :#f8f7fd " >themeLighterAlt: #f8f7fd</td >
295
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
296
+ </tr >
297
+ </table >
298
+
299
+ <br />
300
+
301
+ ### Gray
302
+
303
+ <table >
304
+ <tr >
305
+ <td style =" color :white ; background-color :#323130 " >themeDarker: #323130</td >
306
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
307
+ </tr >
308
+ <tr >
309
+ <td style =" color :white ; background-color :#403e3d " >themeDark: #403e3d</td >
310
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
311
+ </tr >
312
+ <tr >
313
+ <td style =" color :white ; background-color :#53504e " >themeDarkAlt: #53504e</td >
314
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
315
+ </tr >
316
+ <tr >
317
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#5d5a58 " >themePrimary: #5d5a58</td >
318
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
319
+ </tr >
320
+ <tr >
321
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
322
+ </tr >
323
+ <tr >
324
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
325
+ </tr >
326
+ <tr >
327
+ <td style =" color :white ; background-color :#6d6a67 " >themeSecondary: #6d6a67</td >
328
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
329
+ </tr >
330
+ <tr >
331
+ <td style =" color :black ; background-color :#bbb9b8 " >themeTertiary: #bbb9b8</td >
332
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
333
+ </tr >
334
+ <tr >
335
+ <td style =" color :black ; background-color :#dfdedd " >themeLight: #dfdedd</td >
336
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td >
337
+ </tr >
338
+ <tr >
339
+ <td style =" color :black ; background-color :#efeeee " >themeLighter: #efeeee</td >
340
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
341
+ </tr >
342
+ <tr >
343
+ <td style =" color :black ; background-color :#f7f7f7 " >themeLighterAlt: #f7f7f7</td >
344
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
345
+ </tr >
346
+ </table >
347
+
348
+ <br />
349
+
350
+ ## See also
57
351
- [ Designing great SharePoint experiences] ( design-guidance-overview.md )
0 commit comments