如何用JavaScript和CSS实现红-灰-绿渐变的数值热力图？

AI 小北

2026-6-19

问题分析与解决方案

原代码的核心错误

你的实现没抓住HSL颜色模型中「灰色」的本质——饱和度为0，反而错误地只调整色相，导致了两个关键问题：

负值区间：固定色相为0°（红色）且饱和度保持100%，哪怕是-0.07这种接近中性的负值，也会显示完全饱和的亮红色，没有向灰色过渡的过程。
正值区间：让色相从0°（红色）逐步升到120°（绿色），必然会经过橙色区间（30°左右），所以低正值会显示橙色而非预期的淡绿色。

修正后的实现思路

中性状态（value=0）对应饱和度0%的灰色，以此为分界点：

当value < 0：固定色相为0°（红色），饱和度随value从-1到0，从100%线性降到0%
当value > 0：固定色相为120°（绿色），饱和度随value从0到1，从0%线性升到100%

修正后的代码

function getAsHslHeatMap(value: number) {
    // 限制数值范围在[-1, 1]内
    value = Math.max(-1, Math.min(1, value));
    
    let hue;
    let saturation;
    
    if (value <= 0) {
        // 负值：红色 → 灰色，色相固定0°，饱和度从100%降至0%
        hue = 0;
        saturation = Math.round(-value * 100);
    } else {
        // 正值：灰色 → 绿色，色相固定120°，饱和度从0%升至100%
        hue = 120;
        saturation = Math.round(value * 100);
    }
    
    const lightness = 50;
    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}