不错，从红色到绿色？

我目前正试图将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 })});

第一个使用RGB。 jQuery只是在＃ff0000（红色）和＃00ff00（绿色）之间进行插值。但是在动画中间的某个地方，颜色会变成暗黄色或棕色，这会干扰整个动画的印象（可能＃888800）。
第二个使用HSL 但在这里，动画通过亮黄色的推移，由于色调值从0到120的动画，通过黄色，在60：

As you can see in this image

有没有其他方法可以从红色变为绿色，并且过渡不错？也许在理论上？

来源

2013-09-21 Andreas

你有没有考虑使其成为2步过渡 - 说，'ff0000' - >'b0b000' - >'00ff00' ？这应该可以让你使“泥泞”的颜色变浅。你也可以考虑增加一点蓝色来使整体变亮......值得注意的是，在红色/绿色之间总是会有一些黄色的阴影，不管它是如此光亮，它几乎都是白色的，如此黑暗，它几乎是黑色的，或者是在中间... – Basic

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

它也只需要四年在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的速度通过（127,127,0）/3 + 25％* 1/3 = 16％光子，这是非常黑暗的。这是两者之间的褐色。

相反，你应该做的是先取平均值，然后取平均值。

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

你可以玩上的jsfiddle伽玛值： 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.

来源

2017-07-03 19:31:46 Andreas

您是否尝试在绿色div上放置红色div并淡化红色div？也许不是最优雅的方式，但它应该工作。

来源

2013-09-21 23:53:46 almo

不是你的答案。我现在做了这只是一个rgb过渡：http://jsfiddle.net/bU4hM/ – Andreas

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

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

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

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

来源

2013-09-22 10:55:44 Basic

不错，从红色到绿色？

回答

相关问题