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)`<sup>[ref][1]</sup>. So 
`rgb(255,0,0)` will become `rgb(0,255,255)`

For the `hue-rotate(180deg)` it more complex. Considering [the specification][2] 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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    html {
      background: rgb(255, 146.37, 146.37)
    }

<!-- end snippet -->




  [1]: https://stackoverflow.com/a/48798480/8620333
  [2]: https://drafts.fxtf.org/filter-effects/#feColorMatrixElement