如何用CSS/SVG滤镜实现类似Photoshop的指定色相范围调整功能

我想了解是否可以使用CSS或SVG滤镜实现与Photoshop色相/饱和度功能一致的色相/饱和度色彩变换效果。

根据我查阅的资料，Photoshop内部会先将所有像素从RGB色彩模式转换为HSL模式，再根据用户通过滑块定义的参数调整色相（H）、饱和度（S）或明度（L）数值，如下图所示：

这里我选择的是默认范围Master，意味着所有色相值都会被纳入调整范围。

使用CSS hue-rotate 滤镜可以得到近似效果，如下图所示：

受此前相关研究中提到的问题影响，部分颜色显示效果存在细微差异，这一点对我来说可以接受，我不需要达到与Photoshop完全一致的精度，二者的内部处理流程从原理上看基本近似。

但Photoshop还支持定义参与调整的色相范围，如下图所示：

该范围设置的作用是：所有色相值落在设置范围外的颜色都不会被调整，比如我的示例中1号、2号、5号颜色就保持不变。

我尝试用CSS或SVG滤镜实现同样的效果但没有找到可行方案，查阅滤镜效果官方文档也没找到可用于定义调整范围的相关属性。请问是否有实现该需求的方法？如果CSS滤镜无法实现，有没有其他可行的替代方案？

编辑补充： 以下代码片段展示了我使用filter: hue-rotate(45deg)得到的效果，以及我想要实现的目标效果。

.block-wrapper {
  width: 100%;
  height: 50px;
  display: flex;
  margin-bottom: 10px;
}

.block {
  width: 20%;
  height: 100%;
}

.b1 {
  background-color: rgb(29 85 34);
}

.b1-goal {
  background-color: rgb(29 85 34);
}

.b2 {
  background-color: rgb(32 53 79);
}

.b2-goal {
  background-color: rgb(32 53 79);
}

.b3 {
  background-color: rgb(175 43 52);
}

.b3-goal {
  background-color: rgb(173 75 51);
}

.b4 {
  background-color: rgb(172 94 50);
}

.b4-goal {
  background-color: rgb(166 160 44);
}

.b5 {
  background-color: rgb(96 230 33);
}

.b5-goal {
  background-color: rgb(96 230 33);
}

.hue-45 {
  filter: hue-rotate(45deg);
}

<h3>原图</h3>
<div class="block-wrapper">
  <div class="block b1"></div>
  <div class="block b2"></div>
  <div class="block b3"></div>
  <div class="block b4"></div>
  <div class="block b5"></div>
</div>

<h3>应用<code>hue-rotate: 45deg;</code>后的效果</h3>
<div class="block-wrapper hue-45">
  <div class="block b1"></div>
  <div class="block b2"></div>
  <div class="block b3"></div>
  <div class="block b4"></div>
  <div class="block b5"></div>
</div>

<h3>预期效果：仅调整红色系色相</h3>
<div class="block-wrapper">
  <div class="block b1-goal"></div>
  <div class="block b2-goal"></div>
  <div class="block b3-goal"></div>
  <div class="block b4-goal"></div>
  <div class="block b5-goal"></div>
</div>

内容的提问来源于stack exchange，提问作者Marco Couto