Picchu

Color

Guidance

All Microsoft sites should be built using colors from the Microsoft web palette. This palette includes core colors that are associated with particular products and services, along with a selection of recommended accent colors. Product or service-specific layouts should utilize their associated color prominently. Accent colors should be used more sparingly.

Accessibility

When using color, legibility trumps aesthetics. The minimum recommended ratio of 4.5:1 must be met. Use the tool found in the Resources section of this page for contrast measurement.

Core

Dark gray

#2f2f2f
  • Microsoft

Blue

#0078d7
  • Windows
  • Surface
  • Lumia
  • Band
  • HoloLens

Purple

#5c2d91
  • OneNote
  • Visual Studio

Magenta

#b4009e

Red

#e81123

Orange

#d83b01
  • Office

Yellow

#ffb900
  • Bing

Green

#107c10
  • Xbox

Teal

#008272

Light magenta

#e3008c

Dark purple

#32145a

Mid blue

#00188f
  • Server

Dark teal

#004b50

Dark green

#004b1c

Dark blue

#002050
  • Dynamics

Accent

Light yellow

#fff100

Light orange

#ff8c00

Dark red

#a80000

Dark magenta

#5c005c

Light purple

#b4a0ff

Light blue

#00bcf2

Light teal

#00b294

Light green

#bad80a

Gray scale

Black

#171717

Dark Gray

#2F2F2F
#464646
#5E5E5E

Gray

#767676
#919191
#ACACAC
#C8C8C8
#E3E3E3

White

#FFFFFF

Themes

The Microsoft web framework supports themes based on the core colors. Within each theme, the core color, along with specific tints and shades* of that color, are assigned to navigation elements, background colors, and select states. A color theme can be applied at the site, section, or page level.

In general, we use 20, 40, 60, and 80 percent tint and shade values of the core color. In-between values (10, 30, 50, 70, and 90 percent) were added for special cases where multiple levels (i.e. of nav, etc.) called for more variations to accommodate hover and selected states within the various levels.

Demo

See the Pen Color demo 1 by Microsoft.com (@microsoft) on CodePen.