CSS <system-color> Data Type

The CSS <system-color> data type represents colors chosen by the user, browser, or operating system for interface elements and document content. System colors can adapt to the user's color scheme and accessibility settings instead of using a fixed color value.

Syntax

A <system-color> value is specified using one of the predefined system color keywords:

color: CanvasText;
background-color: Canvas;
border-color: ButtonBorder;

The keyword identifies the purpose of the color rather than a specific RGB, hexadecimal, or other fixed color value.

System Color Values

CSS defines the following system color keywords:

Value	Description
`AccentColor`	Background color of accented user interface controls.
`AccentColorText`	Text color of accented user interface controls.
`ActiveText`	Text color of active links.
`ButtonBorder`	Base border color of push buttons.
`ButtonFace`	Background color of push buttons.
`ButtonText`	Text color of push buttons.
`Canvas`	Background color of application content or documents.
`CanvasText`	Text color of application content or documents.
`Field`	Background color of input fields.
`FieldText`	Text color of input fields.
`GrayText`	Color of disabled text.
`Highlight`	Background color of selected text.
`HighlightText`	Text color of selected text.
`LinkText`	Text color of unvisited, inactive links.
`Mark`	Background color of specially marked text.
`MarkText`	Text color of specially marked text.
`SelectedItem`	Background color of selected interface items.
`SelectedItemText`	Text color of selected interface items.
`VisitedText`	Text color of visited links.

System color keywords are ASCII case-insensitive, although they are commonly written using the capitalization shown above.

System Color Pairs

Many system colors are designed as matching foreground and background pairs. Using the matching values helps maintain readable contrast when the user's color settings change.

Background	Foreground
`Canvas`	`CanvasText`
`ButtonFace`	`ButtonText`
`Field`	`FieldText`
`Highlight`	`HighlightText`
`Mark`	`MarkText`
`SelectedItem`	`SelectedItemText`
`AccentColor`	`AccentColorText`

Authors should avoid assuming that unrelated system color keywords will always provide sufficient contrast when used together.

Forced Colors

System colors are particularly useful when forced colors mode is active. In this mode, the browser may replace author-selected colors with a limited palette chosen by the user or system to improve readability and accessibility.

@media (forced-colors: active) {
  .notice {
    color: CanvasText;
    background-color: Canvas;
    border-color: ButtonBorder;
  }
}

Using system colors can help custom interface elements remain consistent with the colors available in the user's forced color palette.

Deprecated System Colors

Earlier CSS specifications defined additional system color keywords such as ActiveBorder, AppWorkspace, InfoText, Menu, Scrollbar, ThreeDFace, Window, and WindowText. These older values are deprecated and should not be used in new CSS.

Browsers are required to support the deprecated keywords by mapping them to corresponding current system colors, but authors should use the current <system-color> keywords instead.

<system-color> Example

The following example uses matching system color pairs for document content, a button, and marked text:

.system-example {
  color: CanvasText;
  background-color: Canvas;
}
.system-button {
  color: ButtonText;
  background-color: ButtonFace;
  border: 2px solid ButtonBorder;
}
.system-mark {
  color: MarkText;
  background-color: Mark;
}

Browser Result

Canvas with CanvasText

Mark with MarkText

The exact colors in the Browser Result can vary because system colors are determined by the user's environment rather than fixed by the stylesheet.

The <system-color> data type is part of the CSS <color> type and can be used with properties that accept color values, including:

Specifications

The <system-color> data type is defined in the CSS Color Module Level 4 .

CSS <system-color> Data Type