A quick note about using filters to change link colours

For as long as I can remember, I’ve been specifying different colours for hyperlinks and their :hover pseudo-classes. Recently, I’ve been experimenting with CSS filters and found they make development much easier.


This is the way I’ve specified link colours for so long:

a {
color: var(--color-text-link); /* #fa6e34 */ }

a:hover {
color: var(--color-text-link-hover); /* #e04606 */ }

Instead of specifying two different colours for hyperlinks and their :hover pseudo-classes, I can use CSS filters including brightness(), hue-rotate(), opacity(), and saturate(). To emulate that darker :hover colour, I might reduce the brightness of a link to 90%:

a:hover {
filter: brightness(90%); }

Or, to brighten a link colour on :hover, I might increase its brightness to 110%:

a:hover {
filter: brightness(110%); }

To change a link colour on :hover to one on the opposite side of the colour wheel—in my case from orange to blue—I can rotate its hue:

a:hover {
filter: hue-rotate(180deg); }

And, to reduce the intensity of previously visited links, I can adjust their saturation using a filter:

a:visited {
filter: saturate(75%); }

I can even add a subtle transition to add depth to the effect. So, my new styles for hyperlinks and pseudo-classes might look like this:

a {
color: var(--color-text-link); /* #fa6e34 */
transition: filter 250ms; }

a:visited {
filter: saturate(75%); }

a:hover {
filter: brightness(110%); }

As I only need to adjust the link colour when a design changes, this approach seems much more flexible than specifying two or more link colours in my stylesheets.


 
Experience EXPERIENCE

Working with clients for over 25 years

Articles ARTICLES
Contact us OK, LET’S TALK

Press to call 01745 851848

chocolate.chimp@stuffandnonsense.co.uk