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

Question

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

1. 将色调旋转 360 度会产生相同的颜色
2. 将色调旋转 180 度两次即可得到原始颜色
3. 将色调旋转 180 度，然后旋转 -180 度即可得到原始颜色

但是，只有选项 1 是正确的。将色调旋转 4 倍 +90 度会产生与原始颜色完全不相似的颜色。

此外，使用 -webkit-filter 和 SVG

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

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

色调旋转是否有任何“隐藏”属性使操作不具有关联性？

<小时/>

可以在这里找到 webkit 过滤器和 SVG 的示例:http://jsfiddle.net/maros_urbanec/ARsjb/5/

Answer 1

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

真正的色调旋转，首先将输入的 RGB 颜色转换为 HSL，调整 H，然后转换回 RGB。过滤器不会这样做。而且这种转换无法用线性矩阵精确地近似，因此虽然色调(大部分)被精确地改变，但饱和度和亮度却到处都是。这些效果是非线性的，因此与执行一项大型操作相比，将较小的操作添加在一起会产生不同的颜色。

(SVG 和 CSS 滤镜中色调旋转之间的差异可能是由于使用不同的色彩空间(sRGB 与 LinearRGB)造成的 - 这些应该是相同的。)

更新:我有足够的兴趣去进行手动比较。正如您所看到的，滤镜在 0 到 180 度范围内旋转纯色的色调方面做得很糟糕。此图像比较了通过手动插入 hsl 颜色(外环)完成的手动色调旋转与基色(内环)上的滤镜色调旋转

但是，如您所见，它们在不太纯的颜色(例如 hsl(0,50%,75%))方面表现更好。

codepen 链接(如果您想玩的话):http://codepen.io/mullany/pen/fwHrd