The accent-color CSS Property is Now Widely Supported by Modern Browsers
If you own a website and the website is related to some brand out there, you would be looking for ways that make the website look in line with the brand.
One way to do this is to choose a brand color and sprinkle it around in few areas of the website in a subtle way. It’s called the “accent” color cause sets the accent of the website.
For instance, showing brand color when hovering on hyperlinks, titles could be of the brand color or convey the accent color in various HTML components such as text input, checkboxes, radio buttons, etc.
Incorporating colors into these HTML components had traditionally been cumbersome since you needed to use hacky ways like using pseudo properties like
:after to customize the components. And yet, the end result wouldn’t be what you might expect.
That’s where this CSS property called
accent-color comes into the picture.
accent-color CSS property
accent-color is a relatively new CSS property that lets you set the accent color for user-interface controls generated by some elements.
accent-color property changes the accent color of checkboxes, radios, range, and progress elements. But in the future, more elements could be covered to leverage the use of this property.
So, for instance, let’s say you want to apply an accent color to all the checkboxes of your website, here’s how you can do it.
This will apply the
hotpink color to all the checkboxes of the website.
Now, if you want to apply the same accent color to each supported element on your website, you can set it in the
<body> like so.
Here’s it in action.
You can get crazy and use a different accent color for each element like so.
The default accent color
If you want some of the elements to continue using the browser’s default accent color, you can set the value of
accent-color to “auto”.
Here’s it in action.
accent-color property smartly handles the borders and background of these elements based on what color you chose as an accent color.
For instance, if you chose a darker color like
red, the background of these elements will be white. But if you chose to use a lighter shade of a color (such as
lightgreen), the background of the elements will be gray in that case.
Pretty smart, right?
The bottom line is that if you’re looking to brandify your website using a few colors, you should definitely look towards the
And since it has been supported by all the modern browsers today, you can safely use it in production without any fear!
For all you visual learners, here’s a video format of this article!
Like this article? Consider leaving aTip