Как изменить цвет иконки с помощью filter?

Question

[tvsjke]

Дано: красная иконка и цвет в hex. Нужно: изменить цвет иконки на hex цвет.

Поняно, что нужно использовать css filter. Для этого нам нужно, насколько я понял, преобразовать hex в hsb(hsv). Окей, получаю конкретные значения с помощью самописной функции или онлайн конвертера, неважно.

Ну и подставляю их (пример для цвета FF95A1):

filter: hue-rotate(353deg) saturate(42) brightness(100) ;

https://jsfiddle.net/tvsjke/kvc3qktL/1/

Ну и на выходе вместо бледно-красного какой-то розово-сиреневый. Что я делаю не так ?

UPD1. Если оставить только изменение цвета filter: hue-rotate(353deg) то все работает корректно, но цвет получается без изменения насыщенности и яркости.

Answer 1

[WQP]

Используйте svg и не придумывайте очередной велосипед

Comments

[tvsjke]

А с svg можно решить эту проблему в 1 строку ? И почему это велосипед ? Мне нужно изменить цвет, filter как раз это и делает, все современные браузеры его поддерживают

[WQP]

tvsjke: пример codepen.io/Glaswr/pen/eBbZrL

[tvsjke]

WQP: Понял, спасибо