Jquery 从红色到绿色的渐变很好吗？

我目前正在尝试将一个div的背景从红色直接淡入绿色。但我找不到一个好的过渡，不击中任何不匹配的颜色的方式。 我找到的两种方法都使用jQuery.Color-plugin，您也可以在以下网站上找到它们：

第一个使用RGB。jQuery只是在#ff0000（红色）和#00ff00（绿色）之间插值。但是在动画的某个地方，颜色看起来相当深的黄色或棕色，这会影响整个动画的印象（大概是888800）。

第二个使用 但在这里，动画通过亮黄色，因为色调值在0到120之间设置动画，在60处通过黄色：

---

有没有其他方法可以通过良好的过渡从红色变为绿色？也许在理论上？

你有没有试着在绿色的div上面放一个红色的div，然后把红色的div淡出？

---

也许不是最优雅的方式，但它应该会起作用。

我进一步采纳了我在评论中提出的建议。。。因此，我们通过

b0b080

进行转换，这看起来不错。甚至更进一步，它几乎通过白色…-<代码>ffffc0

通过添加稍多的蓝色，过渡色更接近灰色，而不是泥黄色。它仍然不完美，但是

顺便说一句，这可能是一个比您最初认为的更复杂的问题。人类对颜色的感知是非常非线性的。我曾经不得不写一个算法来确定两种任意颜色与人类的相似程度（）。我能找到的最佳解决方案（链接问题中的第四个情节）

---

正如你所见，实际颜色和感知颜色之间的关系相当复杂。理论上，你需要找到灰度变化最小的两种颜色之间的路径（在其中一个方格上）。

在youtube上只花了四年就找到了答案：

这与颜色的储存方式有关。众所周知，（0,0,0）的rgb值为黑色（0%光子），而（255255255）为白色（100%光子）。但是有多少光子是（127127127）

不是50%，只是25%左右。这就是将rgb值转换为灯光时显示器所做的操作

因此，当以线性方式设置（255,0,0）到（0255,0）（每个光子33%）的动画时，它通过（127127,0）时只有25%*1/3+25%*1/3=16%的光子，这要暗得多。这是介于两者之间的褐色

相反，您应该做的是在取平均值之前将值平方，然后取结果的平方根

结果要好得多，因为中间值现在是（180，180，0），因此更亮

您可以在JSFIDLE上使用gamma的值：

---

您是否考虑过将其分为两步过渡-例如，

ff0000

->

b0b000

->

00ff00

？这样可以使“泥泞”的颜色变浅。你也可以考虑添加一点蓝色来减轻它的整体…值得注意的是，在红色/绿色之间总是会有一些黄色的阴影，因为它很轻，它几乎是白色的，如此黑暗，它几乎是黑色或中间的东西…这有助于一点：不在你的答案之前。我现在做了，这只是一个rgb转换：

 $("#rgb")
    .css("background-color", "#ff0000")
    .animate({backgroundColor: "#00ff00"});
$("#hsl")
    .css("background-color", $.Color({ hue: 0, saturation: 1, lightness: 0.5 }))
    .animate({backgroundColor: $.Color({ hue: 120, saturation: 1, lightness: 0.5 })});

PS: I don't know, why I got the error-message that I need to indent some code. But adding this line helped.