I have a box with a style that sets the color of the box to `var(--box-color)`. This variable is defined in a separate CSS file, which I use for constants etc.:

```
:root{
--box-color: rgba(250,250,250,1.0);
}

```

I want to make the color of the box lighter using JavaScript. I could just apply a brightness filter using `box.style.filter = brightness(...)`, but that doesn't seem very elegant, and as the box also has children that should not be affected by the dimming, it is not the way to go for me. Is there a way to change the specific color values using JavaScript, with variable initial values? Something like:

```
box.style.backgroundColor.r -= 10;
box.style.backgroundColor.g -= 10;
box.style.backgroundColor.b -= 10;

```

I could also do it with String separation, if the color would be defined by an `rgba(r,g,b,a)` statement, but it is defined with a variable, and I also don't know how to get the value of that variable with JS.

*And if you don't understand my problem, feel free to ask in the comment section.*

---

**I'm going for a less complicated and more elegant structure now, so this question does not require an answer anymore. I'll not delete it though, in case other people come up with a similar problem.**