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.