CSS Hue Rotate is darkening Image

Question

Я заметил, что фильтр hue-rotate в CSS затемняет мое изображение.

См https://jsfiddle.net/m4xy3zrn/

Обратите внимание, что второе изображение, которое имеет фильтр, который значительно темнее, чем в третьем изображении, который был повернут в Photoshop.

Есть ли способ предотвратить это?

---

Глядя на него снова, здесь происходит много странных вещей. Кажется, что желтые почти исчезли, а насыщенность в синих областях в цветовой гамме (верхний правый угол) в значительной степени уменьшена.

Answer 1

The hue-rotate filter does not do a true hue rotation. Он делает приближение оттенка-поворота в пространстве RGB, что очень сильно затягивает насыщенные цвета (например, праймериз). (Под обложками находится using this approximation). Невозможно избежать этого - просто не используйте оттенок-поворот, когда вам нужна точность цвета.

(Из-за неточностей, я считаю, что цветовой тон поворота фильтр должен быть либо фиксированной, либо удалены из спецификации.)

Answer 2

В Photoshop используется цветовая модель HSB, но вместо этого CSS использует HSL.

• В HSB Яркость идет от черного (0%) до полного цвета при 100%
• В HSL Легковесность идет от черного (0%) до полного цвета при 50%, до белого на 100%

Так что я полагаю, что они оба правы, если это имеет смысл!