[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.

[FeldrinH]

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.

The trouble is I'm pretty sure that this is not true. In practice hue-rotate() does a rough approximation of a luminance-preserving hue rotation, but for some colors that approximation is completely wrong. You can see in the original demo for example that blue should be yellow after rotation but ends up being a dark gray. Also, if this were a luminance-preserving hue rotation then filter: hue-rotate(60deg) hue-rotate(-60deg) would be equivalent to doing nothing, but clearly it isn't.

[facelessuser]

@FeldrinH, the luminance preserving being "wrong" is due to browsers applying the filter in the current working color space (sRGB) when it is designed for linear light. Live demo.

EDIT: Fixed demo link

[FeldrinH]

As far as I know there is no way to apply the filter in a linear color space using CSS, so for all practical purposes the CSS filter is broken/inacurate.

[facelessuser]

As far as I know there is no way to apply the filter in a linear color space using CSS, so for all practical purposes the CSS filter is broken/inacurate.

That is a fair argument. You can select LinearRGB when using SVG filters, but I am unaware of a way to select a space for something like filter: hue-rotate().

[Crissov]

Huh, a use case for @filter #13253 then!?