CSS Function

System Color Keywords

CSS system colors are predefined keywords that map to the user's operating system color palette, essential for forced-colors mode compatibility.

Syntax

color: Canvas | CanvasText | LinkText | ButtonFace | ButtonText | Field | FieldText | Highlight | HighlightText | GrayText | Mark | MarkText | AccentColor | AccentColorText

Parameters

NameTypeRequiredDescription
CanvaskeywordNoApplication content or document background color
CanvasTextkeywordNoText color on Canvas backgrounds
LinkTextkeywordNoColor for hyperlinks
ButtonFacekeywordNoBackground color of buttons

Examples

Forced-colors-safe styles

Uses system colors that adapt to any forced-colors palette.

css
@media (forced-colors: active) {
  .alert {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}

Custom button in forced-colors

Ensures custom buttons match system button appearance.

css
@media (forced-colors: active) {
  .btn {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
}

Highlight selection

Text selection colors that match the system theme.

css
::selection {
  background: Highlight;
  color: HighlightText;
}

Browser Support

✓

Chrome

v1++

✓

Firefox

v1++

✓

Safari

v1++

✓

Edge

v12++

✓

Opera

v3.5++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

Use arbitrary values: bg-[Canvas] text-[CanvasText] border-[ButtonText]

Frequently Asked Questions

Are system colors always the same?▼
No. They change based on the user's OS theme, dark mode setting, and high contrast configuration. They are dynamic references, not fixed values.
Should I use system colors outside forced-colors mode?▼
Generally no. Outside forced-colors, system colors may not match your design. Use them in @media (forced-colors: active) blocks.

Explore CSS Color Tools

Try our free tools to work with System Color Keywords and other CSS color functions.

Open Tools