根据百分比计算3种颜色的平均值

Question

如何根据给定的百分比计算三种颜色的平均值？

例如，我们绿色，黄色和红色，并希望获得平均值：

最简单的方法是创建一个像这样的图像：

增加/减少background-position：

$('input').change(function(){
    $('#color').css({
        backgroundPosition: -this.value + "px 0"
    });
});

http://fiddle.jshell.net/VY4D8/

...但我认为可以“更好”以rgb/a或hex作为输出。

仅供解释之用：

• ** [0％] | #ff0000
• - [1％]
• - [2％]
• - [3％]
• - [4％]
• - [5％]
• - [...]
• ** [11％] | #ffc600
• - [12％]
• - [13％]
• - [14％]
• - [15％]
• - [16％]
• ** [17％] | #ffee00
• ...等...

这个问题已经有了实现，或者你们其中一个人过去写了什么？

更新

得到了，感谢Eevee https://stackoverflow.com/a/15125778/1250044：

var div = document.getElementsByTagName('div')[0];

$('input').change(function () {

    var max = this.getAttribute("max"),
        cur = this.value / max * max,
        r = Math.min(cur * 2, max),
        g = Math.min(max * 2 - cur * 2, max),
        rgb = g + "%, " + r + "%, 0%";

    div.style.backgroundColor = "rgb(" + rgb + ")";

}).change();

http://fiddle.jshell.net/VY4D8/1/

Answer 1

做数学吗？

你有：

• 为0％，红色：rgb(100%, 0%, 0%)
• 50％，黄色：rgb(100%, 100%, 0%)
• 100％，绿色：rgb(0%, 100%, 0%)

如果你想找出11％的颜色：

1. 找出它所属的部分。全光谱的11％位于红色和黄色之间的22％。

2. 插值：22％的红色加上78％的黄色来自rgb(100%, 78%, 0%)或#ffc600。

Answer 2

你可以做那个CSS linear-gradient。

演示：http://jsfiddle.net/ThinkingStiff/Jqdkq/

CSS：

.gradient {
    background: linear-gradient(
        to right, 
        red, yellow, green
        );
    height: 20px;
    width: 300px;
}

HTML：

<div class="gradient"></div>