本文介绍如何根据对象中数值的大小，将其映射为从白色（最小值）到深蓝（最大值）的平滑rgb渐变色，并提供可直接用于html网格渲染的javascript解决方案。
本文介绍如何根据对象中数值的大小，将其映射为从白色（最小值）到深蓝（最大值）的平滑rgb渐变色，并提供可直接用于html网格渲染的javascript解决方案。
在数据可视化场景中，常需将数值型字段转化为视觉可感知的颜色强度——尤其是用蓝色系表达“数值越大、颜色越深”的直观语义。本教程以一个含200+键值对的对象为例（如 {"id1": 0, "id2": 10, "id3": 51, "id4": 2}），演示如何为每个值动态计算对应十六进制蓝色阴影（HEX），实现从 #FFFFFF（纯白，对应最小值 0）到 #0352FF（深蓝，对应最大值 maxValue）的线性渐变。
核心原理：线性插值（LERP）
我们采用 RGB 通道分别线性插值的方式：对每个通道（R、G、B），将输入值 v 按比例映射到起始色（白色 (255,255,255)）与目标色（深蓝 (3,82,255)）之间。公式为：
channel(v) = (v − min) × (target − base) / (max − min) + base
完整可运行代码
以下封装为高复用函数，支持任意 min/max 范围和起止色：
class RGB {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
}
// 通用归一化映射函数：将 [min, max] 线性映射到 [left, right]
const getNormalized = (min, max, left, right) =>
v => (v - min) * (right - left) / (max - min) + left;
// 构建颜色生成器：返回 (value) => '#RRGGBB'
const prepareColor = (rgbStart, rgbEnd, min, max) => value => {
const r = Math.floor(getNormalized(min, max, rgbStart.r, rgbEnd.r)(value));
const g = Math.floor(getNormalized(min, max, rgbStart.g, rgbEnd.g)(value));
const b = Math.floor(getNormalized(min, max, rgbStart.b, rgbEnd.b)(value));
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
};
// 示例：假设 minValue = 0, maxValue = 51（实际应动态计算）
const data = { "id1": 0, "id2": 10, "id3": 51, "id4": 2 };
const values = Object.values(data);
const minValue = Math.min(...values); // → 0
const maxValue = Math.max(...values); // → 51
const getColor = prepareColor(
new RGB(255, 255, 255), // 白色起点
new RGB(3, 82, 255), // 深蓝终点
minValue,
maxValue
);
// 应用示例：为每个 grid cell 设置背景色
Object.entries(data).forEach(([id, value]) => {
const cell = document.getElementById(id); // 假设 HTML 中 cell id 与 key 一致
if (cell) cell.style.backgroundColor = getColor(value);
});
// 测试输出
console.log(getColor(0)); // #ffffff
console.log(getColor(25.5)); // 中间色，如 #7f9dff（取决于插值结果）
console.log(getColor(51)); // #0352ff关键注意事项
- ✅ 务必动态计算 minValue 和 maxValue：使用 Math.min(...values) 与 Math.max(...values)，而非硬编码（原答案中 1, 84 仅为示意）。
- ✅ 边界处理：当 min === max 时（所有值相同），需增加保护逻辑（如直接返回中间色），避免除零错误。
- ⚠️ 色彩感知优化：RGB 线性插值在视觉上并非完全均匀；如需更符合人眼感知的渐变，建议改用 HSL 或 LAB 空间插值（进阶需求）。
- ? CSS 兼容性：生成的 HEX 字符串可直接用于 element.style.backgroundColor 或 CSS 变量，无需额外转换。
通过此方案，你可轻松将任意规模数值集合转化为专业级蓝色热力图，无缝集成至表格、网格或仪表盘等前端组件中。
