Converting int value to a color in a gradient

Question

I have an int value that can range from -148 to 10 and I'm trying to map this value to a color in the following gradient:

Black (-148)
Blue
Cyan
Green
Yellow
Orange
Red
White (10)

Visually, my color gradient looks like this:

My first thought was to break the range (-148 to 10) down into smaller groups that correspond to these eight colors but that obviously results in multiple values translating into the same color. I'd like to make use of many more or even all the colors in this gradient but I'm not sure how to go about doing this. Can anyone offer some advice? For what it's worth, I'm working in C#/.NET so I need to translate my int into RGB values.

I wouldn't, looking at the black and white start and end points. — TaW, Sep 29 '14 at 19:01
Your image has a width of 200 and a size of 203 bytes. I would read out 159 values and store them in a List. Of course you can calculate them in c# but that will take more resources, imo.. — TaW, Sep 29 '14 at 19:05

score 3 · Answer 1 · answered Sep 29 '14 at 19:04

You are actually looking at the HSV color space. What you can do is:

1 Map your [-148,10] to the [0,360] degree in H

2 Fix the S And V value. (I guess S=1 and V=1 in your case)

3 Get the HSV color from the previous computed H, S, and V

4 Convert HSV color to RGB color and use.

Fratyx · Accepted Answer · 2014-09-29T19:46:24.070

Did you mean a mapping function like this? (The Transparent entry in the colors list is a dummy in the case of value 10 where color1 is taken from the 9th entry of the list)

    Color[] colors = new Color[] { Colors.Black, Colors.Blue, Colors.Cyan, Colors.Green, Colors.Yellow, Colors.Orange, Colors.Red, Colors.White, Colors.Transparent };
    public Color IntToColor(int i)
    {
        float scaled = (float)(i + 148) / 158 * 7;
        Color color0 = colors[(int)scaled];
        Color color1 = colors[(int)scaled + 1];
        float fraction = scaled - (int)scaled;
        Color result = new Color();
        result.R = (byte)((1 - fraction) * (float)color0.R + fraction * (float)color1.R);
        result.G = (byte)((1 - fraction) * (float)color0.G + fraction * (float)color1.G);
        result.B = (byte)((1 - fraction) * (float)color0.B + fraction * (float)color1.B);
        result.A = 255;
        return result;
    }

P.S.: For simplicity there is no check for the [-148:10] range P.P.S.: I know my code will not win any beauty contest.

This will work fine for those neighbouring colors. You may want to have a look at [this](http://stackoverflow.com/questions/26165071/how-to-append-two-brush-classes/26167795?noredirect=1#comment41044719_26167795) post to see a comparison of mixing rgb components and mixing hues for colors that are further apart.. — TaW, Oct 03 '14 at 12:10

score 1 · Answer 3 · edited May 23 '17 at 12:31

Your image has a width of 200 and a size of 203 bytes. I would read out 159 values and store them in a List. Of course you can calculate them in c# but that will take more resources, imo..

    Dictionary<int, Color> mycolors = new Dictionary<int,Color>();
    Bitmap bmp = new Bitmap("D:\\spectrum.png");

    float fx = bmp.Width / 159f;
    for (int x = 0; x < 160; x++)
        mycolors.Add(x - 148, bmp.GetPixel((int)(fx * x), 1));

This will map 159 colors. If you want more than these (or than the 200 your image holds) a calculation is called for. But you can't map them into your integer range - so please make up your mind! Here is code that implements a HSV->RGB mapping, which you could use, at least going from blue to red. The fades to black and to white would have to come from two more routines.. best in the way of Fratyx's interpolation code. (Which as it is will cut a little away from the outer ring of clearest colors for each segment..)

Converting int value to a color in a gradient

3 Answers3

Linked