Using currentColor in 2025

Gotta give props to currentColor. It’s a keyword in CSS that is the OG variable. It wasn’t always there, but it was relatively usable in browsers by, say, 2010.

currentColor is a value, that you have control over, that represents something else.

.card {
  color: red;
  border: 3px solid currentColor;
}Code language: CSS (css)

What do you think the color of that border is gonna be? Not a trick question, it’s red my friend. You don’t have to type red twice. You don’t have to worry those colors that you’ve so elegantly tied together are going to drift apart. The power of computer programming lives here.

The value currentColor resolves to is whatever the color value resolves to at the element being effected by the selector. The color property cascades, so it could be set three levels up from the current element, or not at all, or whatever. It’ll always be something.

p.s. it can be currentColor, currentcolor, CURRENTCOLOR, cUrrENtCoLOr or whatever. CSS is unbothered. Just spel it right.

Hard Times

Business just isn’t rolling in thick anymore for currentColor. Search a 10 year old codebase and you’ll find a few hits, but these days, custom properties are a far more popular choice. Are you turning your back on an old friend? Yes. Is new friend better? Also yes. Just saying.

.card {
  --mainColor: red;
 
  color: var(--mainColor);
  border: 3px solid var(--mainColor);
}Code language: CSS (css)

This does the same thing. It’s an extra line of code, but your fellow computer programmers will all agree that it’s much more clear and versatile.

Versatile?

Definitely. Custom properties can be just about anything. It’s almost weird how permissive the value of a custom property can be. But it’s certainly not just colors. Hopefully obviously: currentColor only references color. There is no currentPadding or currentEmotionalState or anything.

Bugs?

I figured I’d have a play for old times sake. While I was doing that, I noticed a few oddities.

body {
  color: orange;
  accent-color: currentColor; /* doesn't work 🤷‍♀️ */
}Code language: CSS (css)

That one just doesn’t work (across the three major browsers I tried). Why? No I’m asking you. lol.

Here’s another:

body {
  color: rebeccaPurple;
}
button {
  border: 1px solid currentColor;
}Code language: CSS (css)

That one isn’t a bug, I suppose, as the trouble is that user agent stylesheets tend to set the color of buttons themselves (e.g. color: buttontext;), so if you want it to work, you’ll have to set the color explicitly, or force inherit it.

button {
  color: inherit;
  border: 1px solid currentColor;
}Code language: CSS (css)

I also swore I found an issue with relative color syntax and currentColor, but now that I’m typing and fact checking I can’t find it again so I’ll just leave it at that.

But is it still cool though?

I feel like I’ve made the point that it’s not amazingly useful anymore, but I might also argue that it’s not a terrible idea when the intentionality matches up just right. For instance, say you’ve got icons where the fill should always match the text color. That’s a fine use case really.

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
  }
}Code language: CSS (css)

Another step further, we could pop a little shadow on those icons that is based on that color.

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
    filter: drop-shadow(
      0 1px 0 oklch(from currentcolor calc(l - 0.25) c h));
  }
}Code language: CSS (css)

Here’s a video of that and some other stuff working together. No custom properties here, all currentColor:

I have stuck in my memory a Simurai post from 2014 where he showed off the power of this as well.