Draw a colorful color wheel in C#

[color wheel]

The example Draw a color wheel in C# draws a color wheel. To do that, it makes a series of points along the perimeter of a circle where each point has a different color of the rainbow. It then makes a PathGradientBrush with those colors as the surround colors. The center of the brush, which is white, is at the center of the circle. After it creates the brush, the program simply fills the circle.

The points along the circle include red, green, and blue. The other points interpolate between those colors. For example, halfway between red (255, 0, 0) and green (0, 255, 0) is the color (128, 128, 0), which is brown (dark yellow). The way that program performs its interpolation means the color wheel doesn’t include saturated secondary colors such as yellow (255, 255, 0).

This example uses six main colors instead of just three so it creates a brighter color wheel that includes the secondary colors.

The following code shows how the program draws the color wheel.

// Draw a color wheel in the indicated area.
private void DrawColorWheel(Graphics gr, Color outline_color,
    int xmin, int ymin, int wid, int hgt)
    Rectangle rect = new Rectangle(xmin, ymin, wid, hgt);
    GraphicsPath wheel_path = new GraphicsPath();

    float num_pts = (wheel_path.PointCount - 1) / 6;
    Color[] surround_colors = new Color[wheel_path.PointCount];

    int index = 0;
    InterpolateColors(surround_colors, ref index,
        1 * num_pts, 255, 255, 0, 0, 255, 255, 0, 255);
    InterpolateColors(surround_colors, ref index,
        2 * num_pts, 255, 255, 0, 255, 255, 0, 0, 255);
    InterpolateColors(surround_colors, ref index,
        3 * num_pts, 255, 0, 0, 255, 255, 0, 255, 255);
    InterpolateColors(surround_colors, ref index,
        4 * num_pts, 255, 0, 255, 255, 255, 0, 255, 0);
    InterpolateColors(surround_colors, ref index,
        5 * num_pts, 255, 0, 255, 0, 255, 255, 255, 0);
    InterpolateColors(surround_colors, ref index,
        wheel_path.PointCount, 255, 255, 255, 0, 255, 255, 0, 0);

    using (PathGradientBrush path_brush =
        new PathGradientBrush(wheel_path))
        path_brush.CenterColor = Color.White;
        path_brush.SurroundColors = surround_colors;

        gr.FillPath(path_brush, wheel_path);

        // It looks better if we outline the wheel.
        using (Pen thick_pen = new Pen(outline_color, 2))
            gr.DrawPath(thick_pen, wheel_path);

The code creates a GraphicsPath, adds a circle to it, and flattens the path to get points along the circumference of the circle. It will later fill that path.

Using the flattened path’s points lets the program place the gradient’s surround colors exactly on the points used to draw the circle. The code divides the path points into six sections and uses the InterpolateColors method (described next) to assign colors to each section. It uses the returned colors to create the PathGradientBrush and fills the circle.

The following code shows the InterpolateColors method.

// Fill in colors interpolating between the from and to values.
private void InterpolateColors(Color[] surround_colors,
    ref int index, float stop_pt,
    int from_a, int from_r, int from_g, int from_b,
    int to_a, int to_r, int to_g, int to_b)
    int num_pts = (int)stop_pt - index;
    float a = from_a, r = from_r, g = from_g, b = from_b;
    float da = (to_a - from_a) / (num_pts - 1);
    float dr = (to_r - from_r) / (num_pts - 1);
    float dg = (to_g - from_g) / (num_pts - 1);
    float db = (to_b - from_b) / (num_pts - 1);

    for (int i = 0; i < num_pts; i++)
        surround_colors[index++] =
            Color.FromArgb((int)a, (int)r, (int)g, (int)b);
        a += da;
        r += dr;
        g += dg;
        b += db;

This method generates colors between a starting value and an ending value. It calculates the amount by which the colors’ alpha, red, green, and blue values must be increased to step across the desired range of colors.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in drawing, graphics, image processing and tagged , , , , , , , , , , , . Bookmark the permalink.

7 Responses to Draw a colorful color wheel in C#

  1. Pingback: Draw a color wheel with alpha and saturation in C# - C# HelperC# Helper

  2. Tamori says:

    Thanks for the post. How would the code look like for WPF?

  3. RodStephens says:

    I don’t think WPF provides a PathGradientBrush (it only has LinearGradientBrush and RadialGradientBrush) so I don’t think this is easy. The simplest solution I can think of off hand would be to use the code in this example to draw the image on a bitmap and then display the bitmap in WPF.

  4. Dark Frost says:

    Hi How can ı convert this code vb.net?
    ı download and try convert but not working 🙁

    • RodStephens says:

      Unfortunately I don’t have time to help you with that. (Unless you want to hire me to do it.) It’s not too long, though, so you may be able to get it working with a little work.

  5. Stefan says:

    any idea how to draw the wheel without the white blending in the center?

    • RodStephens says:

      If you want the colors to blend together, then they have to produce something at the center. You could have them not blend as in one of these:

      But then, of course, the colors don’t blend together.

      In the following wheel, adjacent colors blend together but you don’t get the different shades.

Comments are closed.