自动Hex rgb颜色生成

时间:2014-04-27 16:28:00

标签: javascript hex rgba

我在JavaScript中根据从冷到热的值生成热图样式颜色。但由于某种原因,我得到一些粉红色和一些紫色。

stackoverflow上有很多答案,但它们主要与使用HSL生成有关,不幸的是,对于Google Earth,我需要RGBA格式(向后为ABGR)

1 =红色=热

0.5 =绿色=中间

0 =蓝色=冷

    function generateColor(value) {
        var r = Math.round(value * 255),
            g = Math.round((1 - Math.abs(0.5 - value)) * 255),
            b = Math.round((1 - value) * 255);
        r = r.toString(16);
        g = g.toString(16);
        b = b.toString(16);
        if (r.length < 2) {
            r += r;
        }
        if (g.length < 2) {
            g += g;
        }
        if (b.length < 2) {
            b += b;
        }
        return 'ff' + b + g + r;
    }

这里有一个错误!!这是我用来尝试找出问题的小提琴:

http://jsfiddle.net/kmturley/sT8BL/1/

1 个答案:

答案 0 :(得分:1)

我认为你的问题在这里:

if (r.length < 2) {
    r += r;
}

如果r只是一个字符,请添加0,而不是其自身:

if (r.length < 2) {
    r = "0" + r;
}

只需一行:

r = ("0" + r.toString(16)).slice(-2);

但你也可以将大部分功能放在一行:

function generateColor(value) {
    var r = Math.round(value * 255),
        g = Math.round((1 - Math.abs(0.5 - value)) * 255),
        b = Math.round((1 - value) * 255);
    return (0xff000000 + 0x10000 * b + 256 * g + r).toString(16);
}