Back to Foundations

Complete color system for data visualization and Microsoft Fabric experiences

WCAG AA CompliantUnified Icon PaletteLight & Dark Mode
Main Palette
Colors from the unified icon palette with 3:1 contrast ratio (WCAG AA for Graphical Objects)
Yellow
Insights
Amber
Insights: Collections
Red
Monitoring
Rose
Pink
Fuchsia
Purple
Analytics
Violet
Indigo
Blue
Data
Sky
Data: Storage
Cyan
Teal
Fabric
Green
Emerald
Lime
Code
Neutral Grays
Microsoft brand warm grays and neutral grays
MS Gray 1
MS Gray 2
MS Gray 3
Neutral
Usage Guidelines

When to Use Solid Colors

  • UI elements requiring clear distinction and hierarchy
  • Icons and small graphical elements
  • Text and typography color accents

When to Use Gradients

  • Large surface areas and backgrounds
  • Data visualizations and charts
  • Key story elements requiring attention

Accessibility Note

All primary tints have a 3:1 contrast ratio and meet WCAG AA standards for Graphical Objects when positioned on Fluent Neutral/Background/3/Rest in both Light and Dark modes.