To understand the why we need to perform some math.
If we start with the invert(1)
(the easiest one) we will use f(x) = (255 - x)
ref. So
rgb(255,0,0)
will become rgb(0,255,255)
For the hue-rotate(180deg)
it more complex. Considering the specification we will get the following matrix:
-0.574 1.43 0.144
0.426 0.43 0.144
0.426 1.43 -0.856
So we will have
R' = -0.574*R 1.43*G 0.144*B = 1.43*255 + 0.144*255 = 401.37
G' = 0.426*R 0.43*G 0.144*B = 0.43*255 + 0.144*255 = 146.37
B' = 0.426*R 1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37
Then a final color rgb(255,146.37,146.37)
which is not a red one
html {
background: rgb(255, 146.37, 146.37)
}