Microsoft Color Palette

Select any value to copy it.

• Office Orange

  Primary

  #F25022rgb(242, 80, 34)hsl(13, 89%, 54%)

  Closest in ArchiveVermillion Radiant Bright
  Closest in Archive: Vermillion Radiant Bright

• Xbox Green

  Primary

  #7FBA00rgb(127, 186, 0)hsl(79, 100%, 36%)

  Closest in ArchiveOlive Velvet Vivid
  Closest in Archive: Olive Velvet Vivid

• Windows Blue

  Primary

  #00A4EFrgb(0, 164, 239)hsl(199, 100%, 47%)

  Closest in ArchiveAzure Core Pure
  Closest in Archive: Azure Core Pure

• Yellow

  Primary

  #FFB900rgb(255, 185, 0)hsl(44, 100%, 50%)

  Closest in ArchiveApricot Tone Pure
  Closest in Archive: Apricot Tone Pure

• Slate Gray

  Neutral

  #737373rgb(115, 115, 115)hsl(0, 0%, 45%)

  Closest in ArchiveTrue Gray Core
  Closest in Archive: True Gray Core

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• Office OrangeAaon white3.53:1Large text onlyOffice Orange: Open in contrast checkerAaon black5.95:1AAOffice Orange: Open in contrast checker
• Xbox GreenAaon white2.35:1Not for textXbox Green: Open in contrast checkerAaon black8.93:1AAXbox Green: Open in contrast checker
• Windows BlueAaon white2.78:1Not for textWindows Blue: Open in contrast checkerAaon black7.56:1AAWindows Blue: Open in contrast checker
• YellowAaon white1.72:1Not for textYellow: Open in contrast checkerAaon black12.19:1AAYellow: Open in contrast checker
• Slate GrayAaon white4.74:1AASlate Gray: Open in contrast checkerAaon black4.43:1Large text onlySlate Gray: Open in contrast checker

About this palette

Microsoft's logo squares — orange, green, blue, yellow — historically map to product divisions (Office orange, Xbox green, Windows blue, OneDrive yellow). The current brand system holds them at high saturation against a slate gray neutral, projecting both warmth and enterprise authority.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --microsoft-office-orange: #f25022;
  --microsoft-xbox-green: #7fba00;
  --microsoft-windows-blue: #00a4ef;
  --microsoft-yellow: #ffb900;
  --microsoft-slate-gray: #737373;
}

@theme {
  --color-microsoft-office-orange: #f25022;
  --color-microsoft-xbox-green: #7fba00;
  --color-microsoft-windows-blue: #00a4ef;
  --color-microsoft-yellow: #ffb900;
  --color-microsoft-slate-gray: #737373;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "microsoft-office-orange": "#f25022",
        "microsoft-xbox-green": "#7fba00",
        "microsoft-windows-blue": "#00a4ef",
        "microsoft-yellow": "#ffb900",
        "microsoft-slate-gray": "#737373",
      },
    },
  },
};

Source: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks · As of 2026-05-02 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the Microsoft name and any associated marks belong to their owner. Request removal via support.

More from Tech & Hardware