Question

如果我使用类似的东西旋转色调90度：

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

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

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

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

这是一个表明问题的小提琴：

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

Answer 1

我认为您在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

提交错误报告

Answer 2

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

供参考：

在HSB中，（B）正确性从0％的黑色到100％的全色。

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

Answer 3

这不是错误。色调旋转对RGB空间中的色调旋转进行近似 - 这导致某些（例如高度饱和）颜色的高度不准确的结果。请查看此问题的答案，看看这种裁剪有多么糟糕的结果：

Why doesn't hue rotation by +180deg and -180deg yield the original color?

-webkit-filter的hue-rotate似乎没有在chrome中产生正确的结果

3 个答案: