Css 计算从颜色A到颜色B的色调旋转

看看下面的CSS：

.colorA{
    color:#ff0000;
}
.colorB{
    color:#ab123f;
}
.sameAsColorB{
    color:#ff0000;
    -webkit-filter:hue-rotate(...);
}

---

目标是：给定两种十六进制代码颜色，如何计算旋转度以将第一种颜色转换为第二种颜色？如果色调旋转无法始终实现这一点，那么它可以实现的方法是什么？

首先，您无法获得所有这样的颜色。在您的示例中，无法从颜色A获得颜色B

如何将一种颜色转换成另一种颜色是相当复杂的，取决于每种颜色。如果从绿色（#00ff00）开始，以下javascript函数将为您提供新颜色中的红色、绿色和蓝色的数量：（注意：所有角度均以弧度为单位）

函数getcolors（x）{ var red=Math.sqrt（Math.cos（x+（Math.PI+1）/2）+1/2）； var green=Math.sqrt（Math.cos（x）+1/2）； var blue=Math.sqrt（Math.cos（x-（Math.PI+1）/2）+1/2）； 文件。写下（“红色：+red+”
绿色：+green+”
蓝色：+blue）； } 颜色的最大值为1.5的平方根。如果希望该值以正常的255为基数，则将其乘以255，然后除以1.5的平方根

编写示例

getcolors（1）

，查看

-webkit filter:hue rotate（1rad）的颜色

所有原色（红色、绿色和蓝色）的工作方式都是一样的。
根据我对色调旋转的理解，我得出结论，你不可能得到所有的颜色。如果您选择一种颜色并尝试使用色调旋转来获得任意颜色，您将面临它们可能不具有相同半径的问题。色调旋转只会旋转，它不会改变半径。好的，但是你也可以使用webkit过滤器改变饱和度和许多其他方面，如果你不能单独使用色调旋转，如何计算所有必要的方面？你需要检查每种颜色是如何用极坐标表示的。那么计算角度和距离就相当简单了它使用css预处理器进行计算-可能会有帮助
function getcolors(x){
  var red = Math.sqrt(Math.cos(x+(Math.PI+1)/2)+1/2);
  var green = Math.sqrt(Math.cos(x)+1/2);
  var blue = Math.sqrt(Math.cos(x-(Math.PI+1)/2)+1/2);
  document.write("red: " + red + "<br/>green: " + green + "<br/>blue: " + blue);
}