JavaScript计算两个颜色之间的渐变色值

本文主要讲述两个十六进制颜色，对给定的两个颜色值进行渐变计算，得到渐变的所有色值的数组。

上代码

/**
 * rgb颜色转成hex16进制颜色值
 * @param r
 * @param g
 * @param b
 * @returns {string}
 */
const rgbToHex = (r, g, b) => {
  const hex = ((r << 16) | (g << 8) | b).toString(16);
  return `#${new Array(Math.abs(hex.length - 7)).join('0')}${hex}`;
};

/**
 * hex16进制颜色转成rgb颜色
 * @param hexStr
 * @returns {*[]}
 */
const hexToRgb = (hexStr) => {
  const substrHandle = (arg1, arg2) => hexStr.substr(arg1, arg2);
  const parseIntHandle = (v) => Number.parseInt(v, 16);
  if (hexStr.length === 4) {
    // #000
    return substrHandle(1).split('').map((s) => 0x11 * parseIntHandle(s, 16));
  }
  // #000000
  return [substrHandle(1, 2), substrHandle(3, 2), substrHandle(5, 2)].map((s) => parseIntHandle(s, 16));
};

/**
 * 计算渐变过渡色
 * @param startColor
 * @param endColor
 * @param step
 * @returns {String[]}
 */
const gradientTransitionColor = (startColor, endColor, step) => {
  // 将hex转换为rgb
  const sColor = hexToRgb(startColor);
  const eColor = hexToRgb(endColor);

  // 计算R\G\B每一步的差值
  const rStep = (eColor[0] - sColor[0]) / step;
  const gStep = (eColor[1] - sColor[1]) / step;
  const bStep = (eColor[2] - sColor[2]) / step;

  const gradientColorArr = [];
  for (let i = 0; i < step; i += 1) {
    // 计算每一步的hex值
    gradientColorArr.push(
      rgbToHex(
        Number.parseInt(rStep * i + sColor[0], 10),
        Number.parseInt(gStep * i + sColor[1], 10),
        Number.parseInt(bStep * i + sColor[2], 10),
      ),
    );
  }
  return gradientColorArr;
};

gradientTransitionColor('#ffffff', '#000000', 10);
//['#ffffff', '#e5e5e5', '#cccccc', '#b2b2b2', '#999999', '#7f7f7f', '#666666', '#4c4c4c', '#333333', '#191919']