条件格式 – 百分比到颜色转换
将百分比转换为从绿色（100％）到红色（0％）的颜色的最简单方法是什么，黄色为50％？
我使用的是普通的32位RGB – 因此每个组件都是0到255之间的整数。我在C＃中这样做，但我想这样的问题语言并不重要。
基于Marius和Andy的答案，我使用以下解决方案：
double red = (percent 50) ? 255 : percent * 5.12; var color = Color.FromArgb(255, (byte)red, (byte)green, 0); 完美的工作 – 只有我必须从Marius解决方案做的调整是使用256，因为（255 – （百分比 – 50）* 5.12产生-1，当100％时，由于某种原因在Silverlight中导致黄色（-1,255,0） ） – >黄…
我在JavaScript中创建了这个函数。 它返回的颜色是一个css字符串。 它将百分比作为变量，范围从0到100.算法可以用任何语言制作：
function setColor(p){ var red = p<50 ? 255 : Math.round(256 - (p-50)*5.12); var green = p>50 ? 255 : Math.round((p)*5.12); return "rgb(" + red + "," + green + ",0)"; }
您可能想要做的是在HSV或HSL颜色空间中为0％到100％分配一些点。 从那里你可以插入颜色（黄色恰好在红色和绿色之间:) 并将它们转换为RGB 。 那会让你在两者之间看起来很漂亮。
假设您将颜色用作状态指示器，并且从用户界面的角度来看，这可能不是一个好主意，因为我们看到颜色的微小变化非常糟糕。 因此，将值划分为三到七个桶会在事情发生变化时给你带来更明显的差异，代价是某种精确度（你很可能无论如何也无法理解）。
所以，除了所有数学，最后我建议使用以下颜色的查找表，其中v是输入值：
#e7241d for v <= 12% #ef832c for v > 12% and v <= 36% #fffd46 for v > 36% and v <= 60% #9cfa40 for v > 60% and v <= 84% #60f83d for v > 84%
这些已经从HSL值（0.0,1.0,1.0），（30.0,1.0,1.0），（60.0,1.0,1.0），（90.0,1.0,1.0），（120.0,1.0,1.0）非常天真地转换，并且您可能需要稍微调整颜色以适合您的目的（有些人不喜欢红色和绿色不是’纯’）。
请参阅：
- 使用HSL颜色（色调，饱和度，亮度）为一些讨论和创建更好看的GUI
- 样本C＃源代码的RGB和HSL颜色空间转换 。
在伪代码中。
-
从0-50％，你的hex值将是FFxx00，其中：
XX = ( Percentage / 50 ) * 255 converted into hex. -
从50到100，你的hex值将是xxFF00，其中：
XX = ((100-Percentage) / 50) * 255 converted into hex.
希望有所帮助，也是可以理解的。
这是一个很好的干净解决方案，它以三种方式改进了目前接受的答案：
- 删除幻数（5.12），从而使代码更容易理解。
- 当百分比为100％时，不会产生给出-1的舍入误差。
- 允许您自定义所使用的最小和最大RGB值，因此您可以产生比简单rgb（255,0,0） – rgb（0,255,0）更亮或更暗的范围。
显示的代码是C＃，但将算法适用于任何其他语言都是微不足道的。
private const int RGB_MAX = 255; // Reduce this for a darker range private const int RGB_MIN = 0; // Increase this for a lighter range private Color getColorFromPercentage(int percentage) { // Work out the percentage of red and green to use (ie a percentage // of the range from RGB_MIN to RGB_MAX) var redPercent = Math.Min(200 - (percentage * 2), 100) / 100f; var greenPercent = Math.Min(percentage * 2, 100) / 100f; // Now convert those percentages to actual RGB values in the range // RGB_MIN - RGB_MAX var red = RGB_MIN + ((RGB_MAX - RGB_MIN) * redPercent); var green = RGB_MIN + ((RGB_MAX - RGB_MIN) * greenPercent); return Color.FromArgb(red, green, RGB_MIN); }
笔记
这是一个简单的表格，显示了一些百分比值，以及我们想要生成的相应红色和绿色比例：
VALUE GREEN RED RESULTING COLOUR 100% 100% 0% green 75% 100% 50% yellowy green 50% 100% 100% yellow 25% 50% 100% orange 0% 0% 100% red
希望你能清楚地看到
- 绿色值是百分比值的2倍（但上限为100）
- 红色是相反的：2倍（100 – 百分比）（但上限为100）
所以我的算法从表格中计算出这样的值……
VALUE GREEN RED 100% 200% 0% 75% 150% 50% 50% 100% 100% 25% 50% 150% 0% 0% 200%
…然后使用Math.Min()将它们限制为100％。
我根据javascript代码编写了这个python函数。 它需要一个百分比作为小数。 此外，我还设定了值，使颜色在百分比范围内保持更长时间。 我还将颜色范围从255缩小到180，使每端的颜色变为深红色和绿色。 这些可以玩，以提供漂亮的颜色。 我想在中间添加一些橙色，但我必须继续正确的工作，嘘。
def getBarColour(value): red = int( (1 - (value*value) ) * 180 ) green = int( (value * value )* 180 ) red = "%02X" % red green = "%02X" % green return '#' + red + green +'00'
由于黄色是红色和绿色的混合，你可以从#F00开始，然后向上滑动绿色直到你击中#FF0 ，然后向下滑动红色到#0F0 ：
for (int i = 0; i < 100; i++) { var red = i < 50 ? 255 : 255 - (256.0 / 100 * ((i - 50) * 2)); var green = i < 50 ? 256.0 / 100 * (i * 2) : 255; var col = Color.FromArgb((int) red, (int) green, 0); }
我使用以下Python例程来混合颜色：
def blendRGBHex(hex1, hex2, fraction): return RGBDecToHex(blendRGB(RGBHexToDec(hex1), RGBHexToDec(hex2), fraction)) def blendRGB(dec1, dec2, fraction): return [int(v1 + (v2-v1)*fraction) for (v1, v2) in zip(dec1, dec2)] def RGBHexToDec(hex): return [int(hex[n:n+2],16) for n in range(0,len(hex),2)] def RGBDecToHex(dec): return "".join(["%02x"%d for d in dec])
例如：
>>> blendRGBHex("FF8080", "80FF80", 0.5) "BFBF80"
另一个例程包装它在“条件格式”的数值之间很好地混合：
def colourRange(minV, minC, avgV, avgC, maxV, maxC, v): if v < minV: return minC if v > maxV: return maxC if v < avgV: return blendRGBHex(minC, avgC, (v - minV)/(avgV-minV)) elif v > avgV: return blendRGBHex(avgC, maxC, (v - avgV)/(maxV-avgV)) else: return avgC
所以，在乔纳斯的案例中：
>>> colourRange(0, "FF0000", 50, "FFFF00", 100, "00FF00", 25) "FF7F00"
我的ActionScript 3解决方案：
var red:Number = (percentage <= 50) ? 255 : 256 - (percentage - 50) * 5.12; var green:Number = (percentage >= 50) ? 255 : percentage * 5.12; var redHex:Number = Math.round(red) * 0x10000; var greenHex:Number = Math.round(green) * 0x100; var colorToReturn:uint = redHex + greenHex;
因为它是RGB，所以颜色从-1（白色）的整数值到黑色的-16777216。 在中间的某个地方有红绿色和黄色。 黄色实际为-256，红色为-65536，绿色为-16744448。 因此RGB表示法中的黄色实际上不在红色和绿色之间。 我知道就波长而言，绿色位于一侧，红色位于光谱的另一侧，但我从未见过这种用于计算机的符号，因为光谱并不代表所有可见的颜色。