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.
Advertisement
Answer
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);