Преобразовать -webkit-фильтр Оттенок в RGB

Question

-webkit-filter в CSS3 позволяет применять фильтр цветового тона, передавая значение степени между 0-360

пример:

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

Как бы вы преобразовать степень значение в значение RGB?

Answer 1

This страницы дают отличное руководство по преобразованию между HSL и RGB, а также предоставляют конвертер для значений.

Answer 2

CSS-фильтр с оттенком не является истинным поворотом оттенка, он является приблизительным в пространстве RGB и не очень точен для насыщенных цветов. Если вы хотите дублировать то, что он делает, вам нужно использовать тот же алгоритм, который не является стандартным преобразованием HSL/RGB. Его базовый алгоритм находится в SVG 1.1 filter spec for feColorMatrix

Для типа = "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]