Average 2 hex colors together in javascript

Question

Alright thought I would throw this one out there for the crowd to think over.

Given a function (written in javascript) that expects two strings formated like a hex color (ex #FF0000)

return a hex color that is the average of both of the colors passed.

function averageColors(firstColor,secondColor)
{
  ...
  return avgColor;
}

--edit--

average would be defined as

if the color passed was yellow and the second was light purple the returned color would be a medium orange

Answer 1

I hate sounding like the oh-so-broken jQuery record, but there is a jQuery plugin for this already.

Answer 2

A quick/dirty/convenient/ES6 way to blend two hex colors by a specified perecentage:

// blend two hex colors together by an amount
function blendColors(colorA, colorB, amount) {
  const [rA, gA, bA] = colorA.match(/\w\w/g).map((c) => parseInt(c, 16));
  const [rB, gB, bB] = colorB.match(/\w\w/g).map((c) => parseInt(c, 16));
  const r = Math.round(rA + (rB - rA) * amount).toString(16).padStart(2, '0');
  const g = Math.round(gA + (gB - gA) * amount).toString(16).padStart(2, '0');
  const b = Math.round(bA + (bB - bA) * amount).toString(16).padStart(2, '0');
  return '#' + r + g + b;
}

console.log(blendColors('#00FF66', '#443456', 0.5));

Where amount should be 0 to 1, with 0 being exactly colorA, 1 being exactly colorB, and 0.5 being the "midpoint".