为功率计生成红色和绿色之间的颜色？

其中"功率"是介于0.0和1.0之间的数字.0.0将返回亮红色,1.0将返回亮绿色.

Java Hue图表:

这应该工作 - 只是线性缩放红色和绿色值.假设您的最大红/绿/蓝值是255,并且n在范围内0 .. 100

R = (255 * n) / 100
G = (255 * (100 - n)) / 100 
B = 0

(修改为整数数学,给Ferrucio一顶帽子)

另一种方法是使用HSV颜色模型,并将色调从0 degrees(红色)循环到120 degrees(绿色),无论您的饱和度和值如何.这应该会给出更令人愉悦的渐变.

以下是每种技术的演示 - 顶部渐变使用RGB,底部使用HSV:

在我的脑海中,这是HSV空间中的绿 - 红色调过渡,转换为RGB:

blue = 0.0
if 0<=power<0.5:        #first, green stays at 100%, red raises to 100%
    green = 1.0
    red = 2 * power
if 0.5<=power<=1:       #then red stays at 100%, green decays
    red = 1.0
    green = 1.0 - 2 * (power-0.5)

上例中的红色,绿色,蓝色值是百分比,您可能希望将它们乘以255以获得最常用的0-255范围.

Short Copy'n'Paste答案......

在Java Std上:

int getTrafficlightColor(double value){
    return java.awt.Color.HSBtoRGB((float)value/3f, 1f, 1f);
}

int getTrafficlightColor(double value){
    return android.graphics.Color.HSVToColor(new float[]{(float)value*120f,1f,1f});
}

function percentToRGB(percent) {
    if (percent === 100) {
        percent = 99
    }
    var r, g, b;

    if (percent < 50) {
        // green to yellow
        r = Math.floor(255 * (percent / 50));
        g = 255;

    } else {
        // yellow to red
        r = 255;
        g = Math.floor(255 * ((50 - percent % 50) / 50));
    }
    b = 0;

    return "rgb(" + r + "," + g + "," + b + ")";
}


function render(i) {
    var item = "
" + i + "
";
    $("ul").append(item);
}

function repeat(fn, times) {
    for (var i = 0; i < times; i++) fn(i);
}


repeat(render, 100);

li {
    font-size:8px;
    height:10px;
}