css - Convert -WebKit-Filter hue into RGB

Question

The -webkit-filter in CSS3 allows you to apply a hue filter by passing a degree value between 0-360

example:

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

How would you convert the degree value into an RGB value?

Answer 1

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