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

Question

我目前正在尝试将 div 的背景直接从红色淡化为绿色。但是我找不到一个很好的过渡，它不会在途中遇到任何不匹配的颜色。 我发现的两种方法都使用了 jQuery.Color-plugin，你也可以在 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

我进一步采纳了我在评论中提出的建议...http://jsfiddle.net/9RUBR/3/ 所以我们过渡到看起来不错的b0b080。甚至更进一步，它几乎通过白色... http://jsfiddle.net/9RUBR/4/ - ffffc0

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

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

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

Answer 2

在 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% 光子）时，它通过 (127, 127, 0) 只有 25% * 1/ 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.

Answer 3

您是否尝试将红色 div 放在绿色 div 之上并淡出红色 div？ 也许不是最优雅的方式，但它应该有效。