Here is a small CSS snippet to calculate a transparent version of the current text color. This is useful in a themeable component system where semi-transparent elements like dividers, icons or backgrounds need to adapt to the surrounding text color.

We can use the new color-mix function, which is now supported in all browsers, along with the classic currentColor built-in variable to create a transparent version of the text color:

background: color-mix(in srgb, currentColor, transparent 85%);

Live example

See the Pen Untitled by Ben Foster (@benfoster) on CodePen.