Color

Color provides intuitive way of finding through an app's various levels of information and serves as a crucial tool for reinforcing the interaction model.

In Windows, color is also personal. Users can choose a color and a light or dark theme to be reflected throughout their experience.

Accent color

The user can pick a single color called the accent from Settings > Personalization > Colors. They have their choice from a curated set of 48 color swatches, except on Xbox which has a palette of 21 TV-safe colors.

Default accent colors

FFB900 E74856 0078D7 0099BC 7A7574 767676
FF8C00 E81123 0063B1 2D7D9A 5D5A58 4C4A48
F7630C EA005E 8E8CD8 00B7C3 68768A 69797E
CA5010 C30052 6B69D6 038387 515C6B 4A5459
DA3B01 E3008C 8764B8 00B294 567C73 647C64
EF6950 BF0077 744DA9 018574 486860 525E54
D13438 C239B3 B146C2 00CC6A 498205 847545
FF4343 9A0089 881798 10893E 107C10 7E735F

Xbox accent colors

EB8C10 ED5588 1073D6 148282 107C10 4C4A4B
EB4910 BF1077 193E91 54A81B 737373 7E715C
E31123 B144C0 1081CA 547A72 677488 724F2F
A21025 744DA9 108272

Avoid using the accent color as a background, especially for text and icons. Because the accent color can change, if you must use it as a background, there’s some additional work you must do to ensure that foreground text is easy to read. For example, if your text is white and the accent color is light gray, your text will be difficult to see because the contrast ratio between white and light gray is small. You can work around the issue by testing the accent color to determine whether it’s a dark color:

Use the following algorithm to determine whether a background color is light or dark.

void accentColorUpdated(FrameworkElement elementWithText)
{
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    Windows.UI.Color c = uiSettings.GetColorValue(UIColorType.Accent);

    bool colorIsDark = (5 * c.G + 2 * c.R + c.B) <= 8 * 128;
    if (colorIsDark)
    {
        elementWithText.RequestedTheme = ElementTheme.Light;
    }
    else
    {
        elementWithText.RequestedTheme = ElementTheme.Dark;
    }
}
function accentColorUpdated(elementWithText)
{
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    Windows.UI.Color c = uiSettings.GetColorValue(UIColorType.Accent);
    var colorIsDark (5 * c.g + 2 * c.r + c.b) <= 8 * 128;
    if (colorIsDark)
    {
        elementWithText.RequestedTheme = ElementTheme.Light;
    }
    else
    {
        elementWithText.RequestedTheme = ElementTheme.Dark;
    }     
}

Once you’ve determined whether the accent color is light or dark, choose an appropriate foreground color. We recommend using the SystemControlForegroundBaseHighBrush from the light theme for dark backgrounds and using the dark-themed version for light backgrounds.

Color palette building blocks

Once an accent color is selected, light and dark shades of the accent color are created based on HSB values of color luminosity. Apps can use shade variations to create visual hierarchy and to provide an indication of interaction.

By default, hyperlinks will use the user's accent color. If the page background is a similar color, you can choose to assign a lighter (or darker) shade of accent to the hyperlinks for better contrast.

The various light/dark shades of the default accent color.
3 shades lighter
2 shades lighter
1 shade lighter
Sample accent color
1 shade darker
2 shades darker
3 shades darker
Redlines for Colored Action Center
An example of how color logic gets applied to a design spec.
Note

In XAML, the primary accent color is exposed as a theme resource named SystemAccentColor. The shades are available as SystemAccentColorLight3, SystemAccentColorLight2, SystemAccentColorLight1, SystemAccentColorDark1, SystemAccentColorDark2, and SystemAccentColorDark3. Also available programmatically via UISettings.GetColorValue and the UIColorType enum.

Color theming

The user may also choose between a light or dark theme for the system. Some apps choose to change their theme based on the user’s preference, while others opt out.

Apps using light theme are for scenarios involving productivity apps. Examples would be the suite of apps available with Microsoft Office. Light theme affords the ease of reading long lengths of text in conjunction with prolonged periods of time-at-task.

Dark theme allows more visible contrast of content for apps that are media centric or scenarios where users are presented with an abundance of videos or imagery. In these scenarios, reading is not necessarily the primary task, though a movie watching experience might be, and shown under low-light ambient conditions.

If your app doesn’t quite fit either of these descriptions, consider following the system theme to let the user decide what's right for them.

To make designing for themes easier, Windows provides an additional color palette that automatically adapts to the theme.

Light theme

Base

The base light theme

Alt

The alt light theme

List

The list light theme

Chrome

The chrome light theme

Dark theme

Base

The base dark theme

Alt

The alt dark theme

List

The list dark theme

Chrome

The chrome dark theme

Changing the theme

You can change themes easily by changing the RequestedTheme property in your App.xaml:

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">

</Application>

Removing the RequestedTheme means that your application will honor the user’s app mode settings, and they will be able to choose to view your app in either the dark or light theme.

Make sure that you take the theme into consideration when creating your app, as the theme has a big impact on the look of your app.

Accessibility

Our palette is optimized for screen usage. We recommend maintaining a contrast ratio for text of 4.5:1 against the background for optimal readability. There are many free tools available to test whether or not your colors pass, like Contrast Ratio.