Calculate Rgb Value for a Range of Values to Create Heat Map

Calculate RGB value for a range of values to create heat map

def rgb(minimum, maximum, value):
    minimum, maximum = float(minimum), float(maximum)
    ratio = 2 * (value-minimum) / (maximum - minimum)
    b = int(max(0, 255*(1 - ratio)))
    r = int(max(0, 255*(ratio - 1)))
    g = 255 - b - r
    return r, g, b

Calculating heat map colours

What you really want is an HSV color, because the Hue (H value) is cyclical. if the hue is between 0 and 1, then it indicates how far along your color gradient you want to be. The saturation and value components are always 1 in this case.

Follow the HSV to RGB conversion code here:
HSV to RGB Stops at yellow C#

public string ConvertTotalToRgb(int low, int high, int cell)
{
    int range = high - low;
    float h= cell/ (float)range;
    rgb = HSVtoRGB(h,1.0f,1.0f);
    return "#" + rgb.R.ToString("X2") + rgb.G.ToString("X2") + rgb.B.ToString("X2");
}

If you know you can target browsers that support it (CSS3), you can just render the hsv value directly.

What is the algorithm to create colors for a heatmap?

I found this surprisingly easy to do with HSL.

In Ruby:

def heatmap_color_for value # [0,1]
  h = (1 - value) * 100
  s = 100
  l = value * 50
  "hsl(#{h.round(2)}%,#{s.round(2)}%,#{l.round(2)}%)"
end

This method returns HSL values as a string between 0% and 100%. It can be used with RMagick or ImageMagick.

Reference: ImageMagick HSL documentation.

In Java, for CSS, tested:

private String getHeatmapColorForCSS(double normalizedValue0to1) {
    double h = (1 - normalizedValue0to1) * 360;
    double s = 100;
    double l = 50;
    return String.format("hsl(%.2f, %.2f%%, %.2f%%)", h, s, l);
}

Note the key difference between CSS and ImageMagick: the first value is 0-360 and without a percent sign.

PHP Red to Green RGB Color Heatmap

Found a solution, converting the JS implemented solution posted here to PHP and reversing the Red to Green polarity so Red was high, Green was low.

It looks like this:

/**
 * @param $value
 * @param integer|float $min
 * @param integer|float $max
 * @return string
 */
function make_color($value, $min = 0, $max = .5)
{
    $ratio = $value;
    if ($min > 0 || $max < 1) {
        if ($value < $min) {
            $ratio = 1;
        } else if ($value > $max) {
            $ratio = 0;
        } else {
            $range = $min - $max;
            $ratio = ($value - $max) / $range;
        }
    }

    $hue = ($ratio * 1.2) / 3.60;
    $rgb = hsl_to_rgb($hue, 1, .5);

    $r = round($rgb['r'], 0);
    $g = round($rgb['g'], 0);
    $b = round($rgb['b'], 0);

    return "rgb($r,$g,$b)";
}

This also relies on an HSL to RGB translator, which I found on this post. This ends up giving me a pretty nice result:

Thanks for the help.

Color Mapping For Specific Range

You can try the HSV color space. By varying the Hue component, you can make the color shift in the way you want.

float value = 0; //this is your value between 0 and 1
float minHue = 120f/255; //corresponds to green
float maxHue = 0; //corresponds to red
float hue = value*maxHue + (1-value)*minHue; 
Color c = new Color(Color.HSBtoRGB(hue, 1, 0.5f));

This interpolates the hue of the min and max colors. If you want to interpolate between colors that don't have the same value and saturation. Interpolate between these as well.

---

Related Topics