jquery - 从红色到绿色的渐变效果很好吗？

Question

我目前正在尝试将 div 的背景直接从红色淡入绿色。但我找不到一个很好的过渡，不会碰到任何不匹配的颜色。我发现的两种方法都使用 jQuery.Color 插件，您也可以在 JsFiddle 上找到它们。 :

 $("#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 })});

1. 第一个使用 RGB。 jQuery 只是在#ff0000(红色)和#00ff00(绿色)之间进行插值。但在动画中间的某个地方，颜色变得相当深黄色或棕色，这扰乱了整个动画的印象(可能是#888800)。

2. 第二个使用 HSL但在这里，动画通过亮黄色传递，因为色调值从 0 到 120 进行动画处理，在 60 处传递黄色:

有没有其他方法可以从红色到绿色并实现良好的过渡？也许理论上是这样？

Answer 1

只花了四年时间就在 YouTube 上偶然发现了答案:https://www.youtube.com/watch?v=LKnqECcg6Gw

这与颜色的存储方式有关。众所周知，(0,0,0) 的 RGB 值是黑色(0% 光子)，而 (255, 255, 255) 是白色(100% 光子)。但是 (127, 127, 127) 有多少个光子？

不是 50%，而是 25% 左右。这就是显示器将 RGB 值转换为光时所做的事情。

因此，当以线性方式将 (255, 0, 0) 动画化到 (0, 255, 0)(每个光子 33%)时，它仅以 25% * 1/的速度穿过 (127, 127, 0) 3 + 25% * 1/3 = 16% 光子，更暗。这是介于两者之间的棕色。

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

结果好多了，因为中间值现在是 (180, 180, 0)，因此更加明亮。

您可以在 jsfiddle 上调整 gamma 的值: https://jsfiddle.net/fxftm4ub/1/

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