# javascript – from green to red color depend on percentage-ThrowExceptions

Exception or error:

I have a poll system and I want answers for this poll to be colored.
For example: If it’s 10% it would be red, if 40% it would be yellow and if 80% it would be green, so I want my javascript code to use the rgb colors to make a color according to the given percentage.

function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
\$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}

Now I want hex from percent.

How to solve:

This may be more than you need, but this lets you set up any arbitrary color map:

var percentColors = [
{ pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
{ pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
{ pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
for (var i = 1; i < percentColors.length - 1; i++) {
if (pct < percentColors[i].pct) {
break;
}
}
var lower = percentColors[i - 1];
var upper = percentColors[i];
var range = upper.pct - lower.pct;
var rangePct = (pct - lower.pct) / range;
var pctLower = 1 - rangePct;
var pctUpper = rangePct;
var color = {
r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
};
return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
// or output as hex if preferred
};

###

A simple scheme using HSL along with fiddle:

function getColor(value){
//value from 0 to 1
var hue=((1-value)*120).toString(10);
return ["hsl(",hue,",100%,50%)"].join("");
}

tweak saturation and luminosity as needed. and a fiddle.

function getColor(value) {
//value from 0 to 1
var hue = ((1 - value) * 120).toString(10);
return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
var value = i / len;
var d = document.createElement('div');
d.textContent = "value=" + value;
d.style.backgroundColor = getColor(value);
document.body.appendChild(d);
}

###

You can do this in a few lines of code (not including comments) without the need for any color maps.

function hsl_col_perc(percent, start, end) {
var a = percent / 100,
b = (end - start) * a,
c = b + start;

// Return a CSS HSL string
return 'hsl('+c+', 100%, 50%)';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png

/*
Quick ref:
0 – red
60 – yellow
120 – green
180 – turquoise
240 – blue
300 – pink
360 – red
*/

No need for color maps (Unless it is a non-linear color change, which was not asked)

Warning:
This is not compatible with IE8 or below. (Thanks Bernhard Fürst)

// Just used as a shortcut for below, completely optional
const red = 0,
yellow = 60,
green = 120,
turquoise = 180,
blue = 240,
pink = 300;

function hsl_col_perc(percent, start, end) {
var a = percent / 100,
b = (end - start) * a,
c = b + start;

// Return a CSS HSL string
return 'hsl(' + c + ', 100%, 50%)';
}

// Simple little animation
var percent = 0,
progressDiv = document.getElementById('progress'),
textDiv = document.getElementById('progress-text'),
progressContainerDiv = document.getElementById('progress-container')

function step(timestamp) {
percent = (percent < 100) ? percent + 0.5 : 0;

// Play with me!
let colour = hsl_col_perc(percent, red, green); //Red -> Green
progressDiv.style.backgroundColor = colour;
progressContainerDiv.style.borderColor = colour;
progressDiv.style.width = percent + '%';
textDiv.innerHTML = Math.floor(percent);
window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);
#progress {
width: 0%;
white-space: nowrap;
text-wrap: none;
height: 50px;
}

#progress-container {
border: solid 2px black;
width: 200px;
}
<h1 id="progress-text"></h1>
<div id="progress-container">
<div id="progress"></div>
</div>

###

This method works well in this case (percent from 0 to 100):

function getGreenToRed(percent){
r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
return 'rgb('+r+','+g+',0)';
}

###

function hexFromRGBPercent(r, g, b) {
var hex = [
Math.floor(r / 100 * 255).toString( 16 ),
Math.floor(g / 100 * 255).toString( 16 ),
Math.floor(b / 100 * 255).toString( 16 )
];
\$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}

Credit goes to andrew. He was faster.

###

This one is from green to red, but you can change the colors.
For those interested here’s my code and the jsfiddle ( http://jsfiddle.net/rxR3x/ )

var percentColors = [
{ pct: 0, color: '#00FF00' },   { pct: 3, color: '#12FF00' },   { pct: 6, color: '#24FF00' },
{ pct: 10, color: '#47FF00' },  { pct: 13, color: '#58FF00' },  { pct: 16, color: '#6AFF00' },
{ pct: 20, color: '#7CFF00' },  { pct: 23, color: '#8DFF00' },  { pct: 26, color: '#9FFF00' },
{ pct: 30, color: '#B0FF00' },  { pct: 33, color: '#C2FF00' },  { pct: 36, color: '#D4FF00' },
{ pct: 40, color: '#E5FF00' },  { pct: 43, color: '#F7FF00' },  { pct: 46, color: '#FFF600' },
{ pct: 50, color: '#FFE400' },  { pct: 53, color: '#FFD300' },  { pct: 56, color: '#FFC100' },
{ pct: 60, color: '#FFAF00' },  { pct: 63, color: '#FF9E00' },  { pct: 66, color: '#FF8C00' },
{ pct: 70, color: '#FF7B00' },  { pct: 73, color: '#FF6900' },  { pct: 76, color: '#FF5700' },
{ pct: 80, color: '#FF4600' },  { pct: 83, color: '#FF3400' },  { pct: 86, color: '#FF2300' },
{ pct: 90, color: '#FF1100' },  { pct: 93, color: '#FF0000' },  { pct: 96, color: '#FF0000' },
{ pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time){
var i = 0;
var percentInterval = setInterval(function() {
i++;
if(percent >= percentColors[i].pct) {
console.log(percentColors[i].color);
\$(selector).css('background-color', percentColors[i].color);
}
if(percentColors[i].pct>=percent) {
clearInterval(percentInterval);
}
}, time/25);
\$(selector).animate({width:(200/100)*percent}, time);
}
var percentColors = [
{ pct: 0, color: '#00FF00' },	{ pct: 3, color: '#12FF00' },	{ pct: 6, color: '#24FF00' },
{ pct: 10, color: '#47FF00' },	{ pct: 13, color: '#58FF00' },	{ pct: 16, color: '#6AFF00' },
{ pct: 20, color: '#7CFF00' },	{ pct: 23, color: '#8DFF00' },	{ pct: 26, color: '#9FFF00' },
{ pct: 30, color: '#B0FF00' },	{ pct: 33, color: '#C2FF00' },	{ pct: 36, color: '#D4FF00' },
{ pct: 40, color: '#E5FF00' },	{ pct: 43, color: '#F7FF00' },	{ pct: 46, color: '#FFF600' },
{ pct: 50, color: '#FFE400' },	{ pct: 53, color: '#FFD300' },	{ pct: 56, color: '#FFC100' },
{ pct: 60, color: '#FFAF00' },	{ pct: 63, color: '#FF9E00' },	{ pct: 66, color: '#FF8C00' },
{ pct: 70, color: '#FF7B00' },	{ pct: 73, color: '#FF6900' },	{ pct: 76, color: '#FF5700' },
{ pct: 80, color: '#FF4600' },	{ pct: 83, color: '#FF3400' },	{ pct: 86, color: '#FF2300' },
{ pct: 90, color: '#FF1100' },	{ pct: 93, color: '#FF0000' },	{ pct: 96, color: '#FF0000' },
{ pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time) {
var i = 0;
var percentInterval = setInterval(function() {
i++;
if (percent >= percentColors[i].pct) {
\$(selector).css('background-color', percentColors[i].color);
}
if (percentColors[i].pct >= percent) {
clearInterval(percentInterval);
}
}, time / 25);
\$(selector).animate({
width: (200 / 100) * percent
}, time);
}
width: 200px;
height: 25px;
border: 1px solid #CECECE;
}

width: 0px;
height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>

###

I know this is originally an old javascript question, but I got here searching for CSS only solution, so maybe it will help others equally:
It’s actually quite simple:

Use the percentage as a HSL color value!
Red to Green spans H from 0 to 128.(so you can pump the percentage up by 1.2 if you want). Example:

background-color:hsl(perc,100%,50%);

Where perc is just the number, without the % sign.

###

Modify these two lines in Jacob’s code:

var lower = percentColors[i - 1];
var upper = percentColors[i];

to:

var lower = (i === 0) ?  percentColors[i] : percentColors[i - 1];
var upper = (i === 0) ? percentColors[i + 1] : percentColors[i];

if you want to make it work for the two extremes (i.e. 0.0 and 1.0).

###

This is what I came up with:

function rgbify(maxval, minval, val, moreisgood) {
var intnsty = (val - minval) / (maxval - minval);
var r, g;
if (moreisgood) {
if (intnsty > 0.5) {
g = 255;
r = Math.round(2 * (1 - intnsty) * 255);
} else {
r = 255;
g = Math.round(2 * intnsty * 255);
}

} else { //lessisgood
if (intnsty > 0.5) {
r = 255;
g = Math.round(2 * (1 - intnsty) * 255);
} else {
g = 255;
r = Math.round(2 * intnsty * 255);
}
}
return "rgb(" + r.toString() + ", " + g.toString() + ", 0)";
}

jsfiddle

The moreisgood flag toggles if higher values should be red or green.
maxval and minval are the threshold values for your range.
val is the value to be converted to rgb

###

I know this is kind of bump to topic but I found one more way of doing it.

To do this you can also create a dynamic canvas of 100×1 dimension and apply gradient to it and then from function you just need to get pixel color of the percent location.

Here is the code :
This is global:

/* dynamic canvas */

// this should be done once in a page so out of function, makes function faster
var colorBook = \$('<canvas />')[0];
colorBook.width = 101;
colorBook.height = 1;
var ctx = colorBook.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 101, 0);
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);

Then the function:

function getColor(value) {
return 'rgba(' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + ')';
}

Demo : https://jsfiddle.net/asu09csj/

###

Changing from red to green color using HLS. The value should be from 0 to 100, in this case simulating percentage (%).

function getColorFromRedToGreenByPercentage(value) {
const hue = Math.round(value);
return ["hsl(", hue, ", 50%, 50%)"].join("");
}

###

HSL will work in IE8 using jquery-ui-1.10.4.

I modified jongo45’s answer to accept lightness in the function.

function getColor(value, lightness) {
//value from 0 to 1
var hue = ((value) * 120).toString(10);
return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}

###

Mattisdada’s code was really helpful for me while I was making a chart to display statistics of some quiz results. I modified it a bit to allow “clipping” of the percentage (not sure what the right term is) and also to work both ways along the colour wheel, e.g. both from green(120) to red(0) and vice versa.

function pickColourByScale(percent, clip, saturation, start, end)
{
var a = (percent <= clip) ? 0 : (((percent - clip) / (100 - clip))),
b = Math.abs(end - start) * a,
c = (end > start) ? (start + b) : (start - b);
return 'hsl(' + c + ','+ saturation +'%,50%)';
}

Basically, by setting a percentage value to clip the scaling at, everything below that value will be coloured as your start colour. It also recalculates the scaling according to 100% – clip.

Let’s go through an example scenario where I enter the following values:

• percent: 75
• clip: 50
• saturation: 100 (unimportant, I use this for highlighting a Chart.js chart)
• start: 0 (red)
• end: 120 (green)

1. I check if percent is less than clip, and I return 0% if it is. Otherwise, I recalculate the percentage – 75% is halfway between 50% and 100%, so I get 50%. This gives me 0.5.
2. I get the difference between start and end. You need to use Math.abs() in case your start hue value is more than your end hue value. Then I multiply the difference by the result obtained in step 1 to see how much I need to offset the start hue value.
3. If the start value is more than the end value, then you need to move along the colour wheel in the opposite direction. Add to or subtract from the start value accordingly.

I end up with yellow, which is halfway between red and green. If I hadn’t done the recalculation in step 1, I’d have ended up with a more greenish colour, which could be misleading.