Color
Primary color
Text color
Background color
Samples
TEXTMEMBER FEATURE STORYThe Mystery of Color
Contrast is the difference inluminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined
TEXT FIELDTEXT FIELD - UNDERLINEDROPDOWN MENU
Content
TOGGLE
CHECKBOXRADIO BUTTON
Accessibility checker
Looking good! Your color palette doesn't have any accessibility issues.
Contrast ratio: AA
Slot pair
Non accessible pairs(0)
Accessible pairs(7)
12.98
neutralPrimary on white
4.53
white on themePrimary
11.80
neutralPrimary on neutralLighter
4.53
themePrimary on white
4.91
themeDarkAlt on neutralLighter
12.23
neutralPrimary on themeLighterAlt
5.09
themeDarkAlt on themeLighterAlt
Fabric palette
| Primary | Hex | Foreground | Hex | Background | Hex |
|---|---|---|---|---|---|
themeDarker | #004377 | black | #494847 | neutralTertiaryAlt | #c8c8c8 |
themeDark | #005ba1 | neutralDark | #605e5d | neutralQuaternary | #d0d0d0 |
themeDarkAlt | #006cbe | neutralPrimary | #323130 | neutralQuaternaryAlt | #dadada |
themePrimary | #0078d4 | neutralPrimaryAlt | #8d8b8a | neutralLight | #eaeaea |
themeSecondary | #1a86d9 | neutralSecondary | #a3a2a0 | neutralLighter | #f4f4f4 |
themeTertiary | #5ca9e5 | neutralTertiary | #c8c8c8 | neutralLighterAlt | #f8f8f8 |
themeLight | #a9d3f2 | white | #ffffff | ||
themeLighter | #d0e7f8 | ||||
themeLighterAlt | #f3f9fd |
Semantic slots
Slot name
None
Netural
Soft
Strong
Defaults(13)
bodyBackground
white
neturalLighter
themeLighterAlt
themePrimary
bodyStandoutBackground
neutralLighterAlt
neutralLight
themeLighter
themeDarkAlt
bodyFrameBackground
white
neutralLight
themeLighter
themeDarkAlt
bodyFrameDivider
neutralLight
neutralLight
themeLighter
themeDarkAlt
bodyText
neutralPrimary
neutralPrimary
neutralPrimary
white
bodyTextChecked
black
N/A
N/A
N/A
bodySubtext
neutralSecondary
neutralSecondary
neutralSecondary
white
bodyDivider
neutralLight
neutralQuaternaryAlt
neutralQuaternaryAlt
themeTertiary
disabledBodyText
neutralTertiary
neturalTertiary
neturalTertiary
neutralQuaternary
focusBorder
neutralSecondary
neutralSecondary
neutralSecondary
white
variantBorder
neutralLight
neutralLight
neutralLight
themeDarkAlt
variantBorderHovered
neutralTertiary
neutralTertiary
neutralTertiary
themeDarker
defaultStateBackground
neutralLighterAlt
neutralLight
neutralLight
neutralLightAlt
Links(4)
Buttons(25)
Inputs(14)
Lists(7)
Menus(8)