Microsoft Azure

Microsoft Azure palette anchored on Azure Blue (#0078D4) — the Fluent communications blue carried across the Azure Portal chrome, azure.microsoft.com, and the Azure architecture icon library. The Azure sub-brand uses the Microsoft Fluent neutral ramp and the same Segoe UI typography as the parent brand, but tightens the hue identity around a single blue — distinct from the four-square parent quadrant set — so that Azure surfaces read unambiguously as cloud-platform rather than corporate Microsoft.

14 swatches 14 light roles 14 dark roles techcloudazuremicrosoftfluentblueinfrastructure

Swatches

azure-blue
#0078D4
The Azure signature blue — Microsoft Fluent's Communications primary, used on the Azure Portal chrome, the azure.microsoft.com hero, and the canonical Azure-Cloud logo fill.
azure-blue-dark
#005A9E
Pressed/active state for the Azure primary CTA; the deeper blue used on hover transitions in the Azure Portal.
azure-blue-light
#50E6FF
Bright cyan accent used in Azure marketing illustrations and in the Azure Cloud icon's secondary tone.
azure-navy
#243A5E
Deep navy used on Azure architecture-diagram backgrounds and Azure presentation chrome. The dark-canvas brand color.
azure-navy-deep
#0B2545
Darkest navy used in Azure marketing dark-mode hero compositions.
fluent-near-black
#1F1F1F
Fluent neutral foreground — primary text on light surfaces.
fluent-gray-160
#605E5C
Fluent neutral foreground 2 — secondary text.
fluent-gray-130
#8A8886
Fluent neutral foreground 3 — tertiary text and dividers.
fluent-gray-30
#EDEBE9
Fluent neutral background 3 — subtle surface tint.
fluent-gray-20
#F3F2F1
Fluent neutral background 2 — page-level background.
fluent-white
#FFFFFF
Base background and reversed text on chromatic surfaces.
azure-error
#A4262C
Fluent system error red — destructive / validation-failure.
azure-success
#107C10
Fluent system success green — confirmation / healthy state.
azure-warning
#797673
Fluent system warning neutral — Azure leans on amber sparingly and instead uses a muted neutral for caution states on chrome.

Mode role mappings

Light mode (14 roles)

accent → azure-blue-light
accent-hover → azure-blue
background → fluent-white
error → azure-error
primary → azure-blue
primary-hover → azure-blue-dark
success → azure-success
surface → fluent-gray-20
surface-elevated → fluent-white
text-primary → fluent-near-black
text-secondary → fluent-gray-160
text-tertiary → fluent-gray-130
warning → azure-warning
warning-hover → azure-navy

Dark mode (14 roles)

accent → azure-blue-light
accent-hover → azure-blue
background → azure-navy-deep
error → azure-error
primary → azure-blue
primary-hover → azure-blue-light
success → azure-success
surface → azure-navy
surface-elevated → azure-blue-dark
text-primary → fluent-white
text-secondary → fluent-gray-30
text-tertiary → fluent-gray-130
warning → azure-warning
warning-hover → azure-navy

Provenance

Source
https://www.microsoft.com/design/
License
Proprietary — All Rights Reserved
Attribution
Microsoft, Azure, the Azure logo, Fluent, and Segoe UI are trademarks of the Microsoft group of companies. Azure Blue (#0078D4) is documented on the Microsoft Fluent 2 color system (fluent2.microsoft.design/color) as the Brand / Communications primary; the same value appears across azure.microsoft.com and the Azure Portal chrome.
Imported
2026-05-18
Notes
Azure uses the Microsoft parent's Communications Blue as its signature — there is no separate "Azure Blue" hex in Fluent; the Azure brand and the Microsoft Fluent system share #0078D4. The Azure sub-brand also publishes a deeper "Azure dark" navy (#243A5E) used on architecture-diagram backgrounds and re:Build presentation slides; this atom captures both. Light and dark modes are authored.