Color collection
Fluent UI Colors
Microsoft's Fluent design system — the color tokens behind Office 365, Teams, Azure and Windows. Two semantic ramps: a brand-blue theme ramp and a neutral grayscale ramp.
About Fluent UI colors
Fluent UI (formerly Office UI Fabric) is Microsoft's open-source React component library. Unlike palette-based systems (Tailwind, Material), Fluent uses semantic token names — each color has a descriptive role like themePrimary or neutralSecondary.
The default theme is built around #0078d4 (Microsoft Blue), making it instantly recognizable from products like Outlook, Teams and the Azure portal. The neutral ramp uses warm-tinted grays derived from the same base.
Using Fluent UI colors
import { getTheme } from '@fluentui/react';
const palette = getTheme().palette;
palette.themePrimary // '#0078d4'
palette.neutralSecondary // '#605e5c'
Theme
Primary brand color ramp — used for interactive elements, highlights and focus rings.
Neutral
Neutral/grayscale ramp — used for backgrounds, text, borders and dividers.