Microsoft color palette
TechMicrosoft's brand color system is built around its signature 'Microsoft Blue' and the four-color square logo, using a clean and accessible palette for digital and print. The colors are designed for clarity, approachability, and strong brand recognition across products and platforms.
microsoft.comMicrosoft colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Microsoft BluePrimary0, 120, 212
- Microsoft OrangeSecondary242, 80, 34
- Microsoft GreenAccent127, 186, 0
Surfaces
Page, cards and dividers.- Microsoft WhiteBackground255, 255, 255
- Microsoft Light GraySurface243, 242, 241
- Microsoft Border GrayBorder225, 223, 221
Text
Three tiers of copy.- Microsoft BlackText27, 26, 25
- Microsoft Secondary GraySecondary text96, 94, 92
- Microsoft Muted GrayMuted text161, 159, 157
Semantic
Feedback and state colors.- Microsoft Success GreenSuccess16, 124, 16
- Microsoft YellowWarning255, 185, 0
- Microsoft RedError209, 52, 56
- Microsoft CyanInfo0, 183, 195
Use Microsoft's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
microsoft-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B7C3;
--error: #D13438;
--accent: #7FBA00;
--border: #E1DFDD;
--primary: #0078D4;
--success: #107C10;
--surface: #F3F2F1;
--warning: #FFB900;
--secondary: #F25022;
--text-muted: #A19F9D;
--background: #FFFFFF;
--text-primary: #1B1A19;
--text-secondary: #605E5C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Microsoft gray and neutral colors
The quiet part of the Microsoft palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Microsoft WhiteBackground
- HEX
- RGB
- HSL
- Microsoft Light GraySurface
- HEX
- RGB
- HSL
- Microsoft Border GrayBorder
- HEX
- RGB
- HSL
- Microsoft BlackText
- HEX
- RGB
- HSL
- Microsoft Secondary GraySecondary text
- HEX
- RGB
- HSL
- Microsoft Muted GrayMuted text
- HEX
- RGB
- HSL
About Microsoft's colors
Microsoft's palette is based on a harmonious combination of primary colors, reflecting the four-color logo and a modern, digital-friendly aesthetic. The palette balances vibrancy with accessibility for broad usability.
Primary blue is complemented by orange, green, and yellow from the logo.
Neutral grays provide structure and readability.
Accent colors are used for status, feedback, and highlights.
Psychology
Blue conveys trust, reliability, and professionalism, while the supporting colors add energy and approachability. The use of clean neutrals ensures clarity and focus on content.
Evolution
Microsoft's color palette has remained consistent since the 2012 rebrand, emphasizing the four-color logo. Minor adjustments have been made for digital accessibility and UI clarity.
Where Microsoft uses each color
- Primary
Microsoft Blue is used for navigation bars, primary buttons, and key branding elements.
- Secondary
Microsoft Orange appears in the logo and for highlights in marketing materials.
- Accent
Microsoft Green is used for success states and in the logo.
- Backgrounds
White and light gray backgrounds are standard across apps, websites, and product UIs.
- Text
Text uses Microsoft Black for primary content and grays for secondary or muted information.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and notifications.
Microsoft color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Microsoft brand color is Microsoft Blue, with the hex code #0078D4.
Microsoft Blue is RGB(0, 120, 212) and CMYK(90, 53, 0, 0). The hex code is #0078D4.
Microsoft uses several neutral grays, including Microsoft Light Gray (#F3F2F1), Border Gray (#E1DFDD), and Secondary Gray (#605E5C) for backgrounds, borders, and text.
Use Microsoft Blue for primary actions and navigation, with supporting colors for status and highlights. Neutrals provide structure and should be used for backgrounds and secondary text.
The secondary color is Microsoft Orange, #F25022, and the accent is Microsoft Green, #7FBA00. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Microsoft's colors consistently when it generates UI.
Make something in the spirit of Microsoft
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.