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.

Theme Darker
#004578
Aa

Background
ms-bgColor-themeDarker

Font
ms-fontColor-themeDarker

Border
ms-borderColor-themeDarker

Theme Dark
#005A9E
Aa

Background
ms-bgColor-themeDark

Font
ms-fontColor-themeDark

Border
ms-borderColor-themeDark

Theme Dark Alt
#106EBE
Aa

Background
ms-bgColor-themeDarkAlt

Font
ms-fontColor-themeDarkAlt

Border
ms-borderColor-themeDarkAlt

Theme Primary
#0078D7
Aa

Background
ms-bgColor-themePrimary

Font
ms-fontColor-themePrimary

Border
ms-borderColor-themePrimary

Theme Secondary
#2b88D8
Aa

Background
ms-bgColor-themeSecondary

Font
ms-fontColor-themeSecondary

Border
ms-borderColor-themeSecondary

Theme Tertiary
#71AFE5
Aa

Background
ms-bgColor-themeTertiary

Font
ms-fontColor-themeTertiary

Border
ms-borderColor-themeTertiary

Theme Light
#C7E0F4
Aa

Background
ms-bgColor-themeLight

Font
ms-fontColor-themeLight

Border
ms-borderColor-themeLight

Theme Lighter
#DEECF9
Aa

Background
ms-bgColor-themeLighter

Font
ms-fontColor-themeLighter

Border
ms-borderColor-themeLighter

Theme Lighter Alt
#EFF6FC
Aa

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.

Black
#000000
Aa

Background
ms-bgColor-black

Font
ms-fontColor-black

Border
ms-borderColor-black

Gray220
#11100f
Aa

Background
ms-bgColor-gray220

Font
ms-fontColor-gray220

Border
ms-borderColor-gray220

Gray210
#161514
Aa

Background
ms-bgColor-gray210

Font
ms-fontColor-gray210

Border
ms-borderColor-gray210

Gray200
#1b1a19
Aa

Background
ms-bgColor-gray200

Font
ms-fontColor-gray200

Border
ms-borderColor-gray200

Gray190
#201f1e
Aa

Background
ms-bgColor-gray190

Font
ms-fontColor-gray190

Border
ms-borderColor-gray190

Gray180
#252423
Aa

Background
ms-bgColor-gray180

Font
ms-fontColor-gray180

Border
ms-borderColor-gray180

Gray170
#292827
Aa

Background
ms-bgColor-gray170

Font
ms-fontColor-gray170

Border
ms-borderColor-gray170

Gray160
#323130
Aa

Background
ms-bgColor-gray160

Font
ms-fontColor-gray160

Border
ms-borderColor-gray160

Gray150
#3b3a39
Aa

Background
ms-bgColor-gray150

Font
ms-fontColor-gray150

Border
ms-borderColor-gray150

Gray140
#484644
Aa

Background
ms-bgColor-gray140

Font
ms-fontColor-gray140

Border
ms-borderColor-gray140

Gray130
#605e5c
Aa

Background
ms-bgColor-gray130

Font
ms-fontColor-gray130

Border
ms-borderColor-gray130

Gray120
#797775
Aa

Background
ms-bgColor-gray120

Font
ms-fontColor-gray120

Border
ms-borderColor-gray120

Gray110
#8a8886
Aa

Background
ms-bgColor-gray110

Font
ms-fontColor-gray110

Border
ms-borderColor-gray110

Gray100
#979593
Aa

Background
ms-bgColor-gray100

Font
ms-fontColor-gray100

Border
ms-borderColor-gray100

Gray90
#a19f9d
Aa

Background
ms-bgColor-gray90

Font
ms-fontColor-gray90

Border
ms-borderColor-gray90

Gray80
#b3b0ad
Aa

Background
ms-bgColor-gray80

Font
ms-fontColor-gray80

Border
ms-borderColor-gray80

Gray70
#bebbb8
Aa

Background
ms-bgColor-gray70

Font
ms-fontColor-gray70

Border
ms-borderColor-gray70

Gray60
#c8c6c4
Aa

Background
ms-bgColor-gray60

Font
ms-fontColor-gray60

Border
ms-borderColor-gray60

Gray50
#d2d0ce
Aa

Background
ms-bgColor-gray50

Font
ms-fontColor-gray50

Border
ms-borderColor-gray50

Gray40
#e1dfdd
Aa

Background
ms-bgColor-gray40

Font
ms-fontColor-gray40

Border
ms-borderColor-gray40

Gray30
#edebe9
Aa

Background
ms-bgColor-gray30

Font
ms-fontColor-gray30

Border
ms-borderColor-gray30

Gray20
#f3f2f1
Aa

Background
ms-bgColor-gray20

Font
ms-fontColor-gray20

Border
ms-borderColor-gray20

Gray10
#faf9f8
Aa

Background
ms-bgColor-gray10

Font
ms-fontColor-gray10

Border
ms-borderColor-gray10

white
#ffffff
Aa

Background
ms-bgColor-white

Font
ms-fontColor-white

Border
ms-borderColor-white

Accent Colors

Fabric also includes accent colors from the Microsoft color palette.

Yellow
#FFB900
Aa

Background
ms-bgColor-yellow

Font
ms-fontColor-yellow

Border
ms-borderColor-yellow

Light Yellow
#FFF100
Aa

Background
ms-bgColor-yellowLight

Font
ms-fontColor-yellowLight

Border
ms-borderColor-yellowLight

Orange
#D83B01
Aa

Background
ms-bgColor-orange

Font
ms-fontColor-orange

Border
ms-borderColor-orange

Orange Light
#EA4300
Aa

Background
ms-bgColor-orangeLight

Font
ms-fontColor-orangeLight

Border
ms-borderColor-orangeLight

Orange Lighter
#FF8C00
Aa

Background
ms-bgColor-orangeLighter

Font
ms-fontColor-orangeLighter

Border
ms-borderColor-orangeLighter

Dark Red
#A80000
Aa

Background
ms-bgColor-redDark

Font
ms-fontColor-redDark

Border
ms-borderColor-redDark

Red
#E81123
Aa

Background
ms-bgColor-red

Font
ms-fontColor-red

Border
ms-borderColor-red

Magenta Light
#E3008C
Aa

Background
ms-bgColor-magentaLight

Font
ms-fontColor-magentaLight

Border
ms-borderColor-magentaLight

Magenta
#B4009E
Aa

Background
ms-bgColor-magenta

Font
ms-fontColor-magenta

Border
ms-borderColor-magenta

Dark Magenta
#5C005C
Aa

Background
ms-bgColor-magentaDark

Font
ms-fontColor-magentaDark

Border
ms-borderColor-magentaDark

Light Purple
#B4A0FF
Aa

Background
ms-bgColor-purpleLight

Font
ms-fontColor-purpleLight

Border
ms-borderColor-purpleLight

Purple
#5C2D91
Aa

Background
ms-bgColor-purple

Font
ms-fontColor-purple

Border
ms-borderColor-purple

Dark Purple
#32145A
Aa

Background
ms-bgColor-purpleDark

Font
ms-fontColor-purpleDark

Border
ms-borderColor-purpleDark

Light Blue
#00BCF2
Aa

Background
ms-bgColor-blueLight

Font
ms-fontColor-blueLight

Border
ms-borderColor-blueLight

Mid Blue
#00188F
Aa

Background
ms-bgColor-blueMid

Font
ms-fontColor-blueMid

Border
ms-borderColor-blueMid

Blue
#0078d7
Aa

Background
ms-bgColor-blue

Font
ms-fontColor-blue

Border
ms-borderColor-blue

Dark Blue
#002050
Aa

Background
ms-bgColor-blueDark

Font
ms-fontColor-blueDark

Border
ms-borderColor-blueDark

Light Teal
#00B294
Aa

Background
ms-bgColor-tealLight

Font
ms-fontColor-tealLight

Border
ms-borderColor-tealLight

Teal
#008272
Aa

Background
ms-bgColor-teal

Font
ms-fontColor-teal

Border
ms-borderColor-teal

Dark Teal
#004B50
Aa

Background
ms-bgColor-tealDark

Font
ms-fontColor-tealDark

Border
ms-borderColor-tealDark

Light Green
#BAD80A
Aa

Background
ms-bgColor-greenLight

Font
ms-fontColor-greenLight

Border
ms-borderColor-greenLight

Green
#107C10
Aa

Background
ms-bgColor-green

Font
ms-fontColor-green

Border
ms-borderColor-green

Dark Green
#004B1C
Aa

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