Accent-color - Property CSS

accent-color

Summary of characteristics of the `accent-color` property

Quick description

Defines the colour of active or checked items.

Status

Standard

Usable for

HTML

Predefined values

auto | currentcolor

Initial value

auto

Inherited by default

Yes.

Animation type

Computed value : during an animation, the accent-color property gradually changes from one value to another.

W3C Module

CSS Basic User Interface Module

References (W3C)

CSS Basic User Interface Module Level 4

Document status: WD (Working Draft)

The syntax scheme of `accent-color`.

Syntax scheme of the accent-color property

Legend :

color-name is the name of a color. About 140 colors have received a standardized name: see Color chart.
#xxxx is the hexadecimal code of a color, out of 3 or 6 digits, or 8 to indicate transparency.
color is a color specified by one of the functions: rgb() or rgba(), hsl() or hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description.

The accent-color property defines the color of the selected elements. It essentially applies to the following:

Checkbox when checked.
Radio button when selected.
Left side of the input fields of range type.
Left side of the progress bars.

Values for `accent-color`.

accent-color: auto;

The browser decides what color the selected or checked elements (form) will be. In general, the color is chosen for Maximize contrast with unselected or unchecked items.
accent-color: currentColor;

Selected or checked elements of a form will be the same color as the text.
accent-color: #00AA00;

A color expressed in any of the syntaxes recognized by CSS (see Colors).
accent-color: initial; (auto) accent-color: inherit; accent-color: revert; accent-color: revertLayer; accent-color: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the property `accent-color`.

Like all color properties, accent-color can be animated very smoothly. In our example, the colors were set with the hsl() function.

Manipulating the `accent-color` property with Javascript.

With Javascript, change the value of `accent-color`.

Here's how to change the value of accent-color with Javascript. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with the notation in camel-case (a capital letter to separate words).


	let el = document.getElementById('id');
	el.style['accent-color'] = 'cyan';
	// or
	let el = document.getElementById('id');
	el.style.accentColor = 'cyan';

With Javascript, read the value of `accent-color`.

This code retrieves the value of the accent-color property assigned directly to the element itself via its style attribute. or the previous code, but not the value assigned via a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['accent-color'];
	// or
	let el = document.getElementById('id');
	let value = el.style.accentColor;

With Javascript, read the calculated value of `accent-color`.

The calculated value is the value that results from the evaluation of the different syntaxes for expressing a color.
The color is returned as RGB(r,g,b), or RGBA(r,g,b,a) if the opacity is not total.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('accent-color');

With JQuery, change the value of `accent-color`.


 $('#id').css('accent-color', 'cyan');
 // or
 $('#id').css('accentColor', 'cyan');

With JQuery, read the calculated value of `accent-color`.


	let value = $('#id').css('accent-color');

Other code examples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

The buttons below apply the value entered to the accent-color property and then display the value for the first button as it was applied, and for the second button, the calculated value. The latter allows you to see how the value of accent-color is stored (serialized). We can see that the color is serialized in the form rgb(...) or rgba(...).

Support for the `accent-color` property.

The accent-color property is well supported by current browsers, as shown by the compatibility table below (except for a particularity with Safari ).