将 -WebKit-Filter 色调转换为 RGB答案

【问题标题】：Convert -WebKit-Filter hue into RGB将 -WebKit-Filter 色调转换为 RGB
【发布时间】：2013-02-24 03:41:52
【问题描述】：

CSS3 中的 -webkit-filter 允许您通过传递 0-360 之间的度数值来应用色调过滤器

示例：

-webkit-filter: hue-rotate(80deg);

如何将度数值转换为 RGB 值？

【问题讨论】：

标签： css webkit imagefilter

【解决方案1】：

CSS 过滤器 hue-rotate 不是真正的色调旋转，它是 RGB 空间中的近似值，对于饱和颜色不是很准确。如果你想复制它正在做的事情，你需要使用相同的算法——这不是标准的 HSL/RGB 转换。它的底层算法在SVG 1.1 filter spec for feColorMatrix

对于 type="hueRotate"，‘values’是一个实数值（度）。一个hueRotate操作等价于下面的矩阵操作：

| R' |     | a00  a01  a02  0  0 |   | R |
| G' |     | a10  a11  a12  0  0 |   | G |
| B' |  =  | a20  a21  a22  0  0 | * | B |   
| A' |     | 0    0    0    1  0 |   | A |
| 1  |     | 0    0    0    0  1 |   | 1 |

where the terms a00, a01, etc. are calculated as follows:

| a00 a01 a02 |    [+0.213 +0.715 +0.072]
| a10 a11 a12 | =  [+0.213 +0.715 +0.072] + 
| a20 a21 a22 |    [+0.213 +0.715 +0.072]

                        [+0.787 -0.715 -0.072]
cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
                        [-0.213 -0.715 +0.928]

                        [-0.213 -0.715+0.928]
sin(hueRotate value) *  [+0.143 +0.140-0.283]
                        [-0.787 +0.715+0.072]

【讨论】：