漂亮的从红色到绿色的渐变？

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处经过黄色：

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

- Andreas

---

你有没有考虑过将它变成两个步骤的转换 - 比如，ff0000 -> b0b000 -> 00ff00？这样可以让“浑浊”的颜色变得更轻。你也可以考虑添加一点蓝色来整体加亮... 值得注意的是，在红/绿之间总会有某种程度的黄色，无论它是如此浅以至于几乎是白色，还是如此深以至于几乎是黑色，或者介于两者之间... - Basic

这确实有点帮助：http://jsfiddle.net/9RUBR/2/ - Andreas

Answer 1

仅用四年时间在youtube上就找到了答案：https://www.youtube.com/watch?v=LKnqECcg6Gw。这与颜色的存储方式有关。众所周知，RGB值为（0,0,0）时是黑色（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.

- Andreas

Answer 2

我进一步采纳了我在评论中提出的建议... http://jsfiddle.net/9RUBR/3/ 所以我们通过b0b080进行过渡，这看起来还不错。或者更进一步，使它接近白色... http://jsfiddle.net/9RUBR/4/ - ffffc0 通过添加更多蓝色，过渡颜色更接近灰色而不是混浊的黄色。它仍然不完美，但...

顺便说一下，这可能比你最初想象的要复杂得多。人类对颜色的感知非常非线性。我曾经写过一个算法，确定两种任意颜色与人类的相似程度（带有漂亮的彩色图的问题）。我能找到的最好的解决方案涉及DeltaE 2000（链接问题中的第四个图）。

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

- Basic

Answer 3

你尝试在绿色div上面放置一个红色div并将红色div淡出了吗？也许不是最优雅的方法，但它应该可以解决问题。

- almo

---

不在你回答之前。我现在已经做了，这只是一个RGB过渡：http://jsfiddle.net/bU4hM/ - Andreas