Widely available Supported across all major browsers. Safe to use in production.

System colors

The <system-color> CSS data type usually reflects the default color choices used for the different parts of a web page.

However, user agents can provide an accessibility feature called forced colors mode, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, <system-color> exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is high contrast mode on Windows.

In forced colors mode, authors should use colors from the <system-color> type for all properties that are not in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.

Authors can detect forced colors mode using the forced-colors media feature.

A <system-color> value can be used anywhere a <color> can be used.

Color

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.system-color
1
12
1
1
18
1
CSS type
system-color.accentcolor accentcolortext

`AccentColor` and `AccentColorText`
115
115
103
16.5
115
16.5
system-color.buttonborder

`ButtonBorder`
101
101
109
101
system-color.mark

`Mark`
102
102
109
102
system-color.marktext

`MarkText`
102
102
109
102
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Implementation note
  • Only supports a fallback: The native color when accent colour (in macOS' appearance panel) is set to 'multicolour'. On iOS falls back to the blue accent colour
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Implementation note
  • Only supports a fallback: The native color when accent colour (in macOS' appearance panel) is set to 'multicolour'. On iOS falls back to the blue accent colour

Syntax

CSS 
.button {
  background-color: ButtonFace;
  color: ButtonText;
  border-color: ButtonBorder;
}

Live demo

button typecol-

CSS button typecol- demo.

PreviewFullscreen

Canvas type

CSS Canvas type demo.

PreviewFullscreen

Highlight type

CSS Highlight type demo.

PreviewFullscreen

Use cases

  • Using System colors

    The <system-color> CSS data type usually reflects the default color choices used for the different parts of a web page.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links