concept · CSS · PWA

System Palette Explorer

Pick a simulated OS accent colour and watch every UI pattern below update. In a real installed web app, the browser provides this colour automatically — no picker needed.

Simulated AccentColor: #0022ff AccentColorText → contrast ratio pending simulate forced-colors

CSS keyword parse checking…

Current display context checking…

Forced colors checking…

Installed PWA OS accent exposed

Notes.app

Selected listAccentColor

Primary actionAccentColorText

When the page is launched as an installed web app, Chrome can resolve AccentColor to the user’s OS accent and pair it with AccentColorText.

Open web tab neutral fallback

Notes.example

Selected listNeutral

Primary actionNo OS signal

The same CSS parses on ordinary pages, but Chrome avoids exposing a user-specific accent value outside the installed-app context.

Solid button

background: AccentColor; color: AccentColorText

Outline button

color: AccentColor; border-color: AccentColor

Filled badge

Active

Pending

bg: AccentColor / AccentColorText; outline: AccentColor

Focus ring

:focus { outline-color: AccentColor }

Left border accent

Selected item

border-left-color: AccentColor

App icon

📝

My Notes

background: AccentColor; color: AccentColorText

In a real installed PWA running in Chrome 150, every occurrence of AccentColor above would resolve to the OS highlight colour automatically — no JavaScript, no CSS custom property, no explicit colour in the stylesheet. On the open web, the same keywords resolve to a neutral fallback so arbitrary sites do not receive a persistent OS-accent fingerprint. AccentColorText picks the higher-contrast foreground for the accent surface; this page shows that decision by comparing black and white contrast ratios for the simulated accent.

the CSS

/* Works everywhere a <color> is accepted */
.primary-btn {
  background: AccentColor;
  color: AccentColorText;  /* auto-contrast, no calc() needed */
  border: 2px solid AccentColor;
}

/* Focus rings, borders, fills — same pattern */
:focus {
  outline: 3px solid AccentColor;
}

.selected {
  border-left: 4px solid AccentColor;
}

/* In forced-colors mode, the browser maps system colors to the user palette. */
@media (forced-colors: active) {
  .primary-btn {
    background: AccentColor;
    color: AccentColorText;
  }
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

the CSS

see also

implementation reference