RGB logo

RGB Studios.org

A web development company

March 26, 2024

About the CSS Accent Color Property

Justin Golden

Photo credit @arthurbizkit on Unsplash

The accent-color Property

The accent-color is a newer CSS property that some browsers support and will affect the background colors of various elements

Supported Elements

Setting The Color

You can set accent-color like any other CSS property, inline or with a CSS selector:

<input type="checkbox" style="accent-color: green;" />
input[type='checkbox'] {
	accent-color: green;

You can set accent-color however you prefer to set a color, so hex/rgb/rgba, hsl/hsla, color name, etc.

Here’s some working code and a working demo for you!

<input checked type="checkbox" style="accent-color: green;" />
<input checked type="radio" style="accent-color: green;" />
<input type="range" style="accent-color: green;" />
<progress value="50" max="100" style="accent-color: green;"></progress>

Browser support is (at time of writing) around 94%.


Mozilla Docs Browser Support

More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email