算法：如何使用 RGB 值从红色通过黄色淡入绿色？

Question

我想显示一种基于 0 到 100 之间的值的颜色。一端 (100) 是纯红色，另一端 (0) 是纯绿色。在中间（50），我希望它是黄色的。

我希望颜色逐渐从一种颜色褪到另一种颜色，例如在 75 时，颜色一半是红色，一半是黄色，等等。

如何对 RGB 值进行编程以反映这种褪色？谢谢。

Answer 1

我将 1400 MHz 和 3500 MHz 之间的 CPU 速度值映射到 rgb() 值，以从 green ->黄色->红色与此功能

function green_yellow_red(core_MHz, core_id){
  var core_color = ~~core_MHz.map(1400, 3500, 0, 510)

  if(core_color < 255){
    $('#cpu_core_'+core_id).css('background', 'rgb('+core_color+',255 , 0)')
  }else{
    core_color-=255
    $('#cpu_core_'+core_id).css('background', 'rgb(255 ,'+ (255-core_color) +', 0)')
  }
}

Answer 2

更多的是相同的。只是 Delphi Pascal 编码并简化+锁定到信号量颜色（红/黄/绿）。

rectangle1.Fill.Color:=DefineColorSemaphore(newcolor);

function TForm1.DefineColorSemaphore(valperc:integer):TAlphaColor;
var
   vcol: TAlphaColorRec;
begin
  vcol.B := 0;    // blue:  always 0
  vcol.A := 255;  // alpha: 255=no
  if (valperc < 50) then
    begin
       // starts @ RGB=255,0,0 and increases G 0->255
       vcol.R := 255;
       vcol.G := trunc(255*valperc/50);
    end
    else
    begin
       // starts @ RGB=255,255,0 and decreases R 255->0
       vcol.R := 255-trunc(255* (valperc - 50)/50);
       vcol.G := 255;
    end;
  result:= TAlphaColor(vcol);
end;

Answer 3

最近我计划使用 Javascript 做同样的事情。我已经遵循了两个步骤。

1. 首先在 0-1 范围内缩放值（scaledValue = (value - min) / (max - min)）
2. ，如果该值小于或等于 0.5，则增加红色通道的值，如果该值小于或等于 0.5，则减少绿色通道的值大于 0.5

这是我用于此目的的代码。

var blue = 0.0, red = 0.0, green = 0.0;

if(scaledValue <= 0.5)
{
    red = (scaledValue * 2) * 255.0;
    green = 255.0;
    blue = 0;
}else
{
    red = 255.0;
    green = 255.0 + 255.0 - ((scaledValue  * 2)* 255);
    blue = 0;
}

用于在 C++ 中显示此作品的示例代码

该解决方案的灵感来自 @jterrace 答案。

Answer 4

上用红黄绿渐变填充 OwnerDraw 控件

int cx = lpDis->rcItem.right - lpDis->rcItem.left;

for (int x = 0; x < cx; x++)
{
    COLORREF cr;

    double d = 255 * 2 * (double)x/(double)cx;

    cr = x <= cx/2 ?    RGB(255,     d,   0) :
                        RGB(255 - d, 255, 0);

    HPEN hPen = CreatePen(PS_SOLID, 1, cr);
    HPEN hOldPen = (HPEN)SelectObject(lpDis->hDC, hPen);
    MoveToEx(lpDis->hDC, x, lpDis->rcItem.top, NULL);
    LineTo(lpDis->hDC, x, lpDis->rcItem.bottom);
    SelectObject(lpDis->hDC, hOldPen);
    DeleteObject(hPen);
}

// 在 WM_DRAWITEM Illustration

Answer 5

如果你使用 python 那么这可能会有所帮助......

def rgb(p):# <-- percentage as parameter
    #Starting with color red
    d = [255,0,0]
    #formula for finding green value by percentage
    d[1] = int((510*p)/100)
    print(d[1])
    #if green value more than 255
    #set green value 255
    #reduce the red value from remaining green value
    if d[1]>255:
        d[0] -= d[1]-255
        d[1] = 255
        
    return d

print(rgb(0))

Answer 6

在Javascript中生成颜色相对于速度。

最大速度 = 红色

最小速度 (0) = 绿色

var g = speed / speedMax * 100
        var color = [0, 255, 0];
        color[0] = (510 * g) / 100
        if(color[0] > 255) {
          color[1] = color[1] - (color[0] - 255)
          color[0] = 255
        }

代码基于 AssaultOPS 版本

Answer 7

我有同样的需求，我刚刚解决了这个问题：

myColor = new Color(2.0f * x, 2.0f * (1 - x), 0);

解释：
让我们关注颜色分量的 [0.0-1.0] 范围，而不是 [0-255] 范围：

• 绿色 = 0.0, 1.0, 0.0
• 黄色 = 1.0, 1.0, 0.0
• 红色 = 1.0, 0.0, 0.0

如果您只是缩放绿色分量从 0.0（一端）到 1.0（另一端），并对红色分量执行相同的操作（但向后看），你会得到丑陋且不均匀的颜色分布。

为了让它看起来漂亮，我们可以写很多代码，或者我们可以更聪明。

如果仔细观察单个分量，您会发现我们可以将范围分成两个相等的部分：在第一个分量中，我们将红色分量从 0.0 增加到 1.0，将绿色分量保留为 1.0，将蓝色分量保留为 0.0；在第二个中，我们减少绿色分量，使其他两个保持原样。我们可以利用任何高于 1.0 的值都将被读取为 1.0 的事实，通过最大化我们的值来简化代码。假设您的 x 值从 0.00 (0%) 到 1.00 (100%)，您可以将其乘以 2，使其超过颜色分量 1.0 的限制。现在，您的组件从 0.0 变为 2.0（红色），从 2.0 变为 0.0（绿色）。让它们被剪裁到 [0.0-1.0] 范围，然后就可以了。

如果你的 x 在另一个范围内移动（比如 [0-100]），你需要选择一个合适的因子而不是 2

Answer 8

颜色的 RGB 值：

• 红色 255, 0, 0
• 黄色 255, 255, 0
• 绿色 0, 255, 0

在红色和黄色之间，等间隔添加到绿色通道，直到达到 255。在黄色和绿色之间，等间隔你从红色通道中减去的部分。

Answer 9

这是颜色分量的非常简单的线性插值。它可能会满足您的需求。

public Color GetBlendedColor(int percentage)
{
    if (percentage < 50)
        return Interpolate(Color.Red, Color.Yellow, percentage / 50.0);
    return Interpolate(Color.Yellow, Color.Lime, (percentage - 50) / 50.0);
}

private Color Interpolate(Color color1, Color color2, double fraction)
{
    double r = Interpolate(color1.R, color2.R, fraction);
    double g = Interpolate(color1.G, color2.G, fraction);
    double b = Interpolate(color1.B, color2.B, fraction);
    return Color.FromArgb((int)Math.Round(r), (int)Math.Round(g), (int)Math.Round(b));
}

private double Interpolate(double d1, double d2, double fraction)
{
    return d1 + (d2 - d1) * fraction;
}

Answer 10

我不懂 C#，所以这个答案只是建议的方法。令x 表示范围从0 到100 的int。像这样的东西应该可以工作：

red   = (x > 50 ? 1-2*(x-50)/100.0 : 1.0);
green = (x > 50 ? 1.0 : 2*x/100.0);
blue  = 0.0

想法是从红色开始：(1.0,0.0,0.0)。然后增加绿色以获得黄色：(1.0,1.0,0.0)。然后减少红色变为绿色：(0.0,1.0,0.0)。

编辑：这是 C# 中的代码

static Color GetColorFromRedYellowGreenGradient(double percentage)
{
    var red = (percentage > 50 ? 1 - 2 * (percentage - 50) / 100.0 : 1.0) * 255;
    var green = (percentage > 50 ? 1.0 : 2 * percentage / 100.0) * 255;
    var blue = 0.0;
    Color result = Color.FromArgb((int)red, (int)green, (int)blue);
    return result;
}

Answer 11

简化的扩展方法；

public static Color Interpolate(this Color source, Color target, double percent)
{
    var r = (byte)(source.R + (target.R - source.R) * percent);
    var g = (byte)(source.G + (target.G - source.G) * percent);
    var b = (byte)(source.B + (target.B - source.B) * percent);

    return Color.FromArgb(255, r, g, b);
}

用法;

var low = 33.0;
var high = 100.0;
var color = Color.Red.Interpolate(Color.Green, low / high);

Answer 12

在我尝试了一段时间更真实的颜色之后，这是我的公式：

public Color GetColorOf(double value, double minValue, double maxValue)
{
    if (value == 0 || minValue == maxValue) return Color.White;

    var g = (int)(240 * value / maxValue);
    var r = (int)(240 * value / minValue);

    return (value > 0
        ? Color.FromArgb(240 - g, 255 - (int)(g * ((255 - 155) / 240.0)), 240 - g)
        : Color.FromArgb(255 - (int)(r * ((255 - 230) / 240.0)), 240 - r, 240 - r));
}

• 对于 0（或 NULL），或者当 min = max 时，您不会得到背景（即 Color.White）。
• 对于所有正值，您将获得在 RGB(240, 255, 240) 和 RGB(0, 155, 0) 之间均匀分布的绿色。
• 对于所有负值，您将获得在 RGB(255, 240, 240) 和 RGB(230, 0, 0) 之间均匀分布的红色。

Answer 13

您需要使用 HSB 或 HSV 颜色表示，并使用 H（“Hue “） 价值。请参阅有关 RGB 和 HSB/HSV 之间转换的其他 SO 问题：如何更改 RGB颜色到 HSV？

Answer 14

此方法（在 C# 中，但可以轻松翻译为其他语言）将采用百分比和颜色列表，并根据百分比返回渐变上的颜色。当您传递颜色时，它们需要按从 0 值到 100 值的顺序排列（因此您需要按绿色、黄色、红色的顺序传递）。如果您发现中间需要不同或更多颜色，只需按照您希望它们出现的顺序将它们添加到您传递的颜色列表中即可。

public Color ColorBasedOnPercent(decimal percent, params Color[] colors)
    {
        if (colors.Length == 0)
        {
            //I am using Transparent as my default color if nothing was passed
            return Color.Transparent;
        }
        if (percent > 1)
        {
            percent = percent / 100;
        }

        //find the two colors within your list of colors that the percent should fall between
        var colorRangeIndex = (colors.Length - 1) * percent;
        var minColorIndex = (int)Math.Truncate(colorRangeIndex);
        var maxColorIndex = minColorIndex + 1;
        var minColor = colors[minColorIndex];

        if (maxColorIndex < colors.Length)
        {
            var maxColor = colors[maxColorIndex];

            //get the differences between all the color values for the two colors you are fading between
            var aScale = maxColor.A - minColor.A;
            var redScale = maxColor.R - minColor.R;
            var greenScale = maxColor.G - minColor.G;
            var blueScale = maxColor.B - minColor.B;

            //the decimal distance of how "far" this color should be from the minColor in the range
            var gradientPct = colorRangeIndex - minColorIndex;

            //for each piece of the color (ARGB), add a percentage(gradientPct) of the distance between the two colors
            int getRGB(int originalRGB, int scale) => (int)Math.Round(originalRGB + (scale * gradientPct));

            return Color.FromArgb(getRGB(minColor.A, aScale), getRGB(minColor.R, redScale), getRGB(minColor.G, greenScale), getRGB(minColor.B, blueScale));
        }
        return minColor;
    }

Answer 15

看一下 LinearGradientBrush 。它应该是您正在寻找的内容的完整实现。

Answer 16

我为 UIColor 编写了一个 Swift 4 扩展，它将百分比 (0-100) 转换为从红色到绿色的 UIColor。

我目前正在将它用作分析应用程序中的进度条。这是一个例子：

let myNewColor = UIColor().greenRedProgress(percent: Int))

这是扩展：

extension UIColor{

func greenRedProgress(percent: Int) -> UIColor{
    let modVal = CGFloat((Double(percent).truncatingRemainder(dividingBy: 50) / 50) * 255)
    if percent <= 0{
        return UIColor(red: 1.0, green: 0, blue: 0, alpha: 1)
    }else if percent >= 100{
        return UIColor(red: 0, green: 1.0, blue: 0, alpha: 1)
    }else{
        switch percent{
            case 1..<50: return UIColor(red: 1.0, green: (modVal/255), blue: 0, alpha: 1)
            case 51..<100: return UIColor(red: (255 - modVal)/255, green: 1.0, blue: 0, alpha: 1)
            case 50: return UIColor(red: 1.0, green: 1.0, blue: 0, alpha: 1)
            default: return UIColor(red: 0, green: 1.0, blue: 0, alpha: 1)
        }
    }
}}

Answer 17

你只需要创建一个带有整数参数的函数

• input 100 将返回 RGB (100, 0, 0)
• input 50 将返回 RGB (50, 50, 0)
• input 0 将返回 RGB (0, 100, 0)
• input 99 将返回RGB (99, 1, 0)
• 输入 98 将返回 RGB (98, 2, 0)
• 输入 2 将返回 RGB (2, 98, 0)

• 输入 1 将返回 RGB (1, 99, 0)

   私有颜色推子(int v){
         返回 Color.FromArgb(v, 100-v, 0); 
      }
  

Answer 18

我今天需要类似的东西。输入为从 0.0 到 1.0 的百分比，输出为红色到绿色。基于jterrace的答案实现：

Color percentToColor(float percent)
{
    if (percent<0 || percent>1) { return Color.Black; }

    int r, g;
    if (percent<0.5)
    {
        r=255;
        g = (int)(255*percent/0.5);  //closer to 0.5, closer to yellow (255,255,0)
    }
    else
    {
        g=255;
        r = 255 - (int)(255*(percent-0.5)/0.5); //closer to 1.0, closer to green (0,255,0)
    }
    return Color.FromArgb(r, g, 0);
}