CSS - pass rgb inside rgba

Question

how to pass color rgb inside rgba to decrease opacity?

:root {
  --bg: rgb(84, 15, 84);
}

p {
  background-color: var(--bg);
  color: #fff;
}

<p>
  hello world
</p>

I want to pass the --bg variable inside rgba so I can decrease the opacity without touching touching the --bg variable.

I have tried:

background-color: rgba( var(--bg), 0.4 );

but it doesn't work. Can anyone help?

You should use only the numbers of rgb in the var. https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable — Crisped, Apr 13 '22 at 08:27

score 1 · Answer 1 · answered Apr 13 '22 at 08:29

1

You need to remove the rgb extension while passing it to the variable like so.

:root {
  --bg: 84, 15, 84;
}

p {
  background-color: rgba(var(--bg), 0.4);
  color: #fff
}

<p>
  hello world
</p>

answered Apr 13 '22 at 08:29

Amini

score 1 · Accepted Answer · answered Apr 13 '22 at 08:29

1

:root {
  --bg: 84, 15, 84;
}

p {
  background-color: rgba(var(--bg),0.4);
  color: #fff;
}

<p>
  hello world
</p>

answered Apr 13 '22 at 08:29

Muhammad Usama

2 Answers2