Как вычислить необходимый оттенок-поворот для генерации определенного цвета?

У меня есть белое изображение, которое я использую в качестве фона для div, и я бы хотел, чтобы цвет соответствовал основным цветам тем. Я знаю, что могу:

filter: sepia() saturate(10000%) hue-rotate(30deg); 

и циклически hue-rotate по hue-rotate чтобы найти цвет, но можно ли заранее рассчитать это значение? Учитывая, что указанное шестнадцатеричное значение довольно темное, я полагаю, что мне нужно будет включить фильтр invert(%) .

Учитывая шестнадцатеричное значение #689d94 какую математику мне нужно сделать, чтобы вычислить желаемое значение hue-rotate и invert значение для преобразования моего белого фонового изображения в один цвет?

редактировать

Вот fragment div с белым фоном, который фильтруется зеленым. Трюк здесь – это весь div , который фильтруется, а не только изображение. Если бы я должен был ввести какой-либо текст в div цвет текста тоже стал бы зеленым.

 div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent; background-size:5em; width:5em; height:5em; -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg); filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg); } 
 

    Ключ в этом случае – определить начальный цвет. Белый или черный или любой серый цвет технически является фактическим цветом – вы не можете насытить или повернуть его. Вам придется «раскрасить» его каким-то образом, и фильтр сепии является единственным фильтром, который выполняет некоторую форму раскраски.

    Было бы проще, если бы ваш образ был чистым на 100% красным. Затем вы можете просто добавить целевую степень напрямую и настроить насыщенность и легкость, используя HSL для цели. Для начальной точки белого цвета первым шагом является преобразование и определение промежуточного цвета, чтобы мы могли насытить и повернуть его позже.

    Позволяет сначала затемнить белое изображение и применить сепию, чтобы получить «базовый» цвет, с которым мы можем работать:

     filter: brightness(50%) sepia(1); 

    Это будет иметь значение RGB цвета примерно:

     rgb(178, 160, 128) 

    Второй шаг – преобразовать это в цветовое пространство HSL, которое дает нам:

     hsl(38, 24.5%, 60%); 

    Результат базового цвета

     div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat; background-size:5em; width:5em; height:5em; -webkit-filter: brightness(50%) sepia(1); filter: brightness(50%) sepia(1); } 
     

    Принятый ответ неверен. Hue-rotate не сохраняет насыщенность или яркость, и вам нужно делать сумасшедшую математику, чтобы придумать правильные значения. Более простой способ – который приведет к правильному результату – это сделать фильтр CSS, который ссылается на фильтр SVG. Примитив feColorMatrix в фильтрах SVG позволяет вам выбирать цвет напрямую – например, так. Возьмите свой цвет # 424242 – разделите шестнадцатеричное значение каждого цвета на #FF (.257) и поместите их в пятый столбец, первые три строки вашей цветовой матрицы. Вот так:

     div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent; background-size:5em; width:5em; height:5em; -webkit-filter: url(#colorize); filter: url(#colorize); } 
     
    /filter>

    Если svg используются, то …

    Вы можете открыть svg-файлы с помощью текстового редактора, скопировать и вставить в html-файл, а затем изменить цвет пути по мере необходимости.

    В приведенном ниже примере кода … Я просто изменил цвет пути центрального кольца. Надеюсь это поможет..

      var imgg =document.getElementById("path"); imgg.style="fill:#424242"; 
                                                   
    Давайте будем гением компьютера.