How to invert only one of H, S, or L?

Question

I've been using the Stylish extension to Google Chrome to browse xkcd in dark. The user-style called Dark XKCD uses filter: invert(100%); to make the generally white images generally dark. However, invert messes with the colors, such as in this comic, which normally looks like this:

But instead, it looks like this (snippet, as it's hard to simply save the image):

img {
  max-width: 70%; /* make image easily visible for demonstration */
  filter: invert(100%);
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
}

<img src="https://imgs.xkcd.com/comics/gravity_wells.png"/>

The orange becomes blue!

I found hue-rotate, which semi-fixes it if I apply with invert:

img {
  max-width: 70%; /* make image easily visible for demonstration */
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg);
}

<img src="https://imgs.xkcd.com/comics/gravity_wells.png"/>

However, it fails for other comics; for example, this one:

img {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg);
}

<img src="http://imgs.xkcd.com/comics/making_rules.png"/>

I can now fiddle with the hue of the image or the saturation and lightness together, but maybe if I could de-couple the inversion of the saturation and lightness, I could achieve better results.

How can I invert hue, saturation, or lightness without touching the others?

Answer 1

You can't do HSL operations in filters - they're RGB only. Filters hue rotate is a (generally bad) approximation of a true hue rotation using RGB space. There are somewhat complex things you can do in filters to "color-separate" out colored areas from greys/whites, invert the separately and then recombine. But it's not a great general solution.