accent-color

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Try it

Browsers that support accent-color currently apply it to the following HTML elements:

Each user agent has an accent color, with variations to ensure legibility and contrast. That accent color is not used by every user-interface control nor in every state of the control. The accent-color is only applied to user-interface controls that use an accent color in the states where it is applicable.

Syntax

css

/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

Values

auto: Represents a UA-chosen color, which should match the accent color of the platform, if any.
<color>: Specifies the color to be used as the accent color.

Formal definition

Initial value	`auto`
Applies to	all elements
Inherited	yes
Computed value	`auto` is computed as specified and `<color>` values are computed as defined for the `color` property.
Animation type	by computed value type

Formal syntax

accent-color = 
  auto     |
  <color>

Examples

Setting a custom accent color

HTML

html

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

CSS

css

input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

Result

Specifications

Specification
CSS Basic User Interface Module Level 4 # widget-accent

Browser compatibility

BCD tables only load in the browser