Рассчитать цвет HEX, имеющий 2 цвета и процент/положение

Можно ли рассчитать цвет в середине градиента?

var color1 = 'FF0000';
var color2 = '00FF00';

// 50% between the two colors, should return '808000'
var middle = gradient(color1, color2, 0.5);

У меня только две шестнадцатеричные строки, и я хочу один взамен.

Ответы

Ответ 1

Это должно работать:

В основном это связано с преобразованием их в десятичные числа, поиск половинок, преобразование результатов обратно в шестнадцатеричное, а затем их объединение.

var color1 = 'FF0000';
var color2 = '00FF00';
var ratio = 0.5;
var hex = function(x) {
    x = x.toString(16);
    return (x.length == 1) ? '0' + x : x;
};

var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio));
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio));
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio));

var middle = hex(r) + hex(g) + hex(b);

Ответ 2

Я не могу прокомментировать ответ выше, поэтому я пишу его здесь:

Я узнал, что в методе подстроки Javascript индекс параметра не включен в возвращаемую строку. Это означает:

var string = "test";
//index:      0123
alert(string.substring(1,3));

//will alert es and NOT est

Изменить: это должно быть:

parseInt(color1.substring(0,2), 16);
parseInt(color1.substring(2,4), 16);

и

parseInt(color1.substring(4,6), 16);