const parseHexColor = hexColor => hexColor .match(/(?=#)?\w{2}/g) .map(c => parseInt(c, 16)); /** * @param {string} beginColor eg. #FFFFFF must have 6 chars. * @param {*} endColor eg. #000000 must have 6 chars. * @param {*} percent must ∈ [0, 1]. */ const interpolateColor = (beginColor, endColor, percent) => { const bColor = parseHexColor(beginColor); const eColor = parseHexColor(endColor); const output = [...new Array(3)].map((_, ii) => Math.round(bColor[ii] + (eColor[ii] - bColor[ii]) * percent) .toString(16) ) return `#${output.join('')}`; }