currentColor is the original CSS variable

Support for the currentColor keyword goes all the way back to IE 9, Firefox 2, and Safari 4. It refers to—as one might expect—the current value of color. The power of inheritance means this value can be defined several ancestors up the cascade yet referenceable all the way down. Sounds a lot like a variable, right?

One can, for example, use this to ensure an adjacent icon always matches the tint of its supporting label:

svg {
  fill: currentColor;
}
a {
  color: var(--blue);
}
a:visited {
  color: var(--purple);
}

Anchors that have had their color changed will have containing SVGs re-tinted without explicitly defining the color value. It is possible to combine this with an overlay to knock back the opacity of the color if used as a background.

a svg {
  background: currentColor linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.75)
  );
}

I'm not an advocate of them for UX reasons, but a common trend is to style some buttons as hollow with a border that matches the color of the label, often referred to as a "ghost" button. Pulling this off with box-shadow or border is simple when inheriting currentColor.

button {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--red);
}

More advanced uses of currentColor involve white-labelling of web applications or theming based on a brand or user preference. It is powerful, available, and well-supported.