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

Question

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

例如，我们有绿色、黄色和红色，并且想要获取平均值:

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

并增加/减少背景位置:

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

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

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

仅供解释之用:

** [0%] |
• ** [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。