Changing opacity of a color stored in a variable (css)

Question

I'm trying to change the opacity of a color that is stored within a variable.

:root {

--main-theme-color: rgb(123, 40, 231);
}

.box{

background-color: rgba(var(--message-box-transparency),0.5);
}

I tried making it rgba to change the opacity of the color in the variable but it isn't working, is there another way to change the opacity of a color within the variable.

Answer 1

you can use custom properties for this

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 123, 40, 231;
}
body {
  background-color: rgb(var(--color));
}

.box{
  background-color: rgba(var(--color), 0.5);
}

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 123, 40, 231;
}
body {
  background-color: rgb(var(--color));
}
section{
  width:200px;
  height:200px;
  background:red;
  display:flex;
  align-items:center;
  justify-content:center;
}
div {
  width:150px;
  height:150px;
  border:1px solid #000;
  background-color: rgba(var(--color), 0.5);
}

<section>
 <div>
 
 </div>
</section>