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: <input value=0 id="minim" /> Min value: <input value=20 id="maxim" />
<input type=submit value="Calculate colors" onClick="fCalcul()">
<table id=tColors border=2></table>
<script>
  function fCalcul() {
    var i;
    var tblRows = "<tr><th>value</th><th>Color</th></tr>";
    var minValue = parseInt(minim.value);
    var maxValue = parseInt(maxim.value);
    var tblBody = "";
    var increment = 1;

    if ((maxValue - minValue) > 40) //  don't show more than 40 rows, for sample sake
      increment = ((maxValue - minValue) / 40) | 0;

    for (i = minValue; i <= maxValue; i += increment) {
      tblBody += "<tr><td>" + i + "</td><td style='background: " +
        fSemaphor(minValue, maxValue, i) + "'>" +
        fSemaphor(minValue, maxValue, i) + "</td></tr>";
    }

    tColors.innerHTML = tblRows + tblBody;
  }


    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

    }
</script>

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