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

我有一个平面的红色.png图像，我想通过使用CSS过滤器将其更改为特定的颜色。我认为这是最好的办法

我正在使用SASS，通过使用它，我可以得到颜色的色调、饱和度和亮度。通过使用“红色”图像，意味着色调的旋转度从0开始，因此通过使用

色调旋转

我将从0旋转到特定颜色的色调度。饱和度和亮度也一样

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

这一结果如下：

过滤器：色调旋转（166.53061度）饱和（72.41379%）亮度（60.19608%）如果我检查特定颜色的HSL是什么

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

然而，当应用此选项时，图像是超暗的。看起来是正确的色调，但饱和度和亮度是错误的

你觉得我哪里做错了吗？我看了这个例子：但似乎给了我同样的问题

如果目标只是将图像的颜色从红色更改为其他特定颜色，则可以使用CSS伪选择器创建一种覆盖，这样就不需要修改过滤器。也许是这样的：


.boo{
位置：相对位置；
宽度：20em；最小高度：10em；
背景：rgba（0,0,0,0）url(http://placekitten.com/320/160);
过渡：背景色1s；
}
嘘：停下来{
背景色：rgba（0,0,0,5）；
}
布：以前{
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
背景色：继承；
内容：''；
}
正如“为什么色调旋转+180度和-180度不能产生原始颜色？”中所指出的，过滤器实际上并不遵循HSL颜色空间。我尝试手动匹配颜色：我从以下值获得了最佳结果：
色调旋转（174度）饱和（64%）亮度（224%）

亮度与亮度完全不同。亮度是从0（黑色）到50%（纯色）到100%（白色）的刻度。亮度是R、G和B值的倍增，因此亮度（0）创建黑色，亮度（1）保持颜色不变，但亮度（2）只是每个RGB值的两倍。从一个到另一个没有简单的公式

我不清楚你为什么要用你现在的方式来创造颜色，但我建议另一种方法。例如，jQueryUI允许您设置颜色变化的动画，如果这是您的意图的话；要直观地将平面红.png更改为不同的颜色，只需创建所需颜色的覆盖，并将其不透明度从零设置为一。如果这样做无济于事，请详细说明您希望实现的目标以及原因。
您能否创建一个演示此问题的示例？特别是编译后的CSS。另外，您确定要在能够处理筛选器属性的浏览器上查看此内容吗？不是所有的浏览器都可以。@MrLister谢谢，就可以了！是的，别担心，重新过滤。。。我会提供备用方案。我对HSL不是很精通，所以我无法提供完整的解决方案，但有一个问题是，
brightness
函数是一个乘数，因此，您实际要做的是将原始红色（31%）的亮度乘以60%。但如果你想得到60%的绝对值，你真的应该乘以194%！是一款新提琴，有一个额外的盒子，亮度值正确。我还没有找到为什么色调仍然是关闭的，所以没有发布作为答案。31%是RGB系统中红色通道的亮度。因此，相对亮度为31%（相对于纯白的100%），这与HSL符号中的亮度不同。但正如我所说的，我不是HSL专家，而且我似乎无法通过在小提琴中试验CSS函数来产生相同的颜色。