algorithm：如何使用RGB值通过黄色从红色变为绿色？

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

我希望颜色从一个到另一个逐渐消失，例如75，颜色是半红，半黄等等。

如何编程RGB值来反映这种衰落？ 谢谢。

Answer 1

颜色的RGB值：

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

在红色和黄色之间，同样将空间添加到绿色通道，直到达到255.在黄色和绿色之间，同样将您的减法与红色通道隔开。

Answer 2

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

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

说明：代替[0-255]范围，我们重点关注颜色分量的[0.0-1.0]范围：

• 绿色= 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; 在第二个我们减less绿色的组成部分，留下另外2个。 我们可以利用这个事实，即任何高于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]），你需要select一个合适的因子而不是2

Answer 3

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

 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 4

我不知道C＃，所以这个答案只是一个build议的方法。 令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) 。 然后减less红色变绿： (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 5

简化的扩展方法;

 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 6

在我用更现实的色彩进行了一段时间的试验之后，这里是我的公式：

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

• 您没有背景（即Color.White）为0（或NULL），或者当最小=最大。
• 对于所有正值，在RGB（240,255,240）和RGB（0,155,0）之间得到均匀分布的绿色。
• 对于所有负值，RGB（255,240,240）和RGB（230,0,0）之间均匀分布红色。

Answer 7

您需要使用HSB或HSV颜色表示 ，并使用H（“色相”）值进行播放。 看到这个其他SO问题RGB和HSB / HSV之间的转换： 如何将RGB颜色更改为单纯疱疹病毒？

Answer 8

看看LinearGradientBrush 。 它应该是一个完整的实现你正在寻找什么。

Answer 9

你只需要用整型参数创build一个函数

• input100将返回RGB（100，0，0）
• input50将返回RGB（50，50，0）
• input0将返回RGB（0，100，0）
• input99将返回RGB（99，1，0）
• input98将返回RGB（98,2,0）
• input2将返回RGB（2，98，0）

• input1将返回RGB（1，99，0）

      私人颜色推子（int v）{
         返回Color.FromArgb（v，100-v，0）; 
       }
  

Answer 10

今天我需要类似的东西。 input百分比从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); } 

Answer 11

我将1400 MHz和3500 MHz之间的CPU速度值映射到rgb（）值，使用此function从绿色 – >黄色 – >红色

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