Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, border, background, and hover states.
Use theme colors in wayfinding, navigation, and key interactions like primary actions and current or selected indicators.
Background
ms-bgColor-themeDarker
Font
ms-fontColor-themeDarker
Acceptable Backgrounds
Border
ms-borderColor-themeDarker
Background
ms-bgColor-themeDark
Font
ms-fontColor-themeDark
Acceptable Backgrounds
Border
ms-borderColor-themeDark
Background
ms-bgColor-themeDarkAlt
Font
ms-fontColor-themeDarkAlt
Acceptable Backgrounds
Border
ms-borderColor-themeDarkAlt
Background
ms-bgColor-themePrimary
Font
ms-fontColor-themePrimary
Acceptable Backgrounds
Border
ms-borderColor-themePrimary
Background
ms-bgColor-themeSecondary
Font
ms-fontColor-themeSecondary
Border
ms-borderColor-themeSecondary
Background
ms-bgColor-themeTertiary
Font
ms-fontColor-themeTertiary
Border
ms-borderColor-themeTertiary
Background
ms-bgColor-themeLight
Font
ms-fontColor-themeLight
Border
ms-borderColor-themeLight
Background
ms-bgColor-themeLighter
Font
ms-fontColor-themeLighter
Border
ms-borderColor-themeLighter
Background
ms-bgColor-themeLighterAlt
Font
ms-fontColor-themeLighterAlt
Border
ms-borderColor-themeLighterAlt
Neutral colors include black, gray, and white. Use darker shades of gray for primary content, such as text and titles. Use black sparingly for high-impact strings (labels, names) and hover states. Use lighter shades of gray for supporting graphic elements and page areas.
Background
ms-bgColor-black
Font
ms-fontColor-black
Acceptable Backgrounds
Border
ms-borderColor-black
Background
ms-bgColor-neutralDark
Font
ms-fontColor-neutralDark
Border
ms-borderColor-neutralDark
Background
ms-bgColor-neutralPrimary
Font
ms-fontColor-neutralPrimary
Acceptable Backgrounds
Border
ms-borderColor-neutralPrimary
Background
ms-bgColor-neutralPrimaryAlt
Font
ms-fontColor-neutralPrimaryAlt
Border
ms-borderColor-neutralPrimaryAlt
Background
ms-bgColor-neutralSecondary
Font
ms-fontColor-neutralSecondary
Acceptable Backgrounds
Border
ms-borderColor-neutralSecondary
Background
ms-bgColor-neutralSecondaryAlt
Font
ms-fontColor-neutralSecondaryAlt
Acceptable Backgrounds
Border
ms-borderColor-neutralSecondaryAlt
Background
ms-bgColor-neutralTertiary
Font
ms-fontColor-neutralTertiary
Border
ms-borderColor-neutralTertiary
Background
ms-bgColor-neutralTertiaryAlt
Font
ms-fontColor-neutralTertiaryAlt
Border
ms-borderColor-neutralTertiaryAlt
Background
ms-bgColor-neutralLight
Font
ms-fontColor-neutralLight
Border
ms-borderColor-neutralLight
Background
ms-bgColor-neutralLighter
Font
ms-fontColor-neutralLighter
Border
ms-borderColor-neutralLighter
Background
ms-bgColor-neutralLighterAlt
Font
ms-fontColor-neutralLighterAlt
Border
ms-borderColor-neutralLighterAlt
Background
ms-bgColor-white
Font
ms-fontColor-white
Border
ms-borderColor-white
Fabric also includes accent colors from the Microsoft color palette.
Background
ms-bgColor-yellow
Font
ms-fontColor-yellow
Border
ms-borderColor-yellow
Background
ms-bgColor-yellowLight
Font
ms-fontColor-yellowLight
Border
ms-borderColor-yellowLight
Background
ms-bgColor-orange
Font
ms-fontColor-orange
Border
ms-borderColor-orange
Background
ms-bgColor-orangeLight
Font
ms-fontColor-orangeLight
Border
ms-borderColor-orangeLight
Background
ms-bgColor-orangeLighter
Font
ms-fontColor-orangeLighter
Border
ms-borderColor-orangeLighter
Background
ms-bgColor-redDark
Font
ms-fontColor-redDark
Border
ms-borderColor-redDark
Background
ms-bgColor-red
Font
ms-fontColor-red
Border
ms-borderColor-red
Background
ms-bgColor-magentaLight
Font
ms-fontColor-magentaLight
Border
ms-borderColor-magentaLight
Background
ms-bgColor-magenta
Font
ms-fontColor-magenta
Border
ms-borderColor-magenta
Background
ms-bgColor-magentaDark
Font
ms-fontColor-magentaDark
Border
ms-borderColor-magentaDark
Background
ms-bgColor-purpleLight
Font
ms-fontColor-purpleLight
Border
ms-borderColor-purpleLight
Background
ms-bgColor-purple
Font
ms-fontColor-purple
Border
ms-borderColor-purple
Background
ms-bgColor-purpleDark
Font
ms-fontColor-purpleDark
Border
ms-borderColor-purpleDark
Background
ms-bgColor-blueLight
Font
ms-fontColor-blueLight
Border
ms-borderColor-blueLight
Background
ms-bgColor-blueMid
Font
ms-fontColor-blueMid
Border
ms-borderColor-blueMid
Background
ms-bgColor-blue
Font
ms-fontColor-blue
Border
ms-borderColor-blue
Background
ms-bgColor-blueDark
Font
ms-fontColor-blueDark
Border
ms-borderColor-blueDark
Background
ms-bgColor-tealLight
Font
ms-fontColor-tealLight
Border
ms-borderColor-tealLight
Background
ms-bgColor-teal
Font
ms-fontColor-teal
Border
ms-borderColor-teal
Background
ms-bgColor-tealDark
Font
ms-fontColor-tealDark
Border
ms-borderColor-tealDark
Background
ms-bgColor-greenLight
Font
ms-fontColor-greenLight
Border
ms-borderColor-greenLight
Background
ms-bgColor-green
Font
ms-fontColor-green
Border
ms-borderColor-green
Background
ms-bgColor-greenDark
Font
ms-fontColor-greenDark
Border
ms-borderColor-greenDark
Use these colors when you need to communicate the system's status, such as in a notification or error message.
Info (Background)
#f4f4f4
Info (Font and Border)
#107c10
Background
ms-bgColor-info
Font
ms-fontColor-info
Border
ms-borderColor-info
Success (Background)
#dff6dd
Success (Font and Border)
#107c10
Background
ms-bgColor-success
Font
ms-fontColor-success
Border
ms-borderColor-success
Alert (Background)
#fed9cc
Alert (Font and Border)
#d83b01
Background
ms-bgColor-alert
Font
ms-fontColor-alert
Border
ms-borderColor-alert
Error (Background)
#fde7e9
Error (Font and Border)
#a80000
Background
ms-bgColor-error
Font
ms-fontColor-error
Border
ms-borderColor-error