-webkit-filter的色调旋转在Chrome中似乎不能产生正确的结果

Question

如果我使用类似以下方式将色相旋转90度：

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

它确实可以旋转色调，但效果并不正确。例如，如果我在Photoshop中执行相同的移位操作，结果是不同的。我还注意到在Chrome和Safari之间也会有不同的结果。

如果我截取屏幕并打开经过修改的图像（通过-webkit-filter），我可以看到色调只旋转了约60度，并且饱和度已经降低。

是否有一种方法可以让Webkit浏览器更可靠地旋转色调，或者我对这种滤镜方法缺少基础知识。

这里有一个演示该问题的fiddle：

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

- CMS

Answer 1

我认为你在Chrome浏览器中遇到了一个Bug，如果我用hsl声明颜色并添加90度，结果将不会相同：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上提交一个错误报告。

- methodofaction

---

谢谢 - 我已经提交了以下错误报告：https://code.google.com/p/chromium/issues/detail?id=237524 - CMS

Answer 2

这不是一个 bug。Hue-rotate 在 RGB 空间中近似进行色相旋转，这会导致某些颜色（如高饱和度的颜色）的结果非常不准确。请参阅此问题的答案，以了解剪切扭曲结果的程度：为什么将色相旋转 180 度和 -180 度不能得到原始颜色？

- Michael Mullany

Answer 3

他们实际上都是正确的。我认为你可能混淆了Photoshop使用HSB颜色模型，而CSS使用HSL。

FYI：

在HSB中，(B)rightness从0％的黑色到100％的全彩色。

在HSL中，(L)ightness从0％的黑色到50％的全彩色，再到100％的白色。

- Paul Gordon