我完全理解你的需求——手动映射0-100%的RGB值太繁琐了，其实我们可以通过解析渐变色标+线性插值的方式，程序化计算任意百分比对应的纯色。下面是具体的实现思路和代码示例：

第一步：标准化渐变色标数组 #

首先，我们需要把你的CSS渐变转换成包含位置（0-100%）和RGB值的标准数组。根据CSS线性渐变的规则：

• 如果第一个色标指定了位置（比如你的#00b050 20%），那么0%到该位置的区域都是这个颜色，所以要补充一个0%的色点；
• 未指定位置的色标，会在最近的前后指定位置之间均匀分配。

你的渐变整理后的标准数组如下（已计算好所有色标位置）：

const gradientStops = [
  { position: 0, rgb: [0, 176, 80] },      // #00b050
  { position: 20, rgb: [0, 176, 80] },     // #00b050
  { position: 40, rgb: [74, 193, 72] },    // #4ac148
  { position: 46.6667, rgb: [116, 209, 62] }, // #74d13e
  { position: 53.3333, rgb: [157, 224, 49] }, // #9de031
  { position: 60, rgb: [198, 238, 33] },   // #c6ee21
  { position: 66.6667, rgb: [219, 229, 8] }, // #dbe508
  { position: 73.3333, rgb: [238, 219, 0] }, // #eedb00
  { position: 80, rgb: [255, 208, 0] },    // #ffd000
  { position: 86.6667, rgb: [255, 173, 0] }, // #ffad00
  { position: 93.3333, rgb: [255, 135, 0] }, // #ff8700
  { position: 96.6667, rgb: [255, 91, 0] },  // #ff5b00
  { position: 100, rgb: [255, 0, 0] }      // #ff0000
];

第二步：编写插值计算函数 #

接下来写一个函数，输入目标百分比，输出对应的纯色（RGB或十六进制格式）：

function getColorFromGradient(targetPercent, gradientStops) {
  // 处理边界情况：小于0取第一个色，大于100取最后一个色
  if (targetPercent <= 0) return rgbToHex(...gradientStops[0].rgb);
  if (targetPercent >= 100) return rgbToHex(...gradientStops[gradientStops.length - 1].rgb);

  // 找到目标百分比所在的区间
  let startStop, endStop;
  for (let i = 0; i < gradientStops.length - 1; i++) {
    if (targetPercent >= gradientStops[i].position && targetPercent <= gradientStops[i+1].position) {
      startStop = gradientStops[i];
      endStop = gradientStops[i+1];
      break;
    }
  }

  // 计算区间内的相对位置（0-1）
  const relativePos = (targetPercent - startStop.position) / (endStop.position - startStop.position);

  // 对RGB三个通道分别线性插值
  const r = Math.round(startStop.rgb[0] + (endStop.rgb[0] - startStop.rgb[0]) * relativePos);
  const g = Math.round(startStop.rgb[1] + (endStop.rgb[1] - startStop.rgb[1]) * relativePos);
  const b = Math.round(startStop.rgb[2] + (endStop.rgb[2] - startStop.rgb[2]) * relativePos);

  // 转换成十六进制格式（也可以直接返回`rgb(${r}, ${g}, ${b})`）
  return rgbToHex(r, g, b);
}

// 辅助函数：RGB转十六进制
function rgbToHex(r, g, b) {
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}

第三步：使用示例 #

比如你想获取50%位置的颜色：

console.log(getColorFromGradient(50, gradientStops)); 
// 输出 #8ADB40（对应区间内的插值结果）

关键说明 #

• 这个方法的核心是线性插值，完全模拟CSS渐变的颜色过渡逻辑，结果和CSS渐变对应位置的颜色完全一致；
• 如果后续修改渐变，只需要更新gradientStops数组即可，不需要重新写映射逻辑；
• 你也可以扩展函数，支持直接解析CSS渐变字符串（不需要手动整理色标数组），但手动整理更直观且不易出错。

内容的提问来源于stack exchange，提问作者calicomac