Gabc Gabc - 1 year ago 74
HTML Question

Changing colour in ASP.Net web app table

Not very familiar with this but I will give it a shot, So I have a ASP.Net mvc web app in Visual Studio, and in one of my view, View Details I have a tale which presents colours according to the presented below. This scale only has green and red in it, I would like it to be red at 0% yellow at 50% and green to 100%, and for it to be change in-between so per say 75% would be green/yellow. Any way I can alter the code below (without changing to much) to fix this?
(Any help is much appreciated and sorry if I explained badly)

float colorPercentage = ((float)status.Status) / 100;
int red = (int)(255 * (1 - colorPercentage));
int green = (int)(255 * colorPercentage);

<td><a href="#@practiceName">@practiceName</a></td>
<td style="background-color:rgb(@red,@green,0);color:white">@status.Status%</td>

Answer Source

If I understand it correctly do you want to change colour as per the value of status? can you give some example please?

if status is 45 what would be value for the red and green? and if status is 75 what would be value for red and green?

if you want green to increase on the basis of status and red to decrease you can do like following:

green = (255 / (1/colorPercentage)); //green increases as per the colorPercentage's value
red = 255 - green; (if green is 200 you will get red as 55)

If you put some expected value with example of status it will be helpful to workout the solution.


Hi, See following code snippet, you can implement something like this. public void printColours(double apercentage) { double percentage = apercentage/100; double yellowPercent = (percentage < 0.25)?0:(percentage>=0.25 && percentage <= 0.50) ? percentage * 2 : ((1.0 - percentage) * 2);

        double red, yellow, green;

        red = 255 * (1.0 - percentage);
        green = 255 * (1.0 * percentage);
        yellow = 255 * yellowPercent;

        System.Diagnostics.Debug.WriteLine(string.Format("Red: {0}, Green: {1} and Yellow: {2} for Percentage of: {3}", red, green, yellow,percentage));


you can test this by


I am getting following outcome from this method which should suffice I think, feel free to change as per your need.

Red: 229.5, Green: 25.5 and Yellow: 0 for Percentage of: 0.1
Red: 191.25, Green: 63.75 and Yellow: 127.5 for Percentage of: 0.25
Red: 153, Green: 102 and Yellow: 204 for Percentage of: 0.4
Red: 127.5, Green: 127.5 and Yellow: 255 for Percentage of: 0.5
Red: 102, Green: 153 and Yellow: 204 for Percentage of: 0.6
Red: 89.25, Green: 165.75 and Yellow: 178.5 for Percentage of: 0.65       
Red: 63.75, Green: 191.25 and Yellow: 127.5 for Percentage of: 0.75
Red: 12.75, Green: 242.25 and Yellow: 25.5 for Percentage of: 0.95
Red: 0, Green: 255 and Yellow: 0 for Percentage of: 1

Hope this helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download