Calculating heat map colours

Question

I'm working on a heat map made up of an HTML table. This table contains n cells and has a lowest value and a highest value (highest is always higher than lowest). Each cell has a cell value. All these values are ints.

Cells with the lowest value are meant to be a light blue, scaling across to the point where the cells with the highest value are a deep red. See gradient below for an ideal range:

To calculate the hex colour value of each individual cell, I look at the lowest and highest values from the table and the cell's total value, passing them into a method that returns the RGB hex, ready to be used with HTML's background-color style.

Here is the method so far:

public string ConvertTotalToRgb(int low, int high, int cell)
{
    int range = high - low;

    int main = 255 * cell/ range;
    string hexR = main.ToString("X2");
    int flip = 255 * (1 - (cell/ range));
    string hexB = flip.ToString("X2");

    return hexR + "00" + hexB;
}

With a lowest value of 0 and a highest value of 235, this method returns the following table (cell values are in the cells).

Example case: If lowest was 20, highest was 400 and cell was 60, I would want the method returning the RGB hex of the colour about 15.8% of the way along the gradient.

400 - 20 = 380
380 / 60 = 6.33
100 / 6.33 = 15.8

I'm aware that this formula isn't quite accurate but that's partially why I'm asking for help here.

I've made it this far but I'm really not sure how to proceed. Any help is hugely appreciated!

Answer 1

I use the following c# class to scale between 3 colours (typically red for negative, yellow for the mid point and green for positive numbers:

using System.Drawing;

namespace Utils.Maths;

public class ColourScaler
{
    public static (int r, int g, int b) HighestColor = (99, 190, 123);
    public static (int r, int g, int b) MidColor = (255, 235, 132);
    public static (int r, int g, int b) LowestColor = (248, 105, 107);

    public double MidValue { get; set; } = 0;
    public double HighestValue { get; set; } = 0;
    public double LowestValue { get; set; } = 0;
    
    public IEnumerable<double> Values 
    { 
        set
        {
            var items = value.OrderBy(o => o).Distinct().ToArray();
            if (items.Length > 0) 
            {
                LowestValue= items[0];
                HighestValue = items[items.Length - 1];
            }
        }
    }

    public ColourScaler(IEnumerable<double>? values = null, double midValue = 0)
    {
        Values = values ?? Enumerable.Empty<double>();
        MidValue = midValue;
    }

    public (int r, int g, int b) GetRgb(double value)
    {
        if (value < LowestValue || value > HighestValue)
            throw new ArgumentOutOfRangeException().AddData("value", value);

        if (value >= 0)
        {
            if (HighestValue - MidValue == 0)
                return HighestColor;

            var ratio = (value - MidValue) / (HighestValue - MidValue);
            var r = (int)(MidColor.r - (MidColor.r - HighestColor.r) * ratio);
            var g = (int)(MidColor.g - (MidColor.g - HighestColor.g) * ratio);
            var b = (int)(MidColor.b - (MidColor.b - HighestColor.b) * ratio);
            return (r, g, b);
        }
        else
        {
            if (MidValue - LowestValue == 0)
                return LowestColor;

            var ratio = (MidValue - value) / (MidValue - LowestValue);
            var r = (int)(MidColor.r - (MidColor.r - LowestColor.r) * ratio);
            var g = (int)(MidColor.g - (MidColor.g - LowestColor.g) * ratio);
            var b = (int)(MidColor.b - (MidColor.b - LowestColor.b) * ratio);
            return (r, g, b);
        }
    }

    public Color GetColour(double value)
    {
        var rgb = GetRgb(value);
        return Color.FromArgb(rgb.r, rgb.g, rgb.b);
    }
}

And here are some tests:

namespace Tests.ColourScaler;

[TestClass]
public class ColourScalerTests
{
    [TestMethod]
    public void ColourScaler_Values()
    {
        var item = new ColourScaler { Values = new double[] { 13, -2, -3, 4, 3, -3, 4, 1, 0 } };
        Assert.AreEqual(-3, item.LowestValue);
        Assert.AreEqual(0, item.MidValue);
        Assert.AreEqual(13, item.HighestValue);

        item = new ColourScaler { Values = new double[] { } };
        Assert.AreEqual(0, item.LowestValue);
        Assert.AreEqual(0, item.MidValue);
        Assert.AreEqual(0, item.HighestValue);
    }

    [TestMethod]
    public void ColourScaler_New()
    {
        var item = new ColourScaler(new double[] { 13, -2, -3, 4, 3, -3, 4, 1, 0 }, 1);
        Assert.AreEqual(-3, item.LowestValue);
        Assert.AreEqual(1, item.MidValue);
        Assert.AreEqual(13, item.HighestValue);

        item = new ColourScaler(new double[] { 13, -2, -3, 4, 3, -3, 4, 1, 0 });
        Assert.AreEqual(-3, item.LowestValue);
        Assert.AreEqual(0, item.MidValue);
        Assert.AreEqual(13, item.HighestValue);

        item = new ColourScaler(new double[] { });
        Assert.AreEqual(0, item.LowestValue);
        Assert.AreEqual(0, item.MidValue);
        Assert.AreEqual(0, item.HighestValue);
    }

    [TestMethod]
    public void ColourScaler_GetRgb()
    {
        var item = new ColourScaler { Values = new double[] { -7, -5, -3, -1, 0, 2, 4, 6 } };

        var rgb = item.GetRgb(-7);
        Assert.AreEqual(248, rgb.r);
        Assert.AreEqual(105, rgb.g);
        Assert.AreEqual(107, rgb.b);

        rgb = item.GetRgb(-6);
        Assert.AreEqual(249, rgb.r);
        Assert.AreEqual(123, rgb.g);
        Assert.AreEqual(110, rgb.b);

        rgb = item.GetRgb(-5);
        Assert.AreEqual(250, rgb.r);
        Assert.AreEqual(142, rgb.g);
        Assert.AreEqual(114, rgb.b);

        rgb = item.GetRgb(-2);
        Assert.AreEqual(253, rgb.r);
        Assert.AreEqual(197, rgb.g);
        Assert.AreEqual(124, rgb.b);

        rgb = item.GetRgb(-1);
        Assert.AreEqual(254, rgb.r);
        Assert.AreEqual(216, rgb.g);
        Assert.AreEqual(128, rgb.b);

        rgb = item.GetRgb(0);
        Assert.AreEqual(255, rgb.r);
        Assert.AreEqual(235, rgb.g);
        Assert.AreEqual(132, rgb.b);

        rgb = item.GetRgb(1);
        Assert.AreEqual(229, rgb.r);
        Assert.AreEqual(227, rgb.g);
        Assert.AreEqual(130, rgb.b);

        rgb = item.GetRgb(2);
        Assert.AreEqual(203, rgb.r);
        Assert.AreEqual(220, rgb.g);
        Assert.AreEqual(129, rgb.b);

        rgb = item.GetRgb(4);
        Assert.AreEqual(151, rgb.r);
        Assert.AreEqual(205, rgb.g);
        Assert.AreEqual(126, rgb.b);

        rgb = item.GetRgb(5);
        Assert.AreEqual(125, rgb.r);
        Assert.AreEqual(197, rgb.g);
        Assert.AreEqual(124, rgb.b);

        rgb = item.GetRgb(6);
        Assert.AreEqual(99, rgb.r);
        Assert.AreEqual(190, rgb.g);
        Assert.AreEqual(123, rgb.b);
    }
}

Answer 2

Today I've googoled to find some help about his matter, but no answer I found answer precisely the question.

The "Heat Map" is not a raw Value% to Hue conversion, it can be build with 7, 5 or less colors (eg: red to yellow), can be linear or logarithmic, etc.

I wrote, and I sharing, a C# .Net 4.6.1 code that can be a solid base to build your ValueToColorOnHeatMap converter: (Note: this was debuged and tested)

using System.Windows.Media;// for WPF
// for WindowsForms using System.Drawing
using System;
using System.Collections.Generic;
public class ColorHeatMap
{
    public ColorHeatMap()
    {
        initColorsBlocks();
    }
    public ColorHeatMap(byte alpha)
    {
        this.Alpha = alpha;
        initColorsBlocks();
    }
    private void initColorsBlocks()
    {
        ColorsOfMap.AddRange(new Color[]{
            Color.FromArgb(Alpha, 0, 0, 0) ,//Black
            Color.FromArgb(Alpha, 0, 0, 0xFF) ,//Blue
            Color.FromArgb(Alpha, 0, 0xFF, 0xFF) ,//Cyan
            Color.FromArgb(Alpha, 0, 0xFF, 0) ,//Green
            Color.FromArgb(Alpha, 0xFF, 0xFF, 0) ,//Yellow
            Color.FromArgb(Alpha, 0xFF, 0, 0) ,//Red
            Color.FromArgb(Alpha, 0xFF, 0xFF, 0xFF) // White
        });
    }
    public Color GetColorForValue(double val, double maxVal)
    {
        double valPerc = val / maxVal;// value%
        double colorPerc = 1d / (ColorsOfMap.Count-1);// % of each block of color. the last is the "100% Color"
        double blockOfColor = valPerc / colorPerc;// the integer part repersents how many block to skip
        int blockIdx = (int)Math.Truncate(blockOfColor);// Idx of 
        double valPercResidual = valPerc - (blockIdx*colorPerc);//remove the part represented of block 
        double percOfColor = valPercResidual / colorPerc;// % of color of this block that will be filled

        Color cTarget = ColorsOfMap[blockIdx];
        Color cNext = cNext = ColorsOfMap[blockIdx + 1]; 

        var deltaR =cNext.R - cTarget.R;
        var deltaG =cNext.G - cTarget.G;
        var deltaB =cNext.B - cTarget.B;

        var R = cTarget.R + (deltaR * percOfColor);
        var G = cTarget.G + (deltaG * percOfColor);
        var B = cTarget.B + (deltaB * percOfColor);

        Color c = ColorsOfMap[0];
        try
        {
            c = Color.FromArgb(Alpha, (byte)R, (byte)G, (byte)B);
        }
        catch (Exception ex)
        {
        }
        return c;
    }
    public byte Alpha = 0xff;
    public List<Color> ColorsOfMap = new List<Color>();
}

To use less, or personalized colors, work on ColorsOfMap List. The class use a proportional, linear, reperesentation, work on blocOfColor to change the linearity.

I hope this will help some people to save time :)

Thanks to all people that share their answers/solutions with the comunity.

To use less, or personalized colors, work on ColorsOfMap List. The class use a proportional, linear, reperesentation, work on blocOfColor to change the linearity.

I hope this will help some people to save time :)

Thanks to all people that share their answers/solutions with the comunity.

Answer 3

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.