-webkit-過濾器的色調旋轉似乎不產生鉻正確的結果

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，並添加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

Answer 2

提交錯誤報告，它們實際上是都正確。我認爲你可能搞亂的是Photoshop使用HSB顏色模型，而CSS使用HSL。

供參考：

在HSB中，（B）正確從黑色變爲0％，到全綵色爲100％。

在HSL中，（L）亮度從0％的黑色變爲50％的全綵色，100％變爲白色。

Answer 3

這不是一個錯誤。色調旋轉對RGB空間中的色調旋轉進行近似 - 對於某些（例如高度飽和的）顏色導致高度不準確的結果。