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

Question

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

例如，我们有green、yellow和red并希望得到平均值：

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

并增加/减少background-position：

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

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

...但是我认为这可以通过或作为输出“更好”地完成。rgb/ahex

仅用于解释目的：

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

是否已经有这个问题的实现，或者你们中的一个人过去写过一些东西？

更新

明白了，感谢 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>