本文介绍一种基于数值范围线性插值的方法，将任意非负数值映射为 rgb 蓝色系渐变色：最小值对应接近白色的浅蓝（#ffffff），最大值对应指定的深蓝（#0352ff），中间值平滑过渡。适用于大规模 html 网格着色等数据可视化场景。
本文介绍一种基于数值范围线性插值的方法，将任意非负数值映射为 rgb 蓝色系渐变色：最小值对应接近白色的浅蓝（#ffffff），最大值对应指定的深蓝（#0352ff），中间值平滑过渡。适用于大规模 html 网格着色等数据可视化场景。
在数据驱动的前端可视化中，常需将数值映射为颜色以直观反映其大小关系。本例中，目标是将对象中 200+ 个非负整数（如 {id1: 0, id2: 10, id3: 51, id4: 2}）按比例转换为蓝色系渐变色：最小值（0）→ 浅色（近白色），最大值 → 深蓝（#0352ff，即 RGB(3, 82, 255)），实现视觉上清晰的明暗对比。
核心思路是线性插值（Linear Interpolation）：对 R、G、B 三个通道分别进行独立计算，将输入值从 [minValue, maxValue] 区间线性映射到 [startColor, endColor] 对应通道的取值区间。
以下是一个完整、可复用的实现方案：
class RGB {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
}
// 通用归一化函数：将 value ∈ [min, max] 映射到 [left, right]
const getNormalized = (min, max, left, right) => (value) => {
if (min === max) return left; // 防止除零
return (value - min) * (right - left) / (max - min) + left;
};
// 构建颜色生成器：从 startColor 渐变到 endColor，覆盖 [min, max] 范围
const prepareColor = (startColor, endColor, min, max) => (value) => {
const r = Math.floor(getNormalized(min, max, startColor.r, endColor.r)(value));
const g = Math.floor(getNormalized(min, max, startColor.g, endColor.g)(value));
const b = Math.floor(getNormalized(min, max, startColor.b, endColor.b)(value));
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
};
// 示例：设 minValue = 0, maxValue = 100（实际中请动态计算）
const getColor = prepareColor(
new RGB(255, 255, 255), // 浅色起点：纯白（#ffffff）
new RGB(3, 82, 255), // 深色终点：#0352ff
0, // 实际最小值（非负，通常为 0）
100 // 实际最大值（需从数据中动态获取）
);
// 使用示例
console.log(getColor(0)); // #ffffff（纯白）
console.log(getColor(50)); // #81c9ff（中等亮度蓝）
console.log(getColor(100)); // #0352ff（目标深蓝）
✅ 关键注意事项：
- 务必先计算真实 minValue 和 maxValue：遍历你的对象 Object.values(data) 获取 Math.min(...values) 和 Math.max(...values)，而非硬编码；
- 边界保护：代码中已加入 if (min === max) 判断，避免全零数据导致 NaN；
- 性能优化：prepareColor 返回闭包函数，适合批量调用（如渲染 200+ 单元格），避免重复计算插值系数；
-
HTML 应用示例：
Object.entries(data).forEach(([id, value]) => { const cell = document.getElementById(id); if (cell) cell.style.backgroundColor = getColor(value); });
该方案灵活、精确且无依赖，可轻松适配其他颜色渐变（如蓝→绿、灰→红），只需替换 RGB 实例即可。对于大规模网格，建议结合 requestIdleCallback 或分批渲染，确保主线程流畅。
