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

【问题标题】：Calculate hue rotation from color A to color B计算从颜色 A 到颜色 B 的色调旋转
【发布时间】：2014-09-07 18:00:08
【问题描述】：

看看下面的 CSS：

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

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

【问题讨论】：

根据我对色调旋转的理解，我得出的结论是，您无法获得所有颜色。如果您采用一种颜色并尝试使用色调旋转来获得任意颜色，您将面临它们可能具有不同半径的问题。色调旋转只旋转，不改变半径。
好的，但是你也可以使用 webkit 过滤器改变饱和度和许多其他方面，如果你不能单独使用 hue-rotate 来完成，那么如何计算所有必要的方面？
您需要检查每种颜色是如何用极坐标表示的。那么计算角度和距离就相当简单了。
This post - 使用 css 预处理器进行计算 - 可能会有所帮助

标签： css colors

【解决方案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);你会得到什么颜色。

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

【讨论】：