Title: Draw a color wheel in C#

The program uses a PathGradientBrush to fill a color wheel with color samples. Drawing the wheel is basically automatic but takes some effort to set up. The following DrawColorWheel method draws does all the work.

// 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(); wheel_path.AddEllipse(rect); wheel_path.Flatten(); int num_pts = (wheel_path.PointCount - 1) / 3; Color[] surround_colors = new Color[wheel_path.PointCount]; float r = 255, g = 0, b = 0; float dr, dg, db; dr = -255 / num_pts; db = 255 / num_pts; for (int i= 0; i < num_pts; i++) { surround_colors[i] = Color.FromArgb(255, (int)r, (int)g, (int)b); r += dr; b += db; } r = 0; g = 0; b = 255; dg = 255 / num_pts; db = -255 / num_pts; for (int i = num_pts; i < 2 * num_pts; i++) { surround_colors[i] = Color.FromArgb(255, (int)r, (int)g, (int)b); g += dg; b += db; } r = 0 ; g = 255 ; b = 0; dr = 255 / (wheel_path.PointCount - 2 * num_pts); dg = -255 / (wheel_path.PointCount - 2 * num_pts); for (int i = 2 * num_pts; i < wheel_path.PointCount; i++) { surround_colors[i] = Color.FromArgb(255, (int)r, (int)g, (int)b); r += dr; g += dg; } 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); } } //// Uncomment the following to draw the path's points. //for (int i = 0; i < wheel_path.PointCount; i++) //{ // gr.FillEllipse(Brushes.Black, // wheel_path.PathPoints[i].X - 2, // wheel_path.PathPoints[i].Y - 2, // 4, 4); //} }

First, the program makes a GraphicsPath object and adds an ellipse to it. This will be the ellipse occupied by the wheel.

When you make a PathGradientBrush, you specify colors for the points along the path. Unfortunately the points for an ellipse are control points not points on the ellipse itself.

The program calls the path object's Flatten method to convert the ellipse into a series of line segments. Now the points do lie along the flattened path.

The program loops through the points building an array of corresponding colors. The colors vary smoothly from red to blue to green.

Next the code creates a PathGradientBrush, sets the central color to be white, and assigns the array of colors to the points on the path. Finally it fills the path with the brush.

The filled path has slightly rough edges so the program draws an outline around it to smooth them out. In this example, the outline uses the form's background color so the result appears to be a wheel with no outline and smooth edges.

In addition to looking nice, you can use the color wheel to let the user select a color. Simply save the color wheel in a Bitmap, let the user click on it, and use the Bitmap object's GetPixel method to see what color was clicked.

Download the example to experiment with it and to see additional details.