← Chrome 150 reference

v150 · covered on mdn

AccentColor and AccentColorText system colors

Two CSS system-color keywords — AccentColor and AccentColorText — that resolve to the OS-level accent color and a contrasting text color for it, letting installed web apps integrate naturally with the device's colour scheme. Chrome 150 ships these keywords for desktop.

this API is documented on MDN

<color> — System colors — CSS — MDN Web Docs

gendn doesn't duplicate APIs that MDN already covers. MDN's <color> type page documents the full list of CSS system-color keywords, including AccentColor and AccentColorText, with descriptions of when they apply and how they interact with forced-color modes. Chrome 150 browser-compat data will be reflected once updated.

quick example

/* Button that uses the OS accent colour as its background */
.primary-button {
  background-color: AccentColor;
  color: AccentColorText;
  border: none;
  padding: 0.5rem 1rem;
}

/* Can also be used in forced-color / high-contrast mode */
@media (forced-colors: active) {
  .highlight {
    outline: 2px solid AccentColor;
  }
}

AccentColor reflects the same system accent colour that Windows, macOS, and other platforms expose for the OS highlight colour. AccentColorText provides a guaranteed-accessible foreground colour for text placed on top of AccentColor backgrounds. Unlike the accent-color CSS property (which controls form control tinting), these keywords expose the raw system colour palette and can be used on any element.

references