Skip to content

Microsoft · Fluent UI

Fluent Design colors

Communication blues, neutral ramps, and semantic status colors from the Fluent Design language — the same families you see in Microsoft 365 and Fluent UI React themes, with HEX for web handoff.

Why this page exists

Fluent tokens use role names (themePrimary, neutralSecondary) that do not paste cleanly into Figma without a lookup. This table maps the commonly cited defaults to HEX so prototypes align with Office-style products.

How to use it

  1. Filter by role — communication blue for links, neutrals for chrome, semantic rows for alerts.
  2. Copy HEX into CSS or design tokens; rename to your semantic layer in code.
  3. Validate text on themePrimary and neutralPrimary with the contrast checker.

Use a different reference when…

You ship a non-Microsoft brand — start from Tailwind or CSS variables instead.

Practical tips

  • Light theme neutrals (Lighter Alt through Primary) cover most app shells.
  • Success and error backgrounds are tints — pair with the solid semantic foreground.

Related on ChromaXP

More references and tools.

Tailwind CSSUtility-scale neutrals when Fluent feels too corporate. CSS variablesExport semantic ramps from a locked primary. All palettesReturn to the palettes hub.

FAQ

Are these official Microsoft HEX values?

They mirror widely published Fluent defaults for mockups. Production apps should read tokens from your Fluent theme package.

Where is Fluent accent purple used?

Accent (#8764B8) appears in SharePoint and some marketing surfaces — not every Fluent app exposes it.

Can I use these in PowerPoint?

Yes for approximate slides; use brand guidelines for regulated materials.