CSS System Colors Cheatsheet

CSS System Colors are special color keywords defined in CSS Color Module Level 4 that automatically adapt to the user's operating system theme — light or dark. Unlike fixed hex or RGB values, system colors like Canvas, ButtonFace, or Highlight change dynamically, allowing web interfaces to feel native and respect user preferences without writing complex theme-switching logic.

Regular colors like #ffffff or rgb(0,0,0) stay the same regardless of the user's theme. System colors, however, adapt in real-time. For instance, Canvas is typically white in light mode but becomes dark gray or black in dark mode. This makes system colors ideal for building accessible, theme-respecting UIs with minimal effort.

Canvas represents the main document background — the page itself. Field represents form input backgrounds (like text fields and textareas). In most themes, Field is slightly lighter or darker than Canvas to create visual distinction between the page and interactive form elements.

Modern browsers — Chrome 89+, Firefox 88+, Safari 15+, Edge 89+ — fully support CSS System Colors. They've been part of the official CSS specification since CSS Color Module Level 4. For older browsers, system colors degrade gracefully (they simply won't adapt to theme changes), so you can use them as progressive enhancements.

Use the color-scheme CSS property on an element to tell the browser which theme's system colors to use. For example:

color-scheme: light; /* forces light mode system colors */
color-scheme: dark; /* forces dark mode system colors */

Without this property, the browser uses the OS-level theme by default. You can also use color-scheme: light dark to indicate your site supports both modes.

Yes! System Colors respect the user's OS-level contrast and color preferences. If a user enables a high-contrast theme or custom color scheme in their operating system, your site will automatically reflect those choices when using system colors. This creates a more inclusive experience without extra development effort.

Highlight is used for text selection — when you drag to select text on a page. SelectedItem is used for selected list items or focused options in dropdowns and select menus. They serve different UI purposes and may have different colors depending on the OS theme.

Deprecated system colors like ThreeDFace, ButtonShadow, ThreeDHighlight, and Window are technically still supported in some browsers for legacy reasons, but they originate from the Windows 95 era and should be avoided in new projects. Use modern equivalents like ButtonFace, Canvas, and Field instead.