Graphics 为什么'；t色调旋转+；180度和-180度产生原始颜色？

通过阅读HSL/HSV颜色理论，我得到的印象是，色调分量是一个循环属性，每360度重复一次，可以独立于饱和度和亮度/值进行更改。如果我错了，请纠正我，但这些陈述在逻辑上遵循前面的定义：

将色调旋转360度可产生相同的颜色

将色调旋转180度两次可产生原始颜色

将色调旋转180度，然后再旋转-180度，得到原始颜色

但是，只有选项1是正确的。将色调旋转4次+90度，得到的颜色与原始颜色一点也不相似

此外，使用-webkit过滤器和SVG

<filter><feColorMatrix in="SourceGraphic" type="hueRotate" values="..." /></filter>

对于相同的旋转，不要产生相同的结果。另一方面，SVG过滤器生成的颜色在浏览器中是一致的

色调旋转是否存在使操作不关联的“隐藏”属性

---

---

这里可以找到webkit过滤器和SVG的示例：

在CSS和SVG过滤器中，没有转换为HSV或HSL-hueRotation速记使用RGB空间中的线性矩阵近似来执行色调旋转。正如您所看到的，对于小旋转和高度饱和的颜色，这并不能很好地保持饱和度或亮度

真正的色调旋转，首先将输入的RGB颜色转换为HSL，调整H，然后转换回RGB。过滤器不会这样做。这种转换不能用线性矩阵精确地近似，所以当色调被精确地改变（大部分）时，饱和度和亮度会到处都是。这些效果是非线性的，所以将较小的操作添加在一起会产生不同的颜色，而不是进行一个较大的操作

（SVG中的huerotation和CSS过滤器之间的差异可能是由于使用了不同的颜色空间（sRGB和linearRGB）——它们应该是相同的。）

更新：我有足够的兴趣去手动比较。正如你所看到的，滤镜在0到180度范围内对纯色进行色调旋转的工作非常糟糕。此图像比较手动插入hsl颜色（外圈）完成的手动色调旋转与基础颜色（内圈）上的过滤器色调旋转

但是，正如你所看到的，他们在hsl（0,50%，75%）等不太纯净的颜色上做得更好。

---

如果你想玩的话，代码笔链接：

迈克尔的回答太棒了，我希望我以前见过它；但是，因为我不仅需要了解它们是多么的古怪，还需要了解它们是如何运作的（我想研究它们的逻辑，所以我需要数学），所以我用Javascript编写了一个

hue-rotate

实现（这主要来自阅读Firefox的源代码），它模拟了Webkit/Blink/Gecko使用的

hue-rotate

再次强调，这里的重点只是理解它产生的结果

函数计算（）{
//获取要使用的RGB和角度。
var color=document.getElementById（'color'）。值；
如果（！/^[0-9A-F]{6}$/i.test（color））返回警报（'Bad color！'）；
var angle=document.getElementById（'angle'）。值；
如果（！/^-？[0-9]+$/i.test（角度））返回警报（“坏角度”）；
var r=parseInt（color.substr（0,2,16））；
var g=parseInt（color.substr（2,2,16））；
var b=parseInt（color.substr（4,2,16））；
变量角度=（parseInt（角度）%360+360）%360；
//屏住呼吸，因为接下来的不是花。
var matrix=[//请记住这是
1,0,0，//红色
0,1,0，//绿色
0,0,1//蓝色
];
//亮度系数。
var-lumR=0.2126；
var-lumG=0.7152；
var lumB=0.0722；
//色调旋转系数。
var hueRotateR=0.143；
var hueRotateG=0.140；
var hueRotateB=0.283；
var cos=数学cos（角度*Math.PI/180）；
var sin=数学sin（角度*Math.PI/180）；
矩阵[0]=lumR+（1-lumR）*cos-lumR*sin；
矩阵[1]=lumG-lumG*cos-lumG*sin；
矩阵[2]=lumB-lumB*cos+（1-lumB）*sin；
矩阵[3]=lumR-lumR*cos+hueRotateR*sin；
矩阵[4]=lumG+（1-lumG）*cos+hueRotateG*sin；
矩阵[5]=lumB-lumB*cos-hueRotateB*sin；
矩阵[6]=lumR-lumR*cos-（1-lumR）*sin；
矩阵[7]=lumG-lumG*cos+lumG*sin；
矩阵[8]=lumB+（1-lumB）*cos+lumB*sin；
功能钳（num）{
返回Math.round（Math.max（0，Math.min（255，num））；
}
var R=钳位（矩阵[0]*R+矩阵[1]*g+矩阵[2]*b）；
var G=钳位（矩阵[3]*r+矩阵[4]*G+矩阵[5]*b）；
var B=钳位（矩阵[6]*r+矩阵[7]*g+矩阵[8]*B）；
//输出结果
var结果='原始颜色，rgb（'+[r，g，b]+'），'
+'当旋转'+角度+'度'
+“按照魔鬼的逻辑，给了你”
+“rgb（'+[R，G，B]+'）。如果我没弄错的话。”；
document.getElementById（'result'）。innerText=result；
}
//听回车键。
['color'，'angle'].forEach（函数（i）{
document.getElementById（i）.onkeypress=函数（事件）{
var e=event | | window.event，c=e.which | | e.keyCode；
如果（c=='13'）返回calculate（）；
}
});
正文{
字体：14px无衬线；
填充：6px 8px；
}
输入{
宽度：64px；
}

该算法模拟了wierd算法，完全没有意义
愚蠢的
色调旋转
CSS过滤器。我想知道
它是如何工作的，因为它不符合任何定义
我见过的“色调”；它产生的结果是愚蠢的
我相信它是在冰毒的极端影响下编码的，
酒精和咖啡因，山达基信徒聆听死亡金属。

#
算计
-0.5747  1.4304   0.1444
 0.4252  0.4304   0.1444
 0.4252  1.4304  -0.8556

 0.9999  0.0001   0.0000
 0.0000  1.0      0.0
 0.0000  0.0000   1.0

-0.5747  1.4304   0.1444     1     -0.5747
 0.4252  0.4304   0.1444  *  0  =   0.4252
 0.4252  1.4304  -0.8556     0      0.4252