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