CSS 色相旋转导致图像变暗

Question

我注意到CSS中的hue-rotate滤镜会使我的图像变暗。

请参见https://jsfiddle.net/m4xy3zrn/

请注意第二张图片使用了该滤镜，明显比第三张图片（在Photoshop中旋转）更暗。

有没有办法防止这种情况发生？

---

再仔细看一下，这里发生了很多奇怪的事情。黄色似乎全部消失了，在色调彩虹（右上角）的蓝色区域中，饱和度大大降低。

- Liftoff

Answer 1

色相旋转滤镜并不是真正的色相旋转

色相旋转滤镜并不是真正的色相旋转。它在RGB空间中对色相旋转进行了近似处理，这会严重削弱高饱和度的颜色（如基色）。 （在底层，它使用此逼近值）。无法避免这种情况 - 如果你关心颜色准确性，请不要使用色相旋转。

(由于其不准确性，我认为应该修复或从规范中删除色相旋转滤镜。)

- Michael Mullany

---

哇，真是个严重的挫折。特别是因为没有简单的替代方案。OP的例子看起来很糟糕，他们最好一开始就不要实现它。 - Rapti

Answer 2

Photoshop使用HSB颜色模型，但CSS使用HSL。

• 在HSB中，亮度从黑色（0％）到100％的全彩色
• 在HSL中，亮度从黑色（0％）到50％的全彩色，到白色（100％）

所以我想如果这样说的话，它们都是正确的！

- mayersdesign

---

虽然我没有涉及亮度或明度，但是我只是旋转色相。 - Liftoff

我认为这是一个（可怕的）色彩空间问题：http://forum.luminous-landscape.com/index.php?topic=106266.0 - mayersdesign

这个答案非常有趣，因为我想知道如果CSS从HSL的角度来解决这个CSS问题，它是否会最终消失。 - RockPaperLz- Mask it or Casket