【问题标题】:Automatic Hex rgb colour generation自动 Hex rgb 颜色生成
【发布时间】:2014-04-27 16:27:59
【问题描述】:

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

stackoverflow 上有很多答案,但它们大多与使用 HSL 生成有关,不幸的是,对于 Google 地球,我需要 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/

【问题讨论】:

标签: javascript hex rgba


【解决方案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);
}

【讨论】:

  • 很好,这效果更好!但是颜色有点偏:jsfiddle.net/kmturley/sT8BL/2
  • @KimT 我明白了...我想这可能是因为您选择了绿色作为中间色,而黄色可能是更好的选择。但要这样做,您必须修改计算 rgb... 的方式,这会让您怀疑 HSL 是否更好。你仍然可以将值转换为 RGB,你知道的。
  • 是的,也许我会这样做,HSL 到 RGB 的功能有点大stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
  • @KimT 酷,几个月前我发布了一个more compact 版本,如果你想尝试一下。
猜你喜欢
  • 1970-01-01
  • 2019-02-08
  • 2017-08-04
  • 1970-01-01
  • 2018-06-16
  • 2012-05-03
  • 2015-05-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多