What am I missing to saturate the colors in creating my rainbow Color Picker?

105 views Asked by At

I am trying to create a Color Picker similar to that of MS Paint.

Unfortunately, I can't figure out the algorithm for saturation.

enter image description here

This is what my current algorithm creates. Anytime I try to perform a saturated effect going down on the Y axis, it just makes everything after the first line completely red or black.

    public ColorWheel()
    {
        for (int y = 0; y < 255; y++)
        {
            for (int x = 0; x < 255 * 6; x++)
            {
                //Red 255 - Green 0-254
                if (color.R == brightness && color.G < brightness && color.B == 0)
                {
                    color.G += 1;

                    //color.R -= (byte)y;
                    //color.G += (byte)y;
                    //color.B += (byte)y;
                }
                //Green 255 - Red 255-0
                else if (color.R > 0 && color.G == brightness && color.B == 0)
                {
                    color.R -= 1;

                    //color.R -= (byte)y;
                    //color.G -= (byte)y;
                    //color.B += (byte)y;
                }
                //Green 255 - Blue 0-255
                else if (color.R == 0 && color.G == brightness && color.B < brightness)
                {
                    color.B += 1;

                    //color.R += (byte)y;
                    //color.G -= (byte)y;
                    //color.B += (byte)y;
                }
                //Blue 255 - Green 255-0
                else if (color.R == 0 && color.G > 0 && color.B == brightness)
                {
                    color.G -= 1;

                    //color.R += (byte)y;
                    //color.G -= (byte)y;
                    //color.B -= (byte)y;
                }
                //Blue 255 - Red 0-255
                else if (color.R < brightness && color.G == 0 && color.B == brightness)
                {
                    color.R += 1;

                    //color.R += (byte)y;
                    //color.G += (byte)y;
                    //color.B -= (byte)y;
                }
                //Red 255 - Blue 255-0
                else if (color.R == brightness && color.G == 0 && color.B > 0)
                {
                    color.B -= 1;

                    //color.R -= (byte)y;
                    //color.G += (byte)y;
                    //color.B -= (byte)y;
                }

                image.SetPixel((uint)x, (uint)y, color);
            }

                //brightness--;
        }
    }
1

There are 1 answers

0
John On

As you are working in RGB, 255 is 100% saturated on each color, so:

  1. 255, 255, 255 is white or 100% saturated (mixing all colors)
  2. 255, 0, 0 is 100% saturated red with 0% saturation of green and blue. This is as saturated as you can get with pure red.
  3. 50, 0, 0 is a little bit of red, with no green and blue. This will be a dark red, as an absence of color = black.

By keeping the same ratio of red to green to blue, for each color on your spectrum, you could just drive up the % (closer to 255) to make more saturated, and lower the % (closer to 0) to make the same color less saturated (darker).

Hope that helps.