Fluent UI Core - Color
Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, border, background, and hover states.
Theme colors
Use theme colors in wayfinding, navigation, and key interactions like primary actions and current or selected indicators.
#004578
Background
ms-bgColor-themeDarker
Font
ms-fontColor-themeDarker
Border
ms-borderColor-themeDarker
#005A9E
Background
ms-bgColor-themeDark
Font
ms-fontColor-themeDark
Border
ms-borderColor-themeDark
#106EBE
Background
ms-bgColor-themeDarkAlt
Font
ms-fontColor-themeDarkAlt
Border
ms-borderColor-themeDarkAlt
#0078D7
Background
ms-bgColor-themePrimary
Font
ms-fontColor-themePrimary
Border
ms-borderColor-themePrimary
#2b88D8
Background
ms-bgColor-themeSecondary
Font
ms-fontColor-themeSecondary
Border
ms-borderColor-themeSecondary
#71AFE5
Background
ms-bgColor-themeTertiary
Font
ms-fontColor-themeTertiary
Border
ms-borderColor-themeTertiary
#C7E0F4
Background
ms-bgColor-themeLight
Font
ms-fontColor-themeLight
Border
ms-borderColor-themeLight
#DEECF9
Background
ms-bgColor-themeLighter
Font
ms-fontColor-themeLighter
Border
ms-borderColor-themeLighter
#EFF6FC
Background
ms-bgColor-themeLighterAlt
Font
ms-fontColor-themeLighterAlt
Border
ms-borderColor-themeLighterAlt
Neutral Colors
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.
#000000
Background
ms-bgColor-black
Font
ms-fontColor-black
Border
ms-borderColor-black
#11100f
Background
ms-bgColor-gray220
Font
ms-fontColor-gray220
Border
ms-borderColor-gray220
#161514
Background
ms-bgColor-gray210
Font
ms-fontColor-gray210
Border
ms-borderColor-gray210
#1b1a19
Background
ms-bgColor-gray200
Font
ms-fontColor-gray200
Border
ms-borderColor-gray200
#201f1e
Background
ms-bgColor-gray190
Font
ms-fontColor-gray190
Border
ms-borderColor-gray190
#252423
Background
ms-bgColor-gray180
Font
ms-fontColor-gray180
Border
ms-borderColor-gray180
#292827
Background
ms-bgColor-gray170
Font
ms-fontColor-gray170
Border
ms-borderColor-gray170
#323130
Background
ms-bgColor-gray160
Font
ms-fontColor-gray160
Border
ms-borderColor-gray160
#3b3a39
Background
ms-bgColor-gray150
Font
ms-fontColor-gray150
Border
ms-borderColor-gray150
#484644
Background
ms-bgColor-gray140
Font
ms-fontColor-gray140
Border
ms-borderColor-gray140
#605e5c
Background
ms-bgColor-gray130
Font
ms-fontColor-gray130
Border
ms-borderColor-gray130
#797775
Background
ms-bgColor-gray120
Font
ms-fontColor-gray120
Border
ms-borderColor-gray120
#8a8886
Background
ms-bgColor-gray110
Font
ms-fontColor-gray110
Border
ms-borderColor-gray110
#979593
Background
ms-bgColor-gray100
Font
ms-fontColor-gray100
Border
ms-borderColor-gray100
#a19f9d
Background
ms-bgColor-gray90
Font
ms-fontColor-gray90
Border
ms-borderColor-gray90
#b3b0ad
Background
ms-bgColor-gray80
Font
ms-fontColor-gray80
Border
ms-borderColor-gray80
#bebbb8
Background
ms-bgColor-gray70
Font
ms-fontColor-gray70
Border
ms-borderColor-gray70
#c8c6c4
Background
ms-bgColor-gray60
Font
ms-fontColor-gray60
Border
ms-borderColor-gray60
#d2d0ce
Background
ms-bgColor-gray50
Font
ms-fontColor-gray50
Border
ms-borderColor-gray50
#e1dfdd
Background
ms-bgColor-gray40
Font
ms-fontColor-gray40
Border
ms-borderColor-gray40
#edebe9
Background
ms-bgColor-gray30
Font
ms-fontColor-gray30
Border
ms-borderColor-gray30
#f3f2f1
Background
ms-bgColor-gray20
Font
ms-fontColor-gray20
Border
ms-borderColor-gray20
#faf9f8
Background
ms-bgColor-gray10
Font
ms-fontColor-gray10
Border
ms-borderColor-gray10
#ffffff
Background
ms-bgColor-white
Font
ms-fontColor-white
Border
ms-borderColor-white
Accent Colors
Fabric also includes accent colors from the Microsoft color palette.
#FFB900
Background
ms-bgColor-yellow
Font
ms-fontColor-yellow
Border
ms-borderColor-yellow
#FFF100
Background
ms-bgColor-yellowLight
Font
ms-fontColor-yellowLight
Border
ms-borderColor-yellowLight
#D83B01
Background
ms-bgColor-orange
Font
ms-fontColor-orange
Border
ms-borderColor-orange
#EA4300
Background
ms-bgColor-orangeLight
Font
ms-fontColor-orangeLight
Border
ms-borderColor-orangeLight
#FF8C00
Background
ms-bgColor-orangeLighter
Font
ms-fontColor-orangeLighter
Border
ms-borderColor-orangeLighter
#A80000
Background
ms-bgColor-redDark
Font
ms-fontColor-redDark
Border
ms-borderColor-redDark
#E81123
Background
ms-bgColor-red
Font
ms-fontColor-red
Border
ms-borderColor-red
#E3008C
Background
ms-bgColor-magentaLight
Font
ms-fontColor-magentaLight
Border
ms-borderColor-magentaLight
#B4009E
Background
ms-bgColor-magenta
Font
ms-fontColor-magenta
Border
ms-borderColor-magenta
#5C005C
Background
ms-bgColor-magentaDark
Font
ms-fontColor-magentaDark
Border
ms-borderColor-magentaDark
#B4A0FF
Background
ms-bgColor-purpleLight
Font
ms-fontColor-purpleLight
Border
ms-borderColor-purpleLight
#5C2D91
Background
ms-bgColor-purple
Font
ms-fontColor-purple
Border
ms-borderColor-purple
#32145A
Background
ms-bgColor-purpleDark
Font
ms-fontColor-purpleDark
Border
ms-borderColor-purpleDark
#00BCF2
Background
ms-bgColor-blueLight
Font
ms-fontColor-blueLight
Border
ms-borderColor-blueLight
#00188F
Background
ms-bgColor-blueMid
Font
ms-fontColor-blueMid
Border
ms-borderColor-blueMid
#0078d7
Background
ms-bgColor-blue
Font
ms-fontColor-blue
Border
ms-borderColor-blue
#002050
Background
ms-bgColor-blueDark
Font
ms-fontColor-blueDark
Border
ms-borderColor-blueDark
#00B294
Background
ms-bgColor-tealLight
Font
ms-fontColor-tealLight
Border
ms-borderColor-tealLight
#008272
Background
ms-bgColor-teal
Font
ms-fontColor-teal
Border
ms-borderColor-teal
#004B50
Background
ms-bgColor-tealDark
Font
ms-fontColor-tealDark
Border
ms-borderColor-tealDark
#BAD80A
Background
ms-bgColor-greenLight
Font
ms-fontColor-greenLight
Border
ms-borderColor-greenLight
#107C10
Background
ms-bgColor-green
Font
ms-fontColor-green
Border
ms-borderColor-green
#004B1C
Background
ms-bgColor-greenDark
Font
ms-fontColor-greenDark
Border
ms-borderColor-greenDark
Message Colors
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