How to use currentColor

currentColor is a CSS variable-like feature that’s been around for quite awhile now and has reasonably good browser support (it’s supported by all modern browsers and their mobile counterparts, and even IE9+, though bugs have been reported in mobile Safari).

While most variables are still being used with preprocessors until support becomes more widely established, currentColor can be used as-is.

currentColor is super useful under some specific circumstances, and well worth learning (especially since it’s not complicated).

Basically, currentColor allows you to extend inherited colors to child elements, even in situations where the regular

inherit

function won’t work.

Let’s say you want to match the color of your links to your regular paragraph text and add a dotted border along the bottom. In most cases, you’d do something like this:

p { color: #872657; }
p a { 
    color: #872657;
    text-decoration: none;
    padding-bottom: .3em;
    border-bottom: 1px dotted #872657;
    }

So now you’ve got three places where you have to declare your colors, or else your visitor’s browser will override your paragraph color and replace it with a plain old blue underlined link.

You’re probably thinking, “Big deal? So I had to declare it three times instead of once. Who cares?” That’s all fine until you go to make updates and you find that you’ve declared these colors all over the place in your CSS files and suddenly you have 30 hex values to change instead of 4.

currentColor makes your stylesheets easier to maintain in the long run. Instead of the above, you’d write your CSS like this:

p { color: #872657; }
p a { 
    color: #currentcolor;
    text-decoration: none;
    padding-bottom: .3em;
    border-bottom: 1px dotted #currentcolor;
    }

Now, when you want to update it, all you have to change is the paragraph color and your links will automatically update to the new hue.

This is very similar to how a border inherits the

color

it’s declared with, and doesn’t have its own

color

specified, it will simply inherit the text color.

currentColor works with color keywords (like “raspberry” or “emerald”), with the RGB cubic-coordinate system (including the #-hexadecimal or the

rgb()

and

rgba()

notations), and with the HSL cylindrical-coordinate system (including the

hsl()

and

hsla()

notations). So basically it works with any color declarations you’re likely to be using.

You can even use currentColor in things like gradients and SVG fills, making it easy to keep those elements up-to-date alongside your text, borders, and the like.

Since variables and pre-processors are going to become not only more common, but more necessary, implementing features like currentColor can help prepare designers for those inevitabilities.