-webkit-filter 的色调旋转似乎无法在 chrome 中产生正确的结果

Question

如果我使用类似以下内容将色调旋转 90 度：

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

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

看起来色调只旋转了约60度，而且饱和度也有所降低。

有没有办法让 WebKit 浏览器更可靠地旋转色调，或者我是否遗漏了有关此过滤器方法的一些基本内容？

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

div.sample {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAADJGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkyRDM0NkFGQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkyRDM0NkIwQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mjk1OTU4RUFBQTU2MTFFMkE1NEVENDU4MTVCNkE1QjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTJEMzQ2QUVBQTU3MTFFMkE1NEVENDU4MTVCNkE1QjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Lx9yCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUWMPtzgENAAAIAyCfyP7ptIZukIDUdN0TLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0trV+tBfHSOy90wM8FAAAAAElFTkSuQmCC');
}

div.photoshop
{
  width: 50px;
  height: 50px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MkQzNDZCM0FBNTcxMUUyQTU0RUQ0NTgxNUI2QTVCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5MkQzNDZCNEFBNTcxMUUyQTU0RUQ0NTgxNUI2QTVCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjkyRDM0NkIxQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkyRDM0NkIyQUE1NzExRTJBNTRFRDQ1ODE1QjZBNUI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2s4ZagAAAEBJREFUeNrszjEBADAIA7Ayhfg3Awr2cyQKUunJPS8naWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaf2sAAMAdvMBs/7dIkQAAAAASUVORK5CYII=');
}

Original:
<div class="sample"></div>

Hue Rotated by 90deg:
<div class="sample hue"></div>

Photoshop Result Rotate Hue by 90deg:
<div class="photoshop"></div>

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

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

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

Answer 3

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

仅供参考：

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

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