Click here to Skip to main content
Click here to Skip to main content

Creating a color selection control

, 2 Jan 2005
Rate this:
Please Sign up or sign in to vote.
Creating a user control for selecting a foreground and background color from a color map.

Sample Image

Introduction

While working on a simple icon editor, I got confronted with the problem of selecting colors. Sure, I could use the color selection dialog, but since it is a dialog, it is not directly available for the user.

When looking at common graphic applications (e.g., Paint Shop Pro), the editing canvas of an image typically is accompanied by a control displaying a map of colors. Then, using the mouse, the user can set the active foreground color and background color by merely left or right clicking on the control.

The following code demonstrates how easy it is to create such a control using the alpha-blending capabilities of the .NET framework.

Creating the control

Before actually creating the control, let's summarize the functionality of the control:

  • display a map of all colors available
  • set the foreground color property by left clicking anywhere on the color map
  • set the background color property by right clicking anywhere on the color map

Since we want to keep things simple, the control first creates a color map bitmap of the same size as the control's canvas. Then in the paint event, the control simply draws the bitmap to the service.

Since canvas size and bitmap size are identical, each pixel of the canvas corresponds to a pixel in the bitmap. Selecting a color now simply becomes a matter of looking up the color of the pixel at the coordinates of the click (this is done in the MouseUp event handler).

The color map

The hardest part is creating the color map bitmap, for what we are actually doing is mapping from a 3-dimensional space to a 2-dimensional space. Eeuhh.. what..you've totally lost me here???

Let me explain on this. Each color is a structure of three values: red (R), green (G) and blue (B), a.k.a. RGB. For 24-bit colors, each value R, G or B can vary from 0..255 (if you haven't figured it out yet, the range 0..255 happens to be 8-bit in size, and since we have 8-bit in red, 8-bit in green and 8-bit in blue, together we have a 24-bit color). Each color can be seen as a coordinate in a 3-dimensional space with axis: red, green and blue. All colors together form a cube of size 255 in the RGB-space. And it is this cube that we want to flatten to a 2-dimensional canvas.

Let's do a quick calculation: imagine we want to display all colors. Using 24-bit, we have 256*256*256 colors. Now if you want do display this on a canvas of width 256 pixels, then the length would become 256*256=65536 pixels. I'm not familiar with your monitor size, but I think it is fair to assume it can't support a length of 65536 pixels. Also, stretching the width of the control won't work here. So displaying all colors is not possible.

So the problem comes down to this: how to display the colors in such a way that the user can select all types of colors, but not all colors.

Again, we are lucky. We don't have to reinvent the wheel. Just look around at other programs (e.g., Paint Shop Pro) on how they solved the problem. Basically, they display a fixed set of six basic colors in overlapping circles on a black and white primary background and have them interact like light, that is, if you mix red and yellow, it becomes orange.

Creating the six basic colors is simple. Three of them can be easily found: red, green, blue (a.k.a. primary colors). The other three are mixed colors and can be assembled using two primary colors.

  • red + green = yellow
  • green + blue = cyan
  • blue + red = magenta

In RGB-values, the primary colors are:

  • red = (255, 0, 0)
  • green = (0, 255, 0)
  • blue = (0, 0, 255)

And the mixed colors are:

  • yellow = (255, 255, 0)
  • cyan = (0, 255, 255)
  • magenta = (255, 0, 255)

Creating a surface of black and white is done using the LinearGradientBrush. Below is the code example for creating the projection surface:

lbrush = new LinearGradientBrush (ClientRectangle, 
         Color.FromArgb (255, 0, 0, 0), Color.FromArgb (255, 255, 255, 255), 0f);
g.FillRectangle (lbrush, ClientRectangle);

Creating circles of a basic color that fade out can be done using the PathGradientBrush, with the CenterColor set to the basic color and the SurroundColors to black.

Now to have the circles act like light on the black and white background, we need alpha-channeling. With alpha-channeling, colors drawn to a surface are merged with the existing color on that surface. To switch-on alpha-channeling, set the CompositingMode of the Graphics instance g to SourceOver before you draw anything!!

g.CompositingMode = CompositingMode.SourceOver;

Also, make sure that every color specified when drawing is a RGB value with an alpha-component specified (a.k.a. ARGB-value). Luckily, the Color class contains a static method FromArgb. Use it with four parameters, the first being the alpha-value and the remaining parameters being the values red, green and blue. Below is a code example to draw the yellow circle. Notice the alpha-values specified.

path = new GraphicsPath ();
path.StartFigure ();
path.AddEllipse (rect);
path.CloseFigure ();
pbrush = new PathGradientBrush (path);
pbrush.CenterColor = Color.FromArgb (255, 255, 0, 0);
pbrush.SurroundColors = new Color[] { Color.FromArgb (0, 0, 0, 0) };
g.FillEllipse (pbrush, rect);

The code above is repeated six times, each time specifying a different basic color and a different location.

Points of Interest

The color map control allows for quick color picking in an easy way. However, finding the same color twice on the map is difficult. For this, a control displaying a palette is more suitable. The drawback: a palette drawn as a grid of colors by definition has fewer colors to select from.

History

  • 2004-12-15 - Initial release.
  • 2004-12-29 - Updating properties ForeColor and BackColor now triggers the associated color changed events.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Ruud van Eeghem
Web Developer
Netherlands Netherlands
No Biography provided

Comments and Discussions

 
Generalan Exception Pinmemberblue_paladin3-Jan-05 19:57 
GeneralRe: an Exception Pinmemberblue_paladin4-Jan-05 20:39 
GeneralRe: an Exception PinmemberRuud van Eeghem5-Jan-05 23:02 
GeneralRe: Grays PinmemberRuud van Eeghem16-Dec-04 4:40 
GeneralGrays PinmemberDejaVudew15-Dec-04 5:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 3 Jan 2005
Article Copyright 2004 by Ruud van Eeghem
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid