I had plans to do something neat with CSS custom properties and
calc(), and hit a block earlier when trying to use
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
Does anyone have any insight into what’s going on? I’d appreciate any thoughts!