首页 / 知识

关于c#：条件格式-百分比到颜色的转换

2023-04-13 01:19:00

Conditional formatting — percentage to color conversion

将百分比转换为绿色(100％)到红色(0％)，其中黄色为50％的最简单方法是什么？

我使用的是普通的32位RGB-因此每个组件都是0到255之间的整数。我正在C#中执行此操作，但是我想遇到这样的问题，语言实际上并没有那么重要。

基于Marius和Andy \\'s的答案，我正在使用以下解决方案：

1
2
3

double red = (percent < 50) ? 255 : 256 - (percent - 50) * 5.12;
double green = (percent > 50) ? 255 : percent * 5.12;
var color = Color.FromArgb(255, (byte)red, (byte)green, 0);

完美运行-我唯一需要对Marius解决方案进行的调整是使用256，因为100％时(255-(百分比-50)* 5.12的收益率为-1，由于某种原因，Silverlight(-1， 255，0)->黄色...

我使用JavaScript进行了此功能。它返回的颜色是一个css字符串。它以百分比作为变量，范围从0到100。该算法可以使用任何语言进行：

1
2
3
4
5

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。这将使您在两者之间有一个漂亮的渐变。

假设您将颜色用作状态指示器，并且从用户界面的angular来看，这可能不是一个好主意，因为我们很难看到颜色的细微变化。因此，例如，将值划分为3到7个存储桶，则会在事物发生变化时给您带来更明显的差异，但会以某种精度为代价(无论如何，您很可能无法理解)。

因此，除了所有数学运算之外，最后我建议使用以下颜色的查找表，其中v是输入值：

1
2
3
4
5

#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)，并且您可能需要调整颜色以适合您的目的(有些人不喜欢红色和绿色不是'pure')。

请参阅：

使用HSL颜色(色相，饱和度，亮度)创建外观更好的GUI，以进行一些讨论和
C#源代码示例的RGB和HSL颜色空间转换。

使用伪代码。

在0-50％之间，您的十六进制值为FFxx00，其中：

1
XX = ( Percentage / 50 ) * 255 converted into hex.
从50到100，您的十六进制值为xxFF00，其中：

1
XX = ((100-Percentage) / 50) * 255 converted into hex.

希望并且可以理解的希望。

这是一个很好的干净解决方案，它以三种方式改进了当前接受的答案：

删除了幻数(5.12)，因此使代码更易于遵循。

当百分比为100％时，不会产生给您-1的舍入误差。

允许您自定义所使用的最小和最大RGB值，因此与简单的rgb(255，0，0)-rgb(0，255，0)相比，您可以产生更亮或更暗的范围。

显示的代码是C#，但是使算法适合任何其他语言很简单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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 (i.e. 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);
}

笔记

这是一个简单的表格，显示一些百分比值，以及我们要产生的相应红色和绿色比例：

1
2
3
4
5
6

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)
红色为反数：2x(100-百分比)(但上限为100)

所以我的算法从表中计算出看起来像这样的值...

1
2
3
4
5
6

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，以在每个末端提供较深的红色和绿色。这些可以玩以提供漂亮的色彩。我想在中间加一点橙色，但我必须继续正确的工作，嘘。

1
2
3
4
5
6
7
8

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：

1
2
3
4
5
6
7
8
9

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

我对ActionScript 3的解决方案：

1
2
3
4
5
6
7

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;

我使用以下Python例程在颜色之间进行混合：

1
2
3
4
5
6
7
8
9
10
11
12
13

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])

例如：

1 2	>>> blendRGBHex("FF8080","80FF80", 0.5) "BFBF80"

另一个例程将其包装起来以在"条件格式设置"的数值之间很好地融合：

1
2
3
4
5
6
7
8
9

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

因此，在乔纳斯的情况下：

1 2	>>> colourRange(0,"FF0000", 50,"FFFF00", 100,"00FF00", 25) "FF7F00"

因为它是R-G-B，所以颜色从-1(白色)到-16777216(黑色)的整数值。在中间的某个地方有红色，绿色和黄色。黄色实际上是-256，而红色是-65536，绿色是-16744448。因此，黄色实际上不在RGB表示法的红色和绿色之间。我知道就波长而言，绿色在光谱的一侧，而红色在光谱的另一侧，但是我从未见过在计算机中使用这种符号，因为光谱并不代表所有可见的颜色。

转换条件红色方法