CSS variables and opacity

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>