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 :before and :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.
The accent-color CSS property
The accent-color is a relatively new CSS property that lets you set the accent color for user-interface controls generated by some elements.
Currently, the 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.
input[type="checkbox"] {
accent-color: hotpink;
}
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.
body {
accent-color: red;
}
Here’s it in action.
See the Pen The `accent-color` property by Amit Merchant (@amit_merchant) on CodePen.
You can get crazy and use a different accent color for each element like so.
See the Pen The `accent-color` property by Amit Merchant (@amit_merchant) on CodePen.
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”.
input[type="checkbox"] {
accent-color: auto;
}
Here’s it in action.
See the Pen The `accent-color` property - System-wide by Amit Merchant (@amit_merchant) on CodePen.
It’s smart
The 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.
See the Pen The `accent-color` property - System-wide by Amit Merchant (@amit_merchant) on CodePen.
Pretty smart, right?
In closing
The bottom line is that if you’re looking to brandify your website using a few colors, you should definitely look towards the accent-color property.
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?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
