HTML Color Codes: Red to Yellow to Green

Question

I would like to come up with as many HEX HTML values to have a smooth color gradient from red to green:

I would like this to be similar to the following: http://ww

Answer 1

I came to this post because looking for a simple way to generate a list of colors red-yellow-green for a set of values.

Useful when programming dashboards or reports that need to show "what-if" analysis and enhance good vs average vs bad values. Found interesing articles on several sources, but came out to this very simple JavaScript function:

function fSemaphor(minimal, maximal, value) {
  var difference = maximal - minimal;
  var medium = (minimal + difference / 2) | 0; // |0 returns INT
  var RED = 255,
    GREEN = 255;

  if (value <= medium)
    GREEN = (GREEN * (value / medium)) | 0;
  else
    RED = (RED * (1.0 - value / maximal)) | 0;

  // returns HEX color, for usage in CSS or any style
  return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue

}

I even provide a full example of it's usage. Just copy and paste to an HTML page, and see what it does.

Max value:  Min value: 

Special thanks to Ovid blog in http://blogs.perl.org/users/ovid/2010/12/perl101-red-to-green-gradient.html, who gave a technical explanation that helped me simplify it