CSS Hue Rotate 使图像变暗答案

【问题标题】：CSS Hue Rotate is Darkening ImageCSS Hue Rotate 使图像变暗
【发布时间】：2017-06-10 17:25:14
【问题描述】：

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

见https://jsfiddle.net/m4xy3zrn/

请注意，带有滤镜的第二张图片比在 Photoshop 中旋转的第三张图片要暗得多。

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

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

【问题讨论】：

标签： css css-filters

【解决方案1】：

The hue-rotate filter does not do a true hue rotation。它在 RGB 空间中进行了色调旋转的近似 - 它非常糟糕地剪辑了高度饱和的颜色（如原色）。（在封面下，它是using this approximation）。没有办法避免这种情况 - 只是在您关心颜色准确性时不要使用色调旋转。

（由于其不准确，我认为应该修复色调旋转滤镜，或者从规范中删除。）

【讨论】：

哇，真是个大坏蛋。特别是因为没有简单的选择。 OP 的例子看起来很糟糕，他们可能一开始就没有实现它。

【解决方案2】：

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

在 HSB 中，亮度从黑色 (0%) 变为 100% 的全彩色
在 HSL 中亮度从黑色 (0%) 变为 50% 的全色，再到 100% 为白色

所以我想他们都是对的，如果这是有道理的！

【讨论】：

我没有触及亮度或亮度。我只是在旋转色调。
我认为这是一个（噩梦般的）色彩空间问题：forum.luminous-landscape.com/index.php?topic=106266.0
这个答案很有趣，因为我想知道如果这个 CSS 问题最终会消失，CSS 从 HSL 的角度来解决这个问题。