color-mix

Using `color-mix` to retroactively apply transparency to colors in CSS variables.

If you have an existing color, you can make it less opaque by mixing it with transparent with percentages of your choice:

#c1 .one {
  background-color: var(--my-color);
}

#c1 .two {
  background-color: color-mix(in srgb, var(--my-color), transparent 33%);
}

#c1 .three {
  background-color: color-mix(in srgb, var(--my-color), transparent 66%);
}

Update!

An even better way is to use the relative value syntax of the functional notation of the color space of your choice:

#c2 .one {
  background-color: var(--my-color);
}

#c2 .two {
    background-color: oklch(from var(--my-color) l c h / 0.66);
}

#c2 .three {
    background-color: oklch(from var(--my-color) l c h / 0.33);
}