Make a selection dialog that uses a color wheel in C#

The example Let the user pick a color with alpha and saturation values from a color wheel in C# lets the user select a color. This example uses that technique to build a color selection dialog.

This change is fairly easy. First move the color wheel from the previous example into a form type named ColorWheelDialog. Add OK and Cancel buttons. Make the form's AcceptButton and CancelButton properties to those buttons and set their DialogResult properties to OK and Cancel respectively.

The only real change to the dialog's code is in its SelectedColor property. When you set the property, the dialog now updates its alpha scroll bar. That way when the main program sets SelectedColor, the dialog's scroll bar is updated.

(This version doesn't try to set the saturation scroll bar. I'm sure there is a calculation you could do to convert the RGB value to HLS and figure this out but I'm not sure the color wheel is a truly correct HLS color wheel anyway. Perhaps some day when I'm feeling less lazy I'll take a harder look at this. Meanwhile the dialog produces a nice result.)

The main program uses the following code to let the user select foreground and background colors.

// The selected colors.
private Color Color1 = Color.FromArgb(128, 255, 0, 0);
private Color Color2 = Color.FromArgb(128, 0, 0, 255);

// Set color 1.
private void btnColor1_Click(object sender, EventArgs e)
    ColorWheelDialog dlg = new ColorWheelDialog();
    dlg.SelectedColor = Color1;
    if (dlg.ShowDialog() == DialogResult.OK)
        Color1 = dlg.SelectedColor;


// Set color 2.
private void btnColor2_Click(object sender, EventArgs e)
    ColorWheelDialog dlg = new ColorWheelDialog();
    dlg.SelectedColor = Color2;
    if (dlg.ShowDialog() == DialogResult.OK)
        Color2 = dlg.SelectedColor;


The code for each button creates an instance of the ColorWheelDialog class and sets its SelectedColor property to the appropriate value. (The program stores the selected values in the picSample PictureBox.)

The code then displays the dialog. If the user user selects a color and clicks OK, the program saves the selected color and refreshes the picSample PictureBox.

The following code shows how the picSample control draws its sample.

// Draw a sample to show the alpha component.
private void picSample_Paint(object sender, PaintEventArgs e)

    // Draw some lines.
    int wid = picSample.ClientSize.Width;
    int hgt = picSample.ClientSize.Height;
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    using (Pen pen = new Pen(Color.Black, 3))
        for (int x = 10; x <= wid; x += 20)
            e.Graphics.DrawLine(pen, x, 0, x, hgt);
        for (int y = 10; y <= hgt; y += 20)
            e.Graphics.DrawLine(pen, 0, y, wid, y);

    // Draw an ellipse.
    int third = picSample.ClientSize.Width / 3;
    using (Brush brush = new SolidBrush(Color2))
        e.Graphics.FillEllipse(brush, 0, 0, 2 * third, hgt);
    using (Brush brush = new SolidBrush(Color1))
        e.Graphics.FillEllipse(brush, third, 0, 2 * third, hgt);

This code clears the sample PictureBox's background and then draws a black grid on it. Next the code draws an ellipse in the selected background color. It finishes by drawing some sample text in the foreground color on top of the ellipse. If you look closely



What did you think of this article?

  • No trackbacks exist for this post.
  • No comments exist for this post.
Leave a comment

Submitted comments are subject to moderation before being displayed.


 Email (will not be published)


Your comment is 0 characters limited to 3000 characters.