Is it possible to use css variables with rgba, or how to make an alpha channel?

Question

css

Good evening.
In general, I have a question. The project uses scss, but no scss variables, instead, as befits smoothie lovers, they live on the front line and use only css variables. The design system, it should be noted, is paid tribute to and all colors are completely covered by the predefined 18 variables.
However, now there is a need to set a background with transparency. How to do it? The method below does not work, because the rgba() function inside scss does not work with css variables (because they are runtime, and scss is compiled), and rgba in the browser does not work with hex.

--ui-color-grey-2: #d5d9e0;
.selector {
    background-color: rgba(var(--ui-color-grey-2), .25);
}

The best obvious solution here is to duplicate the variables with sass variables, but I'm afraid that won't work. Therefore, I request cutting-edge ways to achieve rgba with a css variable containing a color in hex format.

Answer 1

Using only CSS - no way in this form. CSS does not know how to transform color formats. Obviously, there must be an RGB color inside the RGBA.
So just like this:
If through SASS, then you can convert HEX to RGB with it a la like this ( it's better to use a separate function )