skip to Main Content

I’ve noticed that the hue-rotate filter in CSS is darkening my image.

See https://jsfiddle.net/m4xy3zrn/

Notice that the second image, which has the filter, is significantly darker than the third image, which was rotated in photoshop.

Is there a way to prevent this?


Looking at it again, there’s a lot of weird things happening here. The yellows appear to all be nearly gone, and the saturation in the blue areas in the hue rainbow (top right corner) is largely reduced.

2

Answers


  1. Photoshop uses a HSB colour model, but CSS uses HSL instead.

    • In HSB Brightness goes from black (0%) to full colour at 100%
    • In HSL Lightness goes from black (0%) to full colour at 50%, to
      white at 100%

    So I suppose they are both right, if that makes sense!

    Login or Signup to reply.
  2. The hue-rotate filter does not do a true hue rotation. It does an approximation of hue-rotate in the RGB space – which clips highly saturated colors (like primaries) very badly. (Under the covers, it’s using this approximation). There is no way to avoid this – just don’t use hue-rotate when you care about color accuracy.

    (Due to its inaccuracy, I believe the hue-rotate filter should either be fixed, or removed from the spec.)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search