CSS variables and opacity - css

Question

A quick question to which the answer is probably "NO", but I'm new to CSS variables so I'm not sure.
If I want to define color and later be able to add alpha channel to it, is my only option with CSS variables would be to define it as 3 numbers for RGB channels:
--color: 12 12 12
And later use it ALWAYS with rgb or rgba?
color: rgb(var(--color));
background: rgba(var(--color), .5);
There is really no way to define an actual color and later add alpha to it using only CSS variables? Probably my best bet would be to define 2 vars:
--color-rgb and --color: rgb(var(--color-rgb))

Answer 1

You are almost good, you simply need to pay attention to the syntax:
:root {
--c:255,0 ,0;
--o:0.5;
}
html {
background:rgba(var(--c),var(--o));
}
body {
background:rgb(var(--c));
height:100px;
}
.box {
--c:12,12,12;
--o:0.7;
background:rgba(var(--c),var(--o));
color:#fff;
}
<div class="box">
some content
</div>
You can also define each channel alone:
:root {
--r:255;
--g:0;
--b:0;
--c:var(--r),var(--g) ,var(--b);
--o:0.5;
}
html {
background:rgba(var(--c),var(--o));
}
body {
background:rgb(var(--c));
height:100px;
}
.box {
--c:12,12,12;
--o:0.7;
background:rgba(var(--c),var(--o));
color:#fff;
}
<div class="box">
some content
</div>