How the CSS system-color keywords render the accent color of a page — both the OS-provided default and per-element overrides.
AccentColor and AccentColorText are CSS system color keywords. AccentColor is the accent color of the page, and AccentColorText is a color guaranteed to be legible when painted on top of it.
When the accent-color property is left at its default (auto), these keywords resolve to the operating system's accent color — the same tint used by native checkboxes, radios, and range sliders. When accent-color is set to any explicit value, the keywords resolve to that color instead, and AccentColorText automatically flips between a light or dark contrasting color to stay readable.
Explicit override
accent-color
Pick a color below to set accent-color on this section. Watch
the native controls and the AccentColor box update together. A few
options are intentionally dark so you can confirm the text flips to a light
contrasting color.
System default
accent-color: auto
With accent-color: auto, the keywords resolve to your operating
system's accent color. Change your OS accent color and reload to see the
AccentColor box and native controls follow it.
Animation interpolation
accent-color in animations
The box continuously animates between the selected plain color and the
selected AccentColor/AccentColorText pair. Choose
auto to use the operating system's accent color as the
animation endpoint.
Accent-color endpoint
Canvas painting
AccentColor in <canvas>
Pick an accent color below to repaint the canvas. Its background is drawn
with AccentColor, and its label is drawn with
AccentColorText. Choose auto to draw with the
operating system's accent color.