好看从红色变为绿色？

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（链接问题中的第4个图）

正如您所看到的，实际颜色与感知颜色之间的关系非常复杂。从理论上讲，你需要找到两种颜色之间的路径（在其中一个网格方格上），灰度变化最小。

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-values转换为light时显示的作用。

因此，当以线性方式动画（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？ 也许不是最优雅的方式，但它应该有效。