Skip to content

Commit a916b7b

Browse files
ajford76ajford76
authored
Update themes-colors.md
Updated to new colors
1 parent 1aa2fee commit a916b7b

File tree

1 file changed

+32
-252
lines changed

1 file changed

+32
-252
lines changed

‎docs/design/themes-colors.md

Lines changed: 32 additions & 252 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,36 @@
11
---
22
title: SharePoint themes and colors
3-
description: Design principles that helped form the current SharePoint themes and color palette.
4-
ms.date: 01/24/2018
3+
description: Design principles that help form the current SharePoint themes and color palette.
4+
ms.date: 05/21/2018
55
---
66

77
# SharePoint themes and colors
88

9-
Like the Microsoft brand palette, the SharePoint themes are designed to build on the Microsoft brand, while at the same time allow for flexibility to enliven our partnerships without dominating them. They reveal our shared goals and personality and reflect our diversity and ability to optimize the SharePoint experience.
9+
Like the Microsoft brand palette, the SharePoint themes are designed to build on the Microsoft brand, while at the same time allow for flexibility to enliven our partnerships without dominating them. They reveal our shared goals and personality, and they reflect our diversity and ability to optimize the SharePoint experience.
1010

11-
<br/>
12-
13-
![SharePoint color palette, Red D13438, Orange CA5010, Green 10893E, Blue 0078D7, Purple 6B69D6, Gray 5D5A5B ](../images/design-theme-colors.png)
14-
15-
## Themes
16-
17-
The following design principles helped form the current SharePoint themes and color palette.
18-
19-
**Guided**. Our theming system works at a global level so that updates can be made consistently across each site, allowing users to optimize their websites effortlessly. Our theming system operates in a controlled environment so that successful outcomes can be optimized quickly.
11+
## Main colors
2012

21-
**Smart and efficient**. Our theming system expedites the site creation process by using smart algorithms to generate options that maximize aesthetic choices.
13+
The SharePoint color palette is now optimized for screens and devices. In addition, it is optimized to provide enough flexibility to ensure continuity with your brand. The SharePoint-provided colors also guarantee accessible and legible experiences.
2214

23-
**Professional**. Our themes embody a professional look and feel that ensures coherency and conveys the brand of our enterprise audiences.
15+
![SharePoint color palette, Red A4262C, Orange CA5010, Gold 986f0b, Green 498205, Teal 038387, Blue 0078d4, Dark Blue 004e8c, Indigo 4f6bed, Plum 881798, Purple 8764B8, Cool Grey 69797e, Warm Grey 7a7574](../images/sharepoint-themes.png)
2416

25-
**Accessible**. Our built-in accessibility checker ensures universal design at all levels of default themes. For users who decide to customize, we provide helpful guidelines to design for accessibility.
17+
## Neutral palette
2618

27-
## Colors
28-
29-
The SharePoint color palette has been optimized for screens and devices, and to provide enough flexibility to ensure continuity with your brand. The SharePoint-provided colors also guarantee accessible and legible experiences.
30-
31-
### Red
32-
33-
![SharePoint color palette Red D1343](../images/themes-colors-red-theme.png)
34-
35-
<br/>
19+
Neutral colors recede into the background to let our products shine. They allow brand colors to pop when we need to draw attention to content. When coupling neutrals with brand colors, make sure there is suitable contrast between them.
3620

21+
<br/>
3722
<table>
3823
<tr>
39-
<td style="color:white; background-color:#751b1e">themeDarker: #751b1e</td>
24+
<td rowspan="13" style=""><img src="../images/sharepoint-neutralgreys.png" alt="Neutral greys" height="766" width="375"></img></td>
4025
<td style="color:white; background-color:#000000">black: #000000</td>
4126
</tr>
4227
<tr>
43-
<td style="color:white; background-color:#952226">themeDark: #952226</td>
4428
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
4529
</tr>
4630
<tr>
47-
<td style="color:white; background-color:#c02b30">themeDarkAlt: #c02b30</td>
48-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
31+
<td style="color:white; background-color:#333333">neutralPrimary: #333333</td>
4932
</tr>
5033
<tr>
51-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#d13438">themePrimary: #d13438</td>
5234
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
5335
</tr>
5436
<tr>
@@ -58,292 +40,90 @@ The SharePoint color palette has been optimized for screens and devices, and to
5840
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
5941
</tr>
6042
<tr>
61-
<td style="color:white; background-color:#d6494d">themeSecondary: #d6494d</td>
6243
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
6344
</tr>
6445
<tr>
65-
<td style="color:black; background-color:#ecaaac">themeTertiary: #ecaaac</td>
66-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
67-
</tr>
68-
<tr>
69-
<td style="color:black; background-color:#f6d6d8">themeLight: #f6d6d8</td>
70-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td></tr>
71-
<tr>
72-
<td style="color:black; background-color:#faebeb">themeLighter: #faebeb</td>
73-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
46+
<td style="color:black; background-color:#d0d0d0">neutralQuaternary: #d0d0d0</td>
7447
</tr>
7548
<tr>
76-
<td style="color:black; background-color:#fdf5f5">themeLighterAlt: #fdf5f5</td>
77-
<td style="color:black; background-color:#fff">white: #fff</td>
78-
</tr>
79-
</table>
80-
81-
<br/>
82-
83-
### Orange
84-
85-
![SharePoint color palette Orange CA5010](../images/themes-colors-orange-theme.png)
86-
87-
<br/>
88-
89-
<table>
90-
<tr>
91-
<td style="color:white; background-color:#6f2d09">themeDarker: #6f2d09</td>
92-
<td style="color:white; background-color:#000000">black: #000000</td>
93-
</tr>
94-
<tr>
95-
<td style="color:white; background-color:#8d390b">themeDark: #8d390b</td>
96-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
97-
</tr>
98-
<tr>
99-
<td style="color:white; background-color:#b5490f">themeDarkAlt: #b5490f</td>
100-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
101-
</tr>
102-
<tr>
103-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#ca5010">themePrimary: #ca5010</td>
104-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
105-
</tr>
106-
<tr>
107-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
108-
</tr>
109-
<tr>
110-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
111-
</tr>
112-
<tr>
113-
<td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td>
114-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
115-
</tr>
116-
<tr>
117-
<td style="color:black; background-color:#f6b28d">themeTertiary: #f6b28d</td>
118-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
119-
</tr>
120-
<tr>
121-
<td style="color:black; background-color:#fbdac9">themeLight: #fbdac9</td>
122-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
123-
</tr>
124-
<tr>
125-
<td style="color:black; background-color:#fdede4">themeLighter: #fdede4</td>
126-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
127-
</tr>
128-
<tr>
129-
<td style="color:black; background-color:#fef6f1">themeLighterAlt: #fef6f1</td>
130-
<td style="color:black; background-color:#fff">white: #fff</td>
131-
</tr>
132-
</table>
133-
134-
<br/>
135-
136-
### Green
137-
138-
![SharePoint color palette Green 10893E](../images/themes-colors-green-theme.png)
139-
140-
<br/>
141-
142-
<table>
143-
<tr>
144-
<td style="color:white; background-color:#094c23">themeDarker: #094c23</td>
145-
<td style="color:white; background-color:#000000">black: #000000</td>
146-
</tr>
147-
<tr>
148-
<td style="color:white; background-color:#0c602c">themeDark: #0c602c</td>
149-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
150-
</tr>
151-
<tr>
152-
<td style="color:white; background-color:#0f7c39">themeDarkAlt: #0f7c39</td>
153-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
154-
</tr>
155-
<tr>
156-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#10893e">themePrimary: #10893e</td>
157-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
158-
</tr>
159-
<tr>
160-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
161-
</tr>
162-
<tr>
163-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
164-
</tr>
165-
<tr>
166-
<td style="color:white; background-color:#14a94e">themeSecondary: #14a94e</td>
167-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
49+
<td style="color:black; background-color:#dadada">neutralQuaternaryAlt: #dadada</td>
16850
</tr>
16951
<tr>
170-
<td style="color:black; background-color:#7aefa7">themeTertiary: #7aefa7</td>
17152
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
17253
</tr>
17354
<tr>
174-
<td style="color:black; background-color:#bff7d5">themeLight: #bff7d5</td>
17555
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
17656
</tr>
17757
<tr>
178-
<td style="color:black; background-color:#dffbea">themeLighter: #dffbea</td>
17958
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
18059
</tr>
18160
<tr>
182-
<td style="color:black; background-color:#effdf4">themeLighterAlt: #effdf4</td>
183-
<td style="color:black; background-color:#fff">white: #fff</td>
61+
<td style="color:black; background-color:#ffffff">white: #ffffff</td>
18462
</tr>
18563
</table>
186-
18764
<br/>
18865

189-
### Blue
66+
## Shades and tints
19067

191-
![SharePoint color palette Blue 0078D7](../images/themes-colors-blue-theme.png)
68+
After you select a color, light and dark shades of the accent color are created based on HSB values of color luminosity. Web parts and apps can use shade variations to create visual hierarchy and provide an indication of interaction.
19269

19370
<br/>
19471

19572
<table>
19673
<tr>
74+
<td rowspan="9" style=""><img src="../images/sharepoint-theme-primary.png" alt="Theme primary colors" height="531" width="375"></img></td>
19775
<td style="color:white; background-color:#004578">themeDarker: #004578</td>
198-
<td style="color:white; background-color:#000000">black: #000000</td>
19976
</tr>
20077
<tr>
20178
<td style="color:white; background-color:#005a9e">themeDark: #005a9e</td>
202-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
20379
</tr>
20480
<tr>
20581
<td style="color:white; background-color:#106ebe">themeDarkAlt: #106ebe</td>
206-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
20782
</tr>
20883
<tr>
209-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#0078d7">themePrimary: #0078d7</td>
210-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
84+
<td style="color:white; background-color:#0078d4">themePrimary: #0078d4</td>
21185
</tr>
21286
<tr>
213-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
214-
</tr>
215-
<tr>
216-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
217-
</tr>
218-
<tr>
219-
<td style="color:white; background-color:#2b88d8">themeSecondary: #2b88d8</td>
220-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
87+
<td style="color:black; background-color:#2b88d8">themeSecondary: #2b88d8</td>
22188
</tr>
22289
<tr>
22390
<td style="color:black; background-color:#71afe5">themeTertiary: #71afe5</td>
224-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
22591
</tr>
22692
<tr>
22793
<td style="color:black; background-color:#c7e0f4">themeLight: #c7e0f4</td>
228-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
22994
</tr>
23095
<tr>
23196
<td style="color:black; background-color:#deecf9">themeLighter: #deecf9</td>
232-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
23397
</tr>
23498
<tr>
23599
<td style="color:black; background-color:#eff6fc">themeLighterAlt: #eff6fc</td>
236-
<td style="color:black; background-color:#fff">white: #fff</td>
237100
</tr>
238101
</table>
239102

240103
<br/>
241104

242-
### Purple
243105

244-
![SharePoint color palette Purple 6B69D6](../images/themes-colors-purple-theme.png)
106+
## Dark themes
245107

246-
<br/>
108+
SharePoint includes a palette that supports dark themes. The SharePoint-provided colors guarantee accessible and legible experiences.
247109

248-
<table>
249-
<tr>
250-
<td style="color:white; background-color:#27268a">themeDarker: #27268a</td>
251-
<td style="color:white; background-color:#000000">black: #000000</td>
252-
</tr>
253-
<tr>
254-
<td style="color:white; background-color:#3230b0">themeDark: #3230b0</td>
255-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
256-
</tr>
257-
<tr>
258-
<td style="color:white; background-color:#5250cf">themeDarkAlt: #5250cf</td>
259-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
260-
</tr>
261-
<tr>
262-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#6b69d6">themePrimary: #6b69d6</td>
263-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
264-
</tr>
265-
<tr>
266-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
267-
</tr>
268-
<tr>
269-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
270-
</tr>
271-
<tr>
272-
<td style="color:white; background-color:#7a78da">themeSecondary: #7a78da</td>
273-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
274-
</tr>
275-
<tr>
276-
<td style="color:black; background-color:#c1c0ee">themeTertiary: #c1c0ee</td>
277-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
278-
</tr>
279-
<tr>
280-
<td style="color:black; background-color:#e1e1f7">themeLight: #e1e1f7</td>
281-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
282-
</tr>
283-
<tr>
284-
<td style="color:black; background-color:#f0f0fb">themeLighter: #f0f0fb</td>
285-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
286-
</tr>
287-
<tr>
288-
<td style="color:black; background-color:#f8f7fd">themeLighterAlt: #f8f7fd</td>
289-
<td style="color:black; background-color:#fff">white: #fff</td>
290-
</tr>
291-
</table>
110+
![SharePoint dark theme color palette, Red EF6950, Yellow FFC83D, Green 00b294, Blue 3a96dd, Purple 9c89e9, Grey b1adab](../images/sharepoint-themes-dark.png)
292111

293-
<br/>
112+
## Principles
294113

295-
### Gray
114+
The following design principles helped form the current SharePoint themes and color palette.
296115

297-
![SharePoint color palette Gray 5D5A5B](../images/themes-colors-gray-theme.png)
116+
### Guided
117+
Our theming system works at a global level so that updates can be made consistently across each site, allowing users to optimize their websites effortlessly. Our theming system operates in a controlled environment so that successful outcomes can be optimized quickly.
298118

299-
<br/>
119+
### Smart and efficient
120+
Our theming system expedites the site creation process by using smart algorithms to generate options that maximize aesthetic choices.
300121

301-
<table>
302-
<tr>
303-
<td style="color:white; background-color:#323130">themeDarker: #323130</td>
304-
<td style="color:white; background-color:#000000">black: #000000</td>
305-
</tr>
306-
<tr>
307-
<td style="color:white; background-color:#403e3d">themeDark: #403e3d</td>
308-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
309-
</tr>
310-
<tr>
311-
<td style="color:white; background-color:#53504e">themeDarkAlt: #53504e</td>
312-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
313-
</tr>
314-
<tr>
315-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#5d5a58">themePrimary: #5d5a58</td>
316-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
317-
</tr>
318-
<tr>
319-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
320-
</tr>
321-
<tr>
322-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
323-
</tr>
324-
<tr>
325-
<td style="color:white; background-color:#6d6a67">themeSecondary: #6d6a67</td>
326-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
327-
</tr>
328-
<tr>
329-
<td style="color:black; background-color:#bbb9b8">themeTertiary: #bbb9b8</td>
330-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
331-
</tr>
332-
<tr>
333-
<td style="color:black; background-color:#dfdedd">themeLight: #dfdedd</td>
334-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
335-
</tr>
336-
<tr>
337-
<td style="color:black; background-color:#efeeee">themeLighter: #efeeee</td>
338-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
339-
</tr>
340-
<tr>
341-
<td style="color:black; background-color:#f7f7f7">themeLighterAlt: #f7f7f7</td>
342-
<td style="color:black; background-color:#fff">white: #fff</td>
343-
</tr>
344-
</table>
122+
### Professional
123+
Our themes embody a professional look and feel that ensures coherency and conveys the brand of our enterprise audiences.
345124

346-
<br/>
125+
### Accessible
126+
Our built-in accessibility checker ensures universal design at all levels of default themes. For users who decide to customize, we provide helpful guidelines to design for accessibility.
347127

348128
## See also
349129

0 commit comments

Comments
 (0)