css - -WebKit-Filter 色相を RGB に変換

Question

CSS3の-webkit-filterを使用すると、0 ～ 360 の値を渡すことで色相フィルターを適用できます。

例：

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

度数を RGB 値に変換するにはどうすればよいでしょうか?

Answer 1

CSS フィルターの hue-rotate は真の色相回転ではなく、RGB 空間での近似値であり、飽和色に対してはあまり正確ではありません。実行していることを複製したい場合は、同じアルゴリズムを使用する必要があります。これは、標準の HSL/RGB 変換ではありません。その基礎となるアルゴリズムは、feColorMatrix の SVG 1.1 フィルター仕様にあります。

type="hueRotate" の場合、'values' は 1 つの実数値 (度) です。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]