Outlook
Outlook's product palette, anchored on the Outlook envelope-with-O mark (a deep-navy envelope, a pale-blue flap, and the white "O" ring) and on Microsoft's Communications Blue (#0067B8 / #0078D4) as the primary product action color. Outlook is a product-brand under the Microsoft parent (see brands/microsoft/1.0.0); it inherits Microsoft's Fluent design language, the Segoe UI typographic family, and the enterprise-clear voice.
11 swatches 12 light roles 10 dark roles
Swatches
outlook-deep-blue
#2A446F
The outer-envelope navy. Captured from the SVG fill on the Outlook logo on outlook.live.com. The dominant identity hue of the Outlook mark.
outlook-action-blue
#0066FF
The "O" ring on the Outlook envelope and the brand's vibrant mid-blue. Used on the live product surface for the logo letter-mark fill.
outlook-sky
#B3DAF0
The pale-blue envelope flap on the Outlook mark. A light-tint accent that softens the deep-navy outer fill.
communications-blue
#0078D4
Microsoft's Fluent system primary, inherited from the Microsoft parent. The canonical CTA / link affordance across Outlook product chrome.
outlook-link-blue
#0067B8
The action-text blue captured from outlook.live.com — Fluent's darker brand variant used for links and primary buttons on light surfaces, where #0078D4 would lose AA contrast on small type.
outlook-ink
#17253D
Primary text and heading color, captured from the live product. A deep navy-tinged near-black that pairs with the envelope-deep-blue identity hue.
outlook-near-black
#1F1F1F
Fluent's soft near-black for body text on light surfaces.
outlook-gray-160
#605E5C
Secondary text and inactive UI (Fluent Neutral Foreground 2), inherited from the Microsoft parent.
outlook-gray-30
#EDEBE9
Subtle surface tint (Fluent Neutral Background 3).
outlook-canvas
#FFFDFB
The warm-white inbox canvas captured from outlook.live.com. A barely-off-white surface that reduces eye-strain on long reading sessions.
outlook-white
#FFFFFF
Base background and reversed text on chromatic surfaces.
Mode role mappings
Light mode (12 roles)
accent
→ outlook-action-blue accent-hover
→ outlook-link-blue background
→ outlook-canvas border
→ outlook-gray-30 error
→ outlook-action-blue primary
→ outlook-link-blue primary-hover
→ communications-blue success
→ outlook-action-blue surface
→ outlook-gray-30 surface-elevated
→ outlook-white text-primary
→ outlook-ink text-secondary
→ outlook-gray-160 Dark mode (10 roles)
accent
→ outlook-action-blue accent-hover
→ outlook-sky background
→ outlook-ink border
→ outlook-gray-160 primary
→ outlook-sky primary-hover
→ outlook-action-blue surface
→ outlook-deep-blue surface-elevated
→ outlook-gray-160 text-primary
→ outlook-white text-secondary
→ outlook-sky Provenance
- Source
- https://outlook.live.com/mail/
- License
Proprietary — All Rights Reserved- Attribution
- Outlook, the Outlook envelope mark, Fluent, and Segoe UI are trademarks of the Microsoft group of companies. Brand colors documented here are captured from the live outlook.live.com product surface (computed styles on the Outlook logo SVG paths and the product chrome) and corroborated by the public Fluent 2 design system at fluent2.microsoft.design.
- Imported
-
2026-05-18 - Notes
- Outlook color values captured from the live outlook.live.com product on 2026-05-18 — the envelope-mark SVG fills (deep navy #2A446F, sky #B3DAF0, action blue #0066FF) and product chrome (text #17253D, action text #0067B8, page background #FFFDFB). This is brand-atoms' read of public Outlook surfaces; not an official Microsoft brand document. Outlook inherits its typography (Segoe UI) and Communications Blue primary from the Microsoft parent atom; the values here are the Outlook-specific envelope mark hues plus the Microsoft baseline neutrals.