5

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.

Improve this question

2 Answers 2

Reset to default
5

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

Improve this answer
1
  • Wow, what a serious bummer. Especially since there is no easy alternative. OP's example looks so terrible, they might as well not have implemented it in the first place.
    – Rapti
    Commented Sep 5, 2021 at 10:06
0

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!

Improve this answer
3
  • I'm not touching the Brightness or Lightness though. I am only rotating the hue.
    – Liftoff
    Commented Jan 25, 2017 at 13:48
  • 1
    All the same I think it's a (nightmarish) colour space problem: forum.luminous-landscape.com/index.php?topic=106266.0
    – mayersdesign
    Commented Jan 25, 2017 at 13:51
  • This answer is very interesting because I wonder CSS approached this from an HSL perspective if this CSS problem would finally go away.
    – End Antisemitic Hate
    Commented Mar 10, 2021 at 20:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.