Stuff & Nonsense product and website design

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.


Written by Andy Clarke


Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.