Question

看看下面的CSS：

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

目标是：给定两个十六进制代码颜色，如何计算旋转度以将第一个转换为第二个？如果这不能总是通过hue-rotate完成，那么什么是一种可以的方式吗？

Answer 1

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

如何将一种颜色转换为另一种颜色相当复杂，取决于每种颜色。如果你从绿色（＃00ff00）开始，下面的javascript函数将为你提供新颜色的红色，绿色和蓝色:(注意：所有角度都是弧度）

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);
}

颜色可以具有的最大平方根为1.5。如果你想要正常255基数的值，则将它乘以255并将其除以平方根1.5。

编写例如getcolors(1)以查看您将为-webkit-filter:hue-rotate(1rad);获取的颜色。

所有原色（红色，绿色和蓝色）的工作方式相同。

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

1 个答案: