The currentColor value

April 22, 2024 (modified on March 14, 2025)

We’ve all seen—and used—keyword colors many times in the past. From black to white and everything in-between, they’re especially useful for prototyping and debugging.

/* If this CSS gets applied, you'll know for sure that the file is linked */
html {
  background-color: red;
}

Keyword colors are a straightforward affair; they’re self-descriptive and written in plain English. Want some red text? Slap color: red inside of a CSS declaration and call it a day!

But there’s also another color-specific keyword that’s not nearly as explicit, and much more obscure… Enter the currentColor keyword.

Note: The name currentColor is case-insensitive. You could even go as far as writing it CuRrEnTcOlOr if that’s your cup of tea. But that’d be hella weird.

Here’s what dear MDN has to say about it:

The currentcolor keyword represents the value of an element’s color property. This lets you use the color value on properties that do not receive it by default.

MDN

Essentially, currentColor is equal to the current element’s color value. It means you can define a color once, and then reference it elsewhere.

Here’s an example:

button {
  color: darkorange;
  border: solid 2px currentColor;
  /* ... */
}

Now this button’s text color, which is darkorange, will also be applied to the border. Neat!

What if you want to change the color of both the text and the border on hover? Simply update the color property’s value, and the border will follow suite.

button {
  color: darkorange;
  border: solid 2px currentColor;
  /* ... */
}

/* The border's color will also change on hover */
button:hover {
  color: orangered;
}

While authoring your CSS, using currentColor effectively can help reduce redundancy and keep your code clean. Be mindful not to fall into the “trap of cleverness” though, and to only use it where it makes sense.

Personally, I tend to prefer using custom properties instead. They can serve a similar purpose, and feel simpler to decipher in my opinion.

button {
  --btn-color: darkorange;
  color: var(--btn-color);
  border: solid 2px var(--btn-color);
  /* ... */
}

/* This changes the custom property's value on hover, */
/* affecting both `color` and `border`! */
button:hover {
  --btn-color: orangered;
}

If you haven’t encountered custom properties yet, you’re in for a treat. They’re simply amazing 😍

Sources

The <color> value

Sources

Tags