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.
Advertisement
Answer
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 };