Question

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

示例：

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

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

Answer 1

This页面提供了在HSL和RGB之间进行转换以及为值提供转换器的出色指南。

Answer 2

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]

将-WebKit过滤色调转换为RGB

2 个答案: