js渐变色生成

 

function generateGradientColor(color1, color2, percentage) {
  // 将颜色转换为 RGB 格式
  function hexToRgb(hex) {
    const bigint = parseInt(hex.replace('#', ''), 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    return { r, g, b };
  }

  // 将 RGB 值转换为十六进制格式
  function rgbToHex(rgb) {
    const { r, g, b } = rgb;
    return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
  }

  const color1Rgb = hexToRgb(color1);
  const color2Rgb = hexToRgb(color2);

  // 计算中间颜色的 RGB 值
  const r = Math.round(color1Rgb.r + (color2Rgb.r - color1Rgb.r) * percentage);
  const g = Math.round(color1Rgb.g + (color2Rgb.g - color1Rgb.g) * percentage);
  const b = Math.round(color1Rgb.b + (color2Rgb.b - color1Rgb.b) * percentage);

  // 将 RGB 值转换为十六进制格式
  const gradientColor = rgbToHex({ r, g, b });

  return gradientColor;
}

// 示例用法
const color1 = '#FF0000';  // 红色
const color2 = '#0000FF';  // 蓝色
const percentage = 0.5;    // 渐变比例，0.0 到 1.0 之间

const gradientColor = generateGradientColor(color1, color2, percentage);
console.log(gradientColor);  // 输出生成的渐变色