Accessories for Drawing: The Color


Colors Fundamentals



The color is one of the most fundamental objects that enhances the aesthetic appearance of an object. The color is a non-spatial object that is added to an object to modify some of its visual aspects. To support colors, the GDI+ library provides the Color structure. The Color structure is defined in the System::Drawing namespace.


Color Composition

A color is created as a combination of four 8-bit values. The first value is referred to as alpha but it is mostly used internally. The second is called red. The third is called green. The fourth is called blue:

7 6 5 4 3 2 1 0
7 6 5 4 3 2 1 0
7 6 5 4 3 2 1 0
7 6 5 4 3 2 1 0

Converted to decimal, each one of the red, green, and blue numbers would produce:

27 + 26 + 25 + 24 + 23 + 22 + 21 + 20 

= 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1

= 255

Therefore, each number can have a value that ranges from 0 to 255 in the decimal system. The alpha section is reserved for the operating system. The other three numbers are combined to produce a single value as follows:

23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0
Blue Green Red

Converted to decimal, this number has a value of 255 * 255 * 255 = 16581375. This means that we can have approximately 16 million colors available. The question that comes to mind is how we use these colors, to produce what effect.

You computer monitor has a surface that resembles a series of tinny horizontal and vertical lines. The intersection of a horizontal line and a vertical line is called a pixel. This pixel holds, carries, or displays one color:

As the pixels close to each other have different colors, the effect is a wonderful distortion that creates an aesthetic picture. It is by changing the colors of pixels that you produce the effect of color variances seen on pictures and other graphics.

To make color selection easier, the Color structure is equipped with various properties that each represents a name for a color. Therefore, to use any of these colors, call the Color structure followed by the "::" operator, followed by the desired color. All the popular names of colors are recognized and they are represented in the Color structure by static properties. These include Red, Green, Blue, Black, White, Yellow, Fuchsia, Silver, Gray, Brown, and Khaki, etc, just to name a few. There are many other colors that are not necessarily popular. Here is an example:

System::Void Form1_Load(System::Object^  sender,
				 System::EventArgs^  e)
    BackColor = Color::Turquoise;

If none of the pre-defined colors suits you, you can define your own color as a combination of red, green, and blue values. To create a color using this approach, you can declare a variable of type Color. To specify the characters of the color, the Color structure provides the FromArgb() static method overloaded in four versions as follows:

    static Color FromArgb(int argb);
    static Color FromArgb(int alpha, Color baseColor);
    static Color FromArgb(int red, int green, int blue);
    static Color FromArgb(int alpha, int red, int green, int blue);

The third version, which is the most used allows you to specify three values that each ranges from 0 to 255. Here is an example:

System::Void Form1_Load(System::Object^  sender,
				 System::EventArgs^  e)
    BackColor = Color::FromArgb(26, 69, 174);

This would produce:


Whether a color was initialized with one of the Color pre-defined color properties or using the FromArgb() methods, if you want to retrieve the red, green, and blue values of a color, you can use the R, the G, or the B properties to extract the value of each. Each one of these properties is of a byte type. Alternatively, you can call the Color::ToArgb() method. Its syntax is:

    int ToArgb();

This method returns an integer.

The Color of a Pixel


Setting the Color of, or Painting, a Pixel

In our introduction to GDI+, we saw that the screen of a computer monitor uses a series of horizontal and vertical lines, the intersection of two perpendicular lines is a pixel. Each pixel holds one color. Of course, two adjacent pixels can hold the same color or each can hold a different color.

A bitmap is a series of colored adjacent pixels. Put another way, for a group of pixels to be considered a bitmap, these pixels must constitute a group. A bitmap is made by specifying the color of each pixel. This means that the pictures we have used so far were simply made of pixels and each pixel held an appropriate color.

If you decide to create or design a picture using the tool resources in Microsoft Visual C++ available from the Resource View (or the Solution Explorer), you would experiment, on a large scale the ability to specify the color of each individual pixel, using (a limited list of) colors:


Actually, when you have a bitmap, you can access any pixel of the picture and then you can either specify its color or get its current color.

To allow you to specify the color of a pixel, the Bitmap class provides a method named SetPixel and its syntax is:

    void SetPixel(int x, int y,	Color color);

The x and y arguments represent the left and top values of the location of the pixel. The 3rd argument specifies the new color that the pixel will hold. Here is an example:

System::Void Form1_Paint(System::Object^  sender, 
	System::Windows::Forms::PaintEventArgs^  e)
    Bitmap ^ bgDrawingArea = gcnew Bitmap(Width, Height);
    e->Graphics->DrawImage(bg, 0, 0);

    for(int i = 0; i < Width; i += 20)
	for(int j = 0; j < Height; j += 20)
	    bgDrawingArea->SetPixel(i, j, Color::White);
	    Graphics ^ painter = Graphics::FromHwnd(Handle);
	    painter->DrawImage(bgDrawingArea, 0, 0);

To know the color of a pixel on a picture, you can call the Bitmap::GetPixel() method whose syntax is:

    Color GetPixel(int x, int y);

The x and y arguments represent the left and top values of the location of the pixel whose color you want to get. This method returns the color of that pixel. 

Getting the Color of a Pixel

We previously mentioned that a picture was a series of pixels with each pixel holding a color. As opposed to specifying the color of a pixel, you can retrieve its color. To support this, the Bitmap class is equipped with a method named GetPixel. Its syntax is:

    Color GetPixel(int x, int y);

As you can see, this method takes two arguments that represent the Cartesian coordinates of the pixel. The method returns a Color value.


Home Copyright © 2010-2016, FunctionX