Change Opacity of :root CSS RGB Variables

Question

I code that has many :root CSS color variables, as so:

    --gray: rgb(142,142,147);
    --gray-2: rgb(174,174,178);
    --gray-3: rgb(199,199,204);
    --gray-4: rgb(209,209,214);
    --gray-5: rgb(229,229,234);
    --gray-6: rgb(242,242,247);

    --gray-c: rgb(142,142,147);
    --gray-c2: rgb(99,99,102);
    --gray-c3: rgb(72,72,74);
    --gray-c4: rgb(58,58,60);
    --gray-c5: rgb(44,44,46);
    --gray-c6: rgb(28,28,30);

I've now come to need to change the opacity of these colors. I wasn't thinking at the time about changing the opacity or manipulating these colors. The project uses SCSS, so I thought the possibility to do something like background: rgba(var(--gray-5), 0.5) would be possible, but alas it is not. What's the best way of approching this?

score 1 · Accepted Answer · answered Jul 17 '19 at 17:55

1

you can create the variable only without using rgb, using the values separated by,

:root {
--gray: 142,142,147;
}

body {
background: rgba(var(--gray), 0.5);
/*background: rgba(var(--gray), 0,5);*/
}

answered Jul 17 '19 at 17:55

Lucas

275
8
37

score 0 · Answer 2 · answered Jul 17 '19 at 17:43

I try to do my best to help you! This format, should work for you:

:root {
  --unvisited-color: #595144;
     --r: 174;
     --g: 147;
     --b: 118;

     --rgb: rgba(var(--r), var(--g), var(--b)/*, var(--o)*/);
  --th-color: var(--rgb); }

You can add some opacity or filter like this:

opacity: 0.2;
filter: alpha(opacity=20

Hope it helps you, it is an example.

Change Opacity of :root CSS RGB Variables

2 Answers2