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

时间：2008-12-04 10:56:25

标签： language-agnostic graphics colors interpolation

我正在写一个Java游戏，我想要实现一个功率计，以确定你有多努力拍摄。

我需要编写一个在0到100之间取一个int的函数，并根据该数字的高度，它将返回绿色（功率刻度为0）和红色（功率刻度为100）之间的颜色

与音量控制的工作方式类似：
volume control

我需要对颜色的红色，绿色和蓝色组件进行哪些操作才能生成绿色和红色之间的颜色？

所以，我可以说，getColor(80)并且它将返回橙色（在R，G，B中的值）或getColor(10)，这将返回更多的绿色/黄色RGB值。 / p>

我知道我需要为新颜色增加R，G，B值的组成部分，但我不知道颜色从绿色 - 红色偏移时会出现什么样的上升或下降。

进度：

我最终使用了HSV / HSB色彩空间因为我更喜欢渐变色（中间没有深褐色）。

我使用的功能是：

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

其中“power”是介于0.0和1.0之间的数字。 0.0将返回亮红色，1.0将返回亮绿色。

Java Hue Chart：
Java Hue Chart

19 个答案:

答案 0 :(得分：198)

这应该有效 - 只需线性缩放红色和绿色值。假设您的最大红/绿/蓝值为255，而n的范围为0 .. 100 

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

（修改为整数数学，给Ferrucio一角）

另一种方法是使用HSV colour model，并将色调从0 degrees（红色）循环到120 degrees（绿色），并使用适合您的饱和度和值。这应该会给出更令人愉悦的渐变。

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

http://i38.tinypic.com/29o0q4k.jpg

答案 1 :(得分：32)

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

答案 2 :(得分：12)

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

在Java Std上： 

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

在Android上： 

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

注意：value是介于0和1之间的数字，表示红色到绿色的状态。

答案 3 :(得分：8)

绿色和红色几乎之间的线性插值应该有效，除了在中间会有泥褐色。

最灵活，最佳的解决方案是将图像文件放在某个具有您想要的精确颜色渐变的位置。然后在那里查找像素值。这具有灵活性，您可以将渐变调整为恰到好处。

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

答案 4 :(得分：8)

如果您想要一个绿色 - 黄色 - 红色表示，如接受的答案建议那么请看一下。

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>

答案 5 :(得分：4)

我做了一个小函数，它给出了一个百分比值的rgb整数值：

private int getGreenToRedGradientByValue(int currentValue, int maxValue)
{
    int r = ( (255 * currentValue) / maxValue );
    int g = ( 255 * (maxValue-currentValue) ) / maxValue;
    int b = 0;
    return ((r&0x0ff)<<16)|((g&0x0ff)<<8)|(b&0x0ff);
}

因此，如果您的currentValue为50且maxValue为100，则此函数将返回您需要的颜色，因此如果您使用百分比值循环此函数，则颜色值将从绿色变为红色。对不起的解释很抱歉

答案 6 :(得分：3)

接受的答案甚至没有真正回答这个问题......

C ++

这是我的引擎中的一个简单的C ++代码段，可以在三种任意颜色之间进行线性和高效的插值：

const MATH::FLOAT4 color1(0.0f, 1.0f, 0.0f, 1.0f);  // Green
const MATH::FLOAT4 color2(1.0f, 1.0f, 0.0f, 1.0f);  // Yellow
const MATH::FLOAT4 color3(1.0f, 0.0f, 0.0f, 1.0f);  // Red

MATH::FLOAT4 get_interpolated_color(float interpolation_factor)
{
    const float factor_color1 = std::max(interpolation_factor - 0.5f, 0.0f);
    const float factor_color2 = 0.5f - fabs(0.5f - interpolation_factor);
    const float factor_color3 = std::max(0.5f - interpolation_factor, 0.0f);

    MATH::FLOAT4 color;

    color.x = (color1.x * factor_color1 +
               color2.x * factor_color2 +
               color3.x * factor_color3) * 2.0f;

    color.y = (color1.y * factor_color1 +
               color2.y * factor_color2 +
               color3.y * factor_color3) * 2.0f;

    color.z = (color1.z * factor_color1 +
               color2.z * factor_color2 +
               color3.z * factor_color3) * 2.0f;

    color.w = 1.0f;

    return(color);
}

假设interpolation_factor在0.0 ... 1.0范围内 假设颜色在0.0 ... 1.0的范围内（例如对于OpenGL）。

C＃

这是用C＃编写的相同函数：

private readonly Color mColor1 = Color.FromArgb(255, 0, 255, 0);
private readonly Color mColor2 = Color.FromArgb(255, 255, 255, 0);
private readonly Color mColor3 = Color.FromArgb(255, 255, 0, 0);

private Color GetInterpolatedColor(double interpolationFactor)
{
    double interpolationFactor1 = Math.Max(interpolationFactor - 0.5, 0.0);
    double interpolationFactor2 = 0.5 - Math.Abs(0.5 - interpolationFactor);
    double interpolationFactor3 = Math.Max(0.5 - interpolationFactor, 0.0);

    return (Color.FromArgb(255,
                (byte)((mColor1.R * interpolationFactor1 +
                        mColor2.R * interpolationFactor2 +
                        mColor3.R * interpolationFactor3) * 2.0),

                (byte)((mColor1.G * interpolationFactor1 +
                        mColor2.G * interpolationFactor2 +
                        mColor3.G * interpolationFactor3) * 2.0),

                (byte)((mColor1.B * interpolationFactor1 +
                        mColor2.B * interpolationFactor2 +
                        mColor3.B * interpolationFactor3) * 2.0)));
}

假设interpolationFactor在0.0 ... 1.0范围内 假设颜色在0 ... 255范围内。

答案 7 :(得分：2)

您需要linearly interpolate（LERP）颜色组件。如果起始值 v0 ，结束值 v1 和所需的比率（标准化的浮点数介于0.0和1.0之间），通常会这样做）：

v = v0 + ratio * (v1 - v0)

当比率为0.0时给出v0，当比率为1.0时给出v1，在其他情况下给出一切。

您可以在RGB组件上执行此操作，也可以使用其他颜色方案（如HSV或HLS）执行此操作。后两者在视觉上更令人愉悦，因为它们可以处理色调和亮度成分，从而更好地映射到我们的色彩感知。

答案 8 :(得分：2)

我想说你想要HSV空间中的一个线段（中心有一个稍微过亮的黄色）和RGB空间中的一个线段（中间有一个丑陋的棕色）之间的东西）。我会使用这个，power = 0会给出绿色，power = 50会给出略微暗淡的黄色，power = 100会给出红色。

blue = 0;
green = 255 * sqrt( cos ( power * PI / 200 ));
red = 255 * sqrt( sin ( power * PI / 200 ));

答案 9 :(得分：1)

如果你在CSS（最低版本2.1）中需要这种渐变（实际上是反转的），你也可以使用HSL。

假设您在AngularJs模板中，并且值是从0到1的数字，并且您想要为元素设置样式（背景或文本颜色）...... 

hsl({{ value * 120}}, 50%, 35%)

第一个值：度（0红色，120绿色） 第二个值：饱和度（50％为中性） 第三个值：亮度（50％中性）

一篇不错的文章here

维基百科上的理论here

答案 10 :(得分：1)

<强>的JavaScript

我正在使用带有条形图的Google可视化，并希望根据百分比将条形图设置为绿色到红色。事实证明这是我发现并且完美运作的最干净的解决方案。

function getGreenToRed(percent){
    r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
    g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
    return 'rgb('+r+','+g+',0)';
}

确保50％的百分比为50％，不 0.50。

答案 11 :(得分：1)

以下是Simucal解决方案的Objective-C版本：

- (UIColor*) colorForCurrentLevel:(float)level
{
    double hue = level * 0.4; // Hue (note 0.4 = Green)
    double saturation = 0.9; // Saturation
    double brightness = 0.9; // Brightness

    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1.0];
}

其中级别是0.0和1.0之间的值 希望这有助于某人！

答案 12 :(得分：1)

以下是Swift和HSV规模的复制和粘贴解决方案：

UIColor初始化程序接受[0,1]中的色调，饱和度和亮度，因此对于来自[0,1]的给定值，我们有：

let hue:        CGFloat = value / 3
let saturation: CGFloat = 1 // Or choose any
let brightness: CGFloat = 1 // Or choose any
let alpha:      CGFloat = 1 // Or choose any

let color = UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: alpha)

答案 13 :(得分：1)

在Python 2.7中：

import colorsys

def get_rgb_from_hue_spectrum(percent, start_hue, end_hue):
    # spectrum is red (0.0), orange, yellow, green, blue, indigo, violet (0.9)
    hue = percent * (end_hue - start_hue) + start_hue
    lightness = 0.5
    saturation = 1
    r, g, b = colorsys.hls_to_rgb(hue, lightness, saturation)
    return r * 255, g * 255, b * 255

# from green to red:
get_rgb_from_hue_spectrum(percent, 0.3, 0.0)

# or red to green:
get_rgb_from_hue_spectrum(percent, 0.0, 0.3)

百分比当然是value / max_value。或者，如果您的比例不是从0开始，那么(value - min_value) / (max_value - min_value)。

答案 14 :(得分：1)

import java.awt.Color;

public class ColorUtils {

    public static Color interpolate(Color start, Color end, float p) {
        float[] startHSB = Color.RGBtoHSB(start.getRed(), start.getGreen(), start.getBlue(), null);
        float[] endHSB = Color.RGBtoHSB(end.getRed(), end.getGreen(), end.getBlue(), null);

        float brightness = (startHSB[2] + endHSB[2]) / 2;
        float saturation = (startHSB[1] + endHSB[1]) / 2;

        float hueMax = 0;
        float hueMin = 0;
        if (startHSB[0] > endHSB[0]) {
            hueMax = startHSB[0];
            hueMin = endHSB[0];
        } else {
            hueMin = startHSB[0];
            hueMax = endHSB[0];
        }

        float hue = ((hueMax - hueMin) * p) + hueMin;

        return Color.getHSBColor(hue, saturation, brightness);
    }
}

答案 15 :(得分：0)

自包含示例

<html>
<head>
<script>
//--------------------------------------------------------------------------
function gradient(left, mid, right)
{
    var obj = {}

    var lt50 = {"r":(mid.r-left.r)/50.0,
                "g":(mid.g-left.g)/50.0,
                "b":(mid.b-left.b)/50.0}
    var gt50 = {"r":(right.r-mid.r)/50.0,
                "g":(right.g-mid.g)/50.0,
                "b":(right.b-mid.b)/50.0}

    obj.getColor = function(percent) {
        if (percent == 50.0) {
            return mid;
        }
        if (percent < 50.0) {
            return "rgb("+Math.floor(left.r+lt50.r*percent+0.5)+","+
                          Math.floor(left.g+lt50.g*percent+0.5)+","+
                          Math.floor(left.b+lt50.b*percent+0.5)+")";
        }
        var p2 = percent-50.0;
        return "rgb("+Math.floor(mid.r+gt50.r*p2+0.5)+","+
                      Math.floor(mid.g+gt50.g*p2+0.5)+","+
                      Math.floor(mid.b+gt50.b*p2+0.5)+")";
    }

    return obj;
}

//--------------------------------------------------------------------------
var g_gradient = gradient( {"r":255, "g":20, "b":20},  // Left is red
                           {"r":255, "g":255, "b":20}, // Middle is yellow
                           {"r":20, "g":255, "b":20} ); // right is green

//--------------------------------------------------------------------------
function updateColor()
{
    var percent = document.getElementById('idtext').value.length;
    var oscore = document.getElementById('idscore');

    if (percent > 100.0) {
        percent = 100.0;
    }
    if (percent < 0.0) {
        percent = 0.0;
    }
    var col = g_gradient.getColor(percent)
    oscore.style['background-color'] = col;
    oscore.innerHTML = percent + '%';
}

</script>
</head>
<body onLoad="updateColor()">
<input size='100' placeholder='type text here' id='idtext' type="text" oninput="updateColor()" />
<br />
<br />
<div id='idscore' style='text-align:center; width:200px; border-style:solid;
     border-color:black; border-width:1px; height:20px;'> </div>
</body>
</html>

答案 16 :(得分：0)

我已将已接受的答案分为（0,100）范围的第一和第二半，并用100代替最高级别，以便范围可以变为动态。结果与HSV模型完全一样，但仍然使用RGB。关键是让中间的（255,255,0）代表黄色。我已经在接受的答案和另一个VBA代码中结合了这个想法，因此在VBA中实现它并在Excel中使用。我希望逻辑有用，可以在其他语言/应用程序中使用。

Sub UpdateConditionalFormatting(rng As Range)
    Dim cell As Range
    Dim max As Integer

    max = WorksheetFunction.max(rng)

    For Each cell In rng.Cells

    If cell.Value >= 0 And cell.Value < max / 2 Then
        cell.Interior.Color = RGB(255 * cell.Value / (max / 2), 255, 0)
    ElseIf cell.Value >= max / 2 And cell.Value <= max Then
        cell.Interior.Color = RGB(255, 255 * ((max) - cell.Value) / (max / 2), 0)
    End If

    Next cell
End Sub

干杯， 帕夫林

答案 17 :(得分：0)

这将从红色变为黄色，然后变为绿色 值从0到100

不等 
-(UIColor*) redToGreenColorWithPosition:(int) value {

    double R, G;
    if (value > 50) {
        R = (255 * (100 - value)/ 50) ;
        G = 255;
    }else {
        R = 255;
        G = (255 * (value*2)) / 100;
    }

    return [UIColor colorWithRed:R/255.0f green:G/255.0f blue:0.0f alpha:1.0f];
}

答案 18 :(得分：0)

VB 

var fullUrl = window.location.href;
var titlePhoto = fullUrl.split("title=")[1];
console.log(titlePhoto)
相关问题
最新问题