CSS色调-从红色旋转到特定颜色

我有一个平坦的红色.png图像,我希望通过使用CSS过滤器将其更改为特定的颜色.我认为这是最好的方法.

我正在使用SASS,通过使用它,我可以获得颜色的色调,饱和度和亮度.通过使用"红色"图像,这意味着色调的旋转度从0开始,因此通过使用hue-rotate我然后将其从0旋转到特定颜色的色调度.与饱和度和亮度相同.

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

输出为:

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%); 如果我检查特定颜色的HSL是什么......

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

然而,当应用此图像时,图像是超暗的.看起来像正确的色调,但饱和度和亮度是错误的？

对我在哪里做错的任何想法？我看了一下这个例子:如何计算所需的色调旋转以生成特定的颜色？但似乎给了我同样的问题.

https://jsfiddle.net/gosj0ur2/