Make a CSS variable color translucent

Given a color stored in a CSS variable, how do you change the opacity? This Stack Overflow answer has a couple good suggestions.

First is color-mix, which is widely supported in browsers today. It lets you mix two colors in a given color space. The trick is to mix some percentage of the color variable with the color transparent:

.classname {
  color: color-mix(in srgb, var(--some-color) 50%, transparent);
}

Next is relative color syntax, which as of August 2023 is only supported in Safari. The keyword from lets you convert colors between formats; you can then fill in the missing alpha value when passing it to a color function:

.classname {
  color: rgb(from var(--some-color) / 50%);
}