One of the vital elements of many visualizations is assigning a a color based on the correlated data. The most common way to think about this is that there is a color line representing values from a minimum to a maximum. Wherever the data point falls along that line determined the color assigned. This can be done using 2 colors (a minimum color and a maximum color) or 3 colors (an additional color representing the middle value).

Using these color scales, we can color data points as seen below:

Of course, the value doesn’t need to be 0-to-100. For example, if you’re visualizing grades, you may go from 60 – 100 (F-A). If you’re looking at stocks, you may go from –3% to 3%. So any algorithm we have that makes this conversion needs to do so from an arbitrary minimum to an arbitrary maximum. It will also need to “cap” the color translation at the min and max. For example, in the 105% sample above, we would color that value at the maximum instead of calculating a “more green” or “more blue” color.

Conceptually, this is the idea:

We separate the color elements (red, green, and blue) for our minimum color, maximum color, and (optionally) mid colors along a value line. We the find out where our value to convert to a color is along that value line and we can use the corresponding RGB values to generate our color. I think of it like this (RGB values taken from the red-to-yellow-to-green gradient above):

Here is the method that I use for 2 color conversion like the white-to-blue line (in C#):

public Color GetColorFrom2ColorScale(double value, 
                                        double minValue, 
                                        double maxValue,
                                        Color minColor,
                                        Color maxColor)
{
    if (maxValue == minValue)
        return Color.FromArgb(255, 0, 0, 0);

    // in most cases the max value will be larger // than the min value if (maxValue > minValue)
    {
        // If the value is higher than the maxValue, // make sure we use the maxColor if (value > maxValue)
            value = maxValue;
        // If the value is lower than the minValue, // make sure we use the minColor else if (value < minValue)
            value = minValue;
    }
    // but in other cases (like golf scores) our // maxValue (better) might be lower than our // minValue (worse) else {
        if (value < maxValue)
            value = maxValue;
        else if (value > minValue)
            value = minValue;
    }

    // Find the R and G and B values individually by 
    // 1) finding the position of the value along the 
    // min-max line 
    double valuePosition = (value - minValue) / (maxValue - minValue);

    
    // 2) finding the range between min and max for 
    // each color element => (maxColor.R - minColor.R) 
    // 3) multiplying that difference by the value position => 
    // ((maxColor.R - minColor.R) * valuePosition) 
    // 4) adding that color position to the minimum color value => // minColor.R + (etc) 
    double valueR = minColor.R + ((maxColor.R - minColor.R) * valuePosition);
    double valueG = minColor.G + ((maxColor.G - minColor.G) * valuePosition);
    double valueB = minColor.B + ((maxColor.B - minColor.B) * valuePosition);

    // we use a simple method to convert the resulting double to a byte // so we can create a new color from it. return Color.FromArgb(255, byteColor(valueR), byteColor(valueG), byteColor(valueB)); ;
}

private byte byteColor(double value)
{
    if (value > 255)
        value = 255;
    if (value < 0)
        value = 0;
    return Convert.ToByte(value);
}

And here is the method I use for 3 color conversion (the red-to-yellow-to-green line) (in C#)

public Color GetColorFrom3ColorScale(double value,
                                double minValue,
                                double maxValue,
                                Color minColor,
                                Color midColor,
                                Color maxColor)
{
    if (maxValue == minValue)
        return Color.FromArgb(255, 0, 0, 0);

    // in most cases the max value will be larger // than the min value if (maxValue > minValue)
    {
        // If the value is higher than the maxValue, // make sure we use the maxColor if (value > maxValue)
            value = maxValue;
        // If the value is lower than the minValue, // make sure we use the minColor else if (value < minValue)
            value = minValue;
    }
    // but in other cases (like golf scores) our // maxValue (better) might be lower than our // minValue (worse) else {
        if (value < maxValue)
            value = maxValue;
        else if (value > minValue)
            value = minValue;
    }

    // Get the mid point so we know if the value is between // between the minColor and the midColor or the // midColor and the maxColor double midPointValue = ((maxValue - minValue) * .5) + minValue;
    bool isValueInHighEnd = false;
    if (maxValue > minValue && value > midPointValue)
        isValueInHighEnd = true;
    else if (maxValue < minValue && value < midPointValue)
        isValueInHighEnd = true;

    double valueR = 0;
    double valueG = 0;
    double valueB = 0;

    // if the value is "in the high end", we'll calculate between // the midColor and the maxColor if (isValueInHighEnd)
    {
        // Find the R and G and B values individually by 
   // 1) finding the position of the value along the 
   // mid-max line 
   double valuePosition = (value - midPointValue) / (maxValue - midPointValue);
   // 2) finding the range between mid and max for 
    // each color element => (maxColor.R - midColor.R) 
    // 3) multiplying that difference by the value position => 
    // ((maxColor.R - midColor.R) * valuePosition) 
    // 4) adding that color position to the minimum color value => 
    // midColor.R + (etc) 
    valueR = midColor.R + ((maxColor.R - midColor.R) * valuePosition);
        valueG = midColor.G + ((maxColor.G - midColor.G) * valuePosition);
        valueB = midColor.B + ((maxColor.B - midColor.B) * valuePosition);
    }
    // otherwise we'll calculate between the minColor and the midColor else {
        // See above for details... the concept is the same double valuePosition = (value - minValue) / (midPointValue - minValue);
        valueR = minColor.R + ((midColor.R - minColor.R) * valuePosition);
        valueG = minColor.G + ((midColor.G - minColor.G) * valuePosition);
        valueB = minColor.B + ((midColor.B - minColor.B) * valuePosition);
    }

    // we use a simple method to convert the resulting double to a byte // so we can create a new color from it. return Color.FromArgb(255, byteColor(valueR), byteColor(valueG), byteColor(valueB)); ;
}

private byte byteColor(double value)
{
    if (value > 255)
        value = 255;
    if (value < 0)
        value = 0;
    return Convert.ToByte(value);
}

And if you need to convert that value into a hex, you can use the following hex conversion that I pulled from steve over at Cambia Research.

public string ColorToHex(Color c)
        {
            char[] hexDigits = {
             '0', '1', '2', '3', '4', '5', '6', '7',
             '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'};

            byte[] bytes = new byte[3];
            bytes[0] = c.R;
            bytes[1] = c.G;
            bytes[2] = c.B;

            char[] chars = new char[bytes.Length * 2];
            for (int i = 0; i < bytes.Length; i++)
            {
                int b = bytes[i];
                chars[i * 2] = hexDigits[b >> 4];
                chars[i * 2 + 1] = hexDigits[b & 0xF];
            }
            string hex = "#" + new string(chars);
            return hex;
        }