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

Question

我在写一个Java游戏，我想实施你打算怎么努力拍一些功率计。

我需要编写一个函数，0之间的INT - 100，并基于该数是如何高，它将返回一个绿色之间（0上的电源级）和红（100上的功率级）颜色

到的音量控制是如何工作的类似的产品，点击

需要什么操作做就红，绿，和颜色中蓝色分量，以产生绿色和红色之间的颜色是什么？

所以，我可以运行说，getColor(80)它将返回一个橙色的颜色（在R，G它的价值，B）或getColor(10)这将返回一个更绿/黄RGB值。

我知道我需要增加B值的R，G的部件，新的颜色，但我不知道具体是什么上升或下降的颜色从绿红移位。

---

进度：

我结束了使用HSV / HSB颜色空间，因为我喜欢gradiant更好（在中间没有暗棕色）。

我使用的功能是：

public Color getColor(double power)
{
    double H = power * 0.4; // Hue (note 0.4 = Green, see huge chart below)
    double S = 0.9; // Saturation
    double B = 0.9; // Brightness

    return Color.getHSBColor((float)H, (float)S, (float)B);
}

其中，“功率”是在0.0和1.0之间的数字。 0.0将返回一个明亮的红色，1.0将返回一个明亮的绿色。

爪哇色调图表：结果

Answer 1

这应该工作 - 只是线性扩展红色和绿色的值。假设你的最大的红/绿/蓝值255，和n是在范围0 .. 100

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

（由整数数学，帽子到Ferrucio的尖端）

另一种方法将是使用一个 HSV颜色模型和周期从0 degrees（红色）的色调120 degrees（绿色）与任何饱和度和值适合你。这应该给更合意的梯度。

下面是对每个技术的演示 - 顶部梯度使用RGB，底部使用HSV：

Answer 2

我的头顶部，这里是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范围。

Answer 3

短Copy'n'Paste答案...

在的Java标准：

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});
}

请注意：值是表示红色至绿色状态0和1之间的数

。

Answer 4

线性绿色和红色之间的插值的几乎的应该工作，只是在中间会有浑浊的棕色。

最灵活和最漂亮的解决方案是让地方的图像文件具有确切的颜色渐变你想要的。然后在那里查找的像素值。其优点是可以调整的梯度是灵活性的恰到好处的。

如果你仍然想从代码做到这一点，那么它可能是最好的左侧的绿色和黄色之间进行插值，并且在右侧之间的黄色和红色。在RGB空间，绿色是（R = 0，G = 255，B = 0），黄色是（R = 255，G = 255，B = 0），红色是（R = 255，G = 0，B = 0 ） - 这是假定每个颜色成分从0到255

Answer 5

如果你想那么绿 - 黄 - 红表示，如接受的答案建议看看这个。

http://jsfiddle.net/0awncw5u/2/

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 = "<li style='background-color:" + percentToRGB(i) + "'>" + i + "</li>";
    $("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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul></ul>