CSS在两个值之间更改图像颜色

Question

我一直在尝试将图像的颜色更改为变量，但是我无法弄清楚。 “-色相旋转”似乎非常适合我要搜索的内容。

目前，我已经在下面的示例中所示的php，css-selectors中对一些值进行了硬编码，但是由于色相-旋转度似乎遍地都是，所以我如何产生一种介于当前的硬编码？

示例渐变：

>= 27 = hot (red)
>= 24 = semi-hot (orange-ish)
>= 22.5 = middle (yellow)
>= 20 = ok (green)
>= 18 = semi-cold (turqoise)
>= 7 = cold (blue)
<7 = ice (lightblue)

代码：

.temp-ice{
-webkit-filter: brightness(172%) grayscale(84%) hue-rotate(260deg);
filter: brightness(172%) grayscale(84%) hue-rotate(260deg);

}
.temp-cold{
-webkit-filter: brightness(100%) hue-rotate(260deg);
filter: brightness(100%) hue-rotate(260deg);
}

.temp-semi-cold{
-webkit-filter: brightness(120%) hue-rotate(245deg);
filter: brightness(120%) hue-rotate(245deg);
}

.temp-ok{
-webkit-filter: brightness(110%) hue-rotate(170deg);
filter: brightness(110%) hue-rotate(170deg);
}

.temp-middle{
-webkit-filter: brightness(120%) hue-rotate(130deg);
filter: brightness(120%) hue-rotate(130deg);
}

.temp-semi-hot{
-webkit-filter: brightness(90%) hue-rotate(115deg);
filter: brightness(90%) hue-rotate(115deg);
}

.temp-hot{
-webkit-filter: brightness(60%) hue-rotate(60deg);
filter: brightness(60%) hue-rotate(60deg);
}

（忽略亮度，只是为了固定图像亮度） 当前的样子：