Calculate color HEX having 2 colors and percent/position

问题

Is it possible to calculate a color in a middle of a gradient?

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

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

I only have two hex strings, and I want one in return.

回答1:

This should work:

It basically involves converting them to decimal, finding the halves, converting the results back to hex and then concatenating them.

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:

I can't comment on the answer above, so I write it here:

I found out that in the Javascript substring method the to parameter index is not included in the returned string. That means:

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

//will alert es and NOT est

Edit: So it should be:

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

and

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

来源：https://stackoverflow.com/questions/16360533/calculate-color-hex-having-2-colors-and-percent-position

标签

javascript

jquery

colors

gradient