Рассчитать среднее из 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 /questions/1598158/rasschitat-srednee-iz-3-tsvetov-na-osnove-protsenta/1598165#1598165:

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>