Color

The universal color palette consists of a curated set of colors that is used across Microsoft products.

Universal color palette

750B1C
7F1D10
7F2F08
7F4200
A80000
A52613
A74109
B05E0D
B05E0D
C50F1F
DA3B01
DA3B01
CA5010
CA5010
D47300
E81123
E81123
F03A17
F7630C
FF8C00
E74856
EF6950
F7894A
FFAA44
E6808A
EE9889
F7B189
FFC988
F4ABBA
EEC7C2
F2D5C9
FFDABB
AB620D
AB620D
986F0B
986F0B
73AA24
498205
498205
D48C00
C19C00
8CBD18
599B00
EAA300
DFBE00
A4CF0C
6BB700
FFB900
FCE100
BAD80A
7CD300
FFC83D
FFF100
D1EC3C
9AD93A
FFD679
FAEC6E
E4F577
B7DF74
FFE5B6
F9F1A5
F8FFB3
D5E5AE
0B6A0B
00722E
005E50
006666
107C10
10893E
10893E
008272
038387
13A10E
00AE56
00B294
009CA4
16C60C
00CC6A
00CEA6
00B7C3
47D041
38D487
41DABC
30C6CC
79DB75
70DDA5
81E6D3
61D6D6
AAE5AA
A8E5C2
C2F2E9
91E5DF
005B70
003966
00188F
11255E
006F94
004E8C
0027B4
19318D
0099BC
0063B1
0037DA
203DBD
00BCF2
0078D7
0078D7
0046FF
2849EC
31D2F7
3A96DD
3B78FF
4F6BED
4F6BED
69EAFF
83BEEC
7BA7FF
7C96F9
99ECFF
B3DBF2
ABC9ED
A6BDFF
242466
373277
49397A
401B6C
32318C
49409A
5E4A9D
4E257F
413EB3
5A4EBC
735BC1
5C2E91
4F4BD9
7160E8
7160E8
886CE4
744DA9
6B69D6
6B69D6
8378DE
9C89E9
8764B8
8764B8
BEBEE5
B5B5E2
C3C3F4
CFC4F5
460F54
5C005C
77004D
6B0036
5C126B
800074
9B0062
970044
721481
9A0089
BF0077
C30052
881798
B4009E
E3008C
E3008C
EA005E
EA005E
B146C2
B146C2
C239B3
C239B3
E43BA6
EE3F86
DEA2ED
DE94E0
E8A3DE
EDBED3
761721
4D291C
2D3F3A
394146
A4262C
603D30
3B534D
4A5459
D13438
D13438
8E562E
486860
5A686C
FF4343
AC744C
567C73
567C73
69797E
69797E
FF6767
BB9167
7D9D95
859599
FF8C8C
D8B094
A3BFB7
A0AEB2
FFC0C0
F7D7C4
CAE0D9
BAC8CC
4C4A48
1F1F1F
000000
 
5D5A58
2B2B2B
FFFFFF
 
6E6A68
393939
 
 
7A7574
7A7574
767676
767676
 
 
989391
CCCCCC
 
 
B1ADAB
E6E6E6
 
 
CBC6C4
F2F2F2
 
 

Accent color

When users select an accent color, it appears as part of their system theme. Here are examples of how this is applied in Windows.

Sample accent color
3 shades darker
1 shade lighter
2 shades darker
2 shades lighter
1 shades darker
3 shades lighter
Sample accent color

Color selection

Once an accent color is selected, light and dark shades of the accent color are created based on HCL values of color luminosity.

Shade variations are used to create visual hierarchy and to provide an indication of interaction.

Accent color
Button background
Title bar and app bar
Left nav bar
Light theme
Accent color
Button background non-focus
Title bar and app bar
Left nav bar
Dark theme
Image showing light theme dynamic
Image showing dark theme dynamics

Accessibility

Because our universal palette was designed for the screen, for optimal readability, we maintain a minimal contrast ratio of 4.5∶1 between the background color and text and icons. Some examples appear below.

To maintain a rich palette of colors and also allow deep customization, we highlighted the ideal combinations of color to meet readability standards.

Each color has been optimized for onscreen (RGB) reproduction, with contrast ratios considered. The RGB color formula and hex value must be specified individually for each color.

Each of the background colors is matched with the corresponding text colors, in order to ensure maximum legibility and meet the contrast requirement (4.5∶1 or higher).

Colors shown are hex values.

Example of white text on a #761721 background
Crossout image showing a don't example
Don't example showing black text on a #761721 background
Example of red text on a white background
Crossout image showing a don't example
Example of red text on a black background
Example of white text on a red background
Example of black text on a red background
Example of red text on a white background
Example of red text on a black background
Crossout image showing a don't example
Don't example of white text on a light pink background
Example of black text on a light pink background
Crossout image showing a don't example
Don't example of pink text on a white background
Example of pink text on a black background

Color guidelines for UWP apps

To learn more about color in UWP apps, see the Color guidelines for UWP apps article.