[filter-effects] hue-rotate() should perform a true hue rotation

[yukulele]

hue-rotate() is performed with a color matrix based approximation

• this often gives very bad results, especially with saturated colors (like #ff0000, #ffff00, #0000ff).
• this is not reversible (filter: hue-rotate(60deg) hue-rotate(-60deg); ≠ filter: hue-rotate(0deg);
• this is not what we expect of a hue-rotate function
• there is no easy workaround
• why is this approximation used? (and where do the used values come from?)

Example with hue-rotate(180deg) :

playground: codepen.io/pen/ExdZMQE

hue-rotate() should perform a hue based rotation.

[facelessuser]

The issue is that you expect it to rotate hue in HSL, but that's not what it is doing, and there is a reason for it. It uses a luminance-preserving hue rotation. This makes sense as it was created for filtering images, not rotating hues specifically in HSL.

You can see here we do a similar comparison that you do with the original, hue-rotated, and HSL hue-rotated. The results are comparable. But afterward, we have two more examples. The first takes the green which has a fairly high luminance and rotates it from 0 to 360 degrees. The second example takes blue and rotates it from 0 to 360 and has a much lower luminance. Notice how the blue rotation is much darker overall.

So, when you are rotating hues with varying luminance, it is expected that you may get seemingly odd results if you are just expecting an HSL hue shift, but when you realize what it is doing, it actually makes a lot of sense and is a much better behavior for filtering images. HSL does not have good lightness preservation, so it is not a good choice for rotating hues in an image.

[tabatkins]

Well, the most direct explanation of why hue-rotate() works the way it does is that all the predefined filters are defined in terms of SVG filters, and SVG has a built-in hue-rotating filter with this behavior. (And generally, SVG filters can only operate on the colors in RGB.)

But @facelessuser's explanation of why SVG's hue-rotate filter has that behavior, and why it's a pretty reasonable thing to do, is very good.