3

如果我使用以下方法将色调旋转 90 度：

.foo
{
  -webkit-filter: hue-rotate(90deg);
}

它确实会旋转色调，但看起来不正确。例如，如果我在 Photoshop 中执行相同的转换，我会得到不同的结果。我还注意到我在 Chrome 和 Safari 之间得到了不同的结果。

如果我截屏并在 Photoshop 中打开修改后的图像（通过 -webkit-filter），我可以看到色调仅旋转了大约 60 度，并且饱和度也降低了。

有没有办法让 webkit 浏览器更可靠地旋转色调，或者我错过了关于这种过滤器方法的一些基本知识。

这是一个演示这个问题的小提琴：

http://jsfiddle.net/xv5Ah/1/

4

3 回答 3

2

我认为您在 Chrome 中遇到了一个错误，如果我在 hsl 中声明颜色并添加 90deg 结果不一样：http: //jsfiddle.net/HrHpA/。

div {
    width:            50px;
    height:           50px;
    margin-bottom:    10px;
    /* hsl(131+90,100%,50%) */
    background: hsl(221,100%,50%);
}

.hue {
  background: hsl(131,100%,50%);
  -webkit-filter: hue-rotate(90deg);   
}

有不同的颜色模型可能会解释这一点，但在我看来，结果还很遥远。

我会在https://code.google.com/p/chromium/issues/entry提交错误报告

于 2013-05-02T08:40:53.243 回答
1

他们实际上都是正确的。我认为您可能搞砸的地方是 Photoshop 使用 HSB 颜色模型而 CSS 使用 HSL。

供参考：

在 HSB 中，(B)rightness 从 0% 的黑色变为 100% 的全彩色。

在 HSL 中，（L）亮度从 0% 的黑色变为 50% 的全色，再到 100% 的白色。

于 2013-05-09T13:05:36.347 回答
1

这不是错误。Hue-rotate 对 RGB 空间中的色调旋转进行近似 - 这会导致某些（例如高度饱和）颜色的结果非常不准确。请参阅此问题的答案，以了解此剪辑扭曲结果的严重程度：

为什么 +180 度和 -180 度的色调旋转不会产生原始颜色？

于 2017-02-07T21:43:00.250 回答