How to invert currentColor with pure CSS

The currentColor Show archive.org snapshot CSS keyword references the current text color and can be used to apply an element's text color to other properties.
Using modern CSS, you can also use it to calculate colors from it. This card describes how to invert currentColor, but you can use this technique for other calculations as well.

How to invert currentColor

They key is CSS' hsl() function and from keyword for it:

Copy--inverted-color: hsl(from currentColor calc(h + 180) s calc(100 - l));

Here is what happens:

• from currentColor tells hsl() to start with the value of currentColor.
• calc(h + 180) rotates the color hue by 180 degrees, i.e. to the opposite of the color wheel.
• s keeps saturation unchanged.
• calc(100 - l) inverts lightness. For example, 0% becomes 100%, and 100% becomes 0%.

Example usage

Copy.demo {
  --inverted-color: hsl(from currentColor calc(h + 180) s calc(100 - l));
  text-shadow: 0 0 2px var(--inverted-color);
}

Codepen demo: https://codepen.io/foobear/pen/LEEZawb Show archive.org snapshot

Browser support

• Chrome/Edge 131+
• Firefox 133+
• Safari 18+

https://caniuse.com/css-relative-colors Show archive.org snapshot