I had plans to do something neat with CSS custom properties and `calc()`

, and hit a block earlier when trying to use `calc()`

inside `rgb()`

. All was fine if I wanted to do something like `rgb(120, 50, calc(3 * var(--some-variable)))`

, but what I really wanted to do was `rgb(120, 50, calc(.5 * var(--some-variable)))`

. When doing that, my color would not appear.

At first I thought it was some bug with `calc()`

and CSS custom properties. Removing that from the equation left me with the same results.

**What doesn’t work?** Using multiplication, subtraction, or addition with a floating-point number, and division of any kind. The following examples all fail:

`rgb(120, 50, calc(100 * .5))`

`rgb(120, 50, calc(100 + 1.0))`

`rgb(120, 50, calc(100 * 4.0))`

`rgb(120, 50, calc(300 / 2))`

I would understand if the result was something like 33.33. `rgb()`

needs integers. But in the case of `calc(100 * .5)`

, for example, the result *is* an integer, and with `calc(100 / 2)`

, only integers are used and the result is an integer.

Note: In Firefox this will not work at all anyhow since they don’t allow `calc()`

to be used inside `rgb()`

However, I am still interested in learning why this is not working in browsers that support `calc()`

inside `rgb()`

.

Does anyone have any insight into what’s going on? I’d appreciate any thoughts!