Calculate color HEX having 2 colors and percent/position

Question

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.

It's a simple linear algebra problem (and you already know that since you've got the answer for your example colors). What have you coded up so far? — Pointy, May 03 '13 at 13:54
possible duplicate of [Programmatically Lighten or Darken a hex color (or rgb, and blend colors)](http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors) — Walter Roman, Mar 08 '15 at 19:55

score 49 · Accepted Answer · edited Apr 01 '15 at 07:49

49

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);

edited Apr 01 '15 at 07:49

silkfire

24,585
15
82
105

answered May 03 '13 at 13:57

techfoobar

65,616
14
114
135

note the third argument -> `0.5` which is the ratio of `color1` and `color2` – Kalamar Obliwy May 03 '13 at 14:00
1

Well this is indeed close, but if ratio is 0 then the color is black, whereas it should be color1. Moreover, the r.toString etc. wont pad with zeros, will they? – Kalamar Obliwy May 03 '13 at 14:19
var r1 = parseInt(color1.substring(0,1), 16), r2 = parseInt(color2.substring(0,1), 16); var r = Math.ceil(r1 + (r2-r1)*ratio); ?? – Kalamar Obliwy May 03 '13 at 14:20
Even if its not padded with zeros, it wont be a problem, for example if you are using it as a color. #888 and #080808 are exactly the same. – techfoobar May 03 '13 at 14:35
`#abc` is `#aabbcc`; next, `#8FFFF` is not valid I guess (which is the case if not all of r,g,b are either 1 or 2 digits) – Kalamar Obliwy May 03 '13 at 15:04
1

The substring is wrong, the parameters are : (0, 2) - (2, 4) - (4, 6) – Emanuele Pavanello May 28 '14 at 10:50
1

the hex function return should be : return (x.length == 1) ? x + x : x; – tolmark Feb 06 '15 at 17:09
color1 and color2 are reversed. – Antoine Mar 14 '18 at 11:16
Since this uses Math.ceil certain ratios can break it: `var color1 = 'FFFFFF'; var color2 = 'FF0000'; var ratio = 0.2666666666666669;` results in middle being '1004545' because it tries to convert 256 to hex – axelstudios Jun 15 '20 at 00:21

score 6 · Answer 2 · answered Sep 07 '20 at 09:54

An ES6 version with comprehensions:

function interpolateColor(c0, c1, f){
    c0 = c0.match(/.{1,2}/g).map((oct)=>parseInt(oct, 16) * (1-f))
    c1 = c1.match(/.{1,2}/g).map((oct)=>parseInt(oct, 16) * f)
    let ci = [0,1,2].map(i => Math.min(Math.round(c0[i]+c1[i]), 255))
    return ci.reduce((a,v) => ((a << 8) + v), 0).toString(16).padStart(6, "0")
}

As in the accepted answer, c0,c1 are color codes (without the leading #) and f is "progress" between the two values. (At f=0 this ends up returning c0, at f=1 this returns c1).

The first two lines convert the color codes into arrays of scaled integers
The third line:
- "zips" the two integer arrays
- sums the corresponding values
- rounds the sum and clamps it to 0-255
The fourth line:
- converts the integer array into a single integer (reduce and bitshifting)
- converts the integer into its hexadecimal string form
- ensures the resulting string is 6 characters long and returns it

Nilz11 · Answer 3 · 2013-05-06T17:28:43.580

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);

Masih Jahangiri · Answer 4 · 2019-12-21T23:33:51.687

You can use this ready function (ES6):

const calculateMiddleColor = ({
  color1 = 'FF0000',
  color2 = '00FF00',
  ratio,
}) => {
  const hex = (color) => {
    const colorString = color.toString(16);
    return colorString.length === 1 ? `0${colorString}` : colorString;
  };

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

  return hex(r) + hex(g) + hex(b);
};
//////////////////////////////////////////////////////////////////////
console.log(calculateMiddleColor({ ratio: 0 / 5 })); // ff0000
console.log(calculateMiddleColor({ ratio: 5 / 5 })); // 00ff00
console.log(calculateMiddleColor({ ratio: 2.5 / 5 })); // 808000
console.log(calculateMiddleColor({ ratio: 4.2 / 5 })); // 29d700

Calculate color HEX having 2 colors and percent/position

4 Answers4

Linked

Related