Little Known, Invaluable Methods and Properties in the .NET Framework Base Class Library : Working with Colors

By Scott Mitchell

Introduction

In an earlier 4Guys article - Little Known, Invaluable Methods and Properties in the .NET Framework Base Class Library : Working with File Paths - I introduced a number of little known, but highly useful methods for working with file paths. In the previous article I promised to continue forward by introducing additional "little known, invaluable methods and properties in the .NET Framework Base Class Library," asking for suggestions on what methods/properties to touch on. Over the past week I have received numerous suggestions from both the 4Guys feedback form and an associated blog entry. Thanks, and keep those suggestions coming in!

Today's installment will look at methods and properties useful for programmatically working with colors. ASP.NET is a technology that blends together the front-end design (HTML) with the back-end guts (the data store and server-side data models, custom objects, business logic, and so on). Not surprisingly, there are times when we need to programmatically work with the colors that are to be rendered in the user's browser. For example, the Conditional Formatting with the DataGrid FAQ illustrates how to programmatically set the background color for a DataGrid row based on the database values bound to that particular row.

This article examines various methods and properties for programmatically working with colors in a Web application. As always, if you know of any .NET Framework methods or properties you consider not in every ASP.NET developer's lexicon, but should be, please let me know, as each week I plan to add additional useful methods and properties focused in a particular area. This week's tips and tricks focus on working with colors. Read on to learn more!

- continued -

The List...

I plan on adding additional topics to this list. The first topic was Working with File Paths. Today's topic covers working with colors.

Little Known, Invaluable Methods and Properties in the .NET Framework BCL

<-- Previous (Working with File Paths) Working with Colors

Representing Colors 101

If you recall from your elementary school days, the three additive primary colors are red, green, and blue. These three colors, when combined in equal quantities, display white. Each pixel in a computer monitor emits a degree of red, green, and blue colors to display a particular color. On web pages, colors are defined as a mix of red, green, and blue values (the legal values for each of the three additive primary colors being 0 through 255). For example, the color white can be defined as a value of 255 from both red, green, and blue; black is 0 for these three components. Bright red would be a red value of 255, and 0 for green and blue, yellow is 255 for red and green, and 0 for blue... and so on. (There are numerous sites across the web that show RGB definitions of common colors as well as various aesthetically-pleasing color combinations, defined in their RGB syntax; see the VisiBone Color Laboratory for one such example.)
In web pages a color can be defined using one of three techniques:

Using a Compact, Hexidecimal Representation - with this common technique, each of the values for red, green, and blue are encoded into a hexidecimal format. Hexidecimal is a base-16 number system, one that uses the sixteen digits 0, 1, 2, ..., 8, 9, A, B, C, D, E, and F. It's a more compact form of representing numbers (since there are more symbols used) and can represent numbers up to 255 using just two digits. For more on hexidecimal see What is Hexidecimal?
When using hexidecimal, the number is prefixed by #. For example, in hex FF is 255, so to use the color yellow your HTML might look like: <span style="color:#FFFF00" ...>. More generically, we use #RRGGBB, so #FFFF00 means FF for red, FF for green, and 00 for blue. The decimal equivalents are 255 for FF and 0 for 00, which is the color settings for yellow.

Using Decimal Values with CSS - modern browsers support the CSS function rgb(red, green, blue), which allows you to specify the color values for red, green, and blue in decimal notation. For example, to create a yellow-colored span we could use: <span style="color:rgb(255, 255, 0)" ...>.

Using a named color - rather than having to know the color values in decimal or hexidecimal, it would be easier for us, as developers, to be able to just use the color's name. That is, I'd rather be able to do just: <span style="color:yellow" ...>. The W3C CSS standard predefines 16 named colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. However, most modern browsers support many more, such as Coral, DeepPink, YellowGreen, and others.

For more information about colors supported by browsers, be sure to check out the CSS Colors section over at W3Schools, which includes a full list of color names.

Programmatically Working with Colors

A number of ASP.NET Web controls have properties that dictate the color of the rendered control in the user's browser. For example, all Web controls have the BackColor, ForeColor, and BorderColor properties, and all of these properties are of type System.Drawing.Color. The Color structure consists of a number of static properties and methods, along with a handful of instance methods.
The static properties of the Color structure are primarily those that predefine the red, green, and blue components for a particular color. For example, there's Color.Red which, as its name implies, contains the information for the color red. There are also instance properties to determine the red, green, and blue components for a particular color (R, G, and B, respectively). The Color structure contains a few interesting methods we'll look at below...
View the Color structure's technical docs...

Color.FromArgb(red, green, blue) If you know the red, green, and blue components for the color you want to create, you can generate a Color structure instance using the Color structure's static method FromArgb(red, green, blue). For example, to create the color the VisiBone Color Lab refers to as Dark Hard Yellow the RGB values are 204, 204, and 0, respectively. Therefore, to programmatically set, for example, a TextBox's BackColor property to Dark Hard Yellow we could use the following code:

'VB.NET... TextBoxID.BackColor = Color.FromArgb(204, 204, 0) // C#... TextBoxID.BackColor = Color.FromArgb(204, 204, 0);

A couple things to note: by default, ASP.NET will not render a background color for a TextBox for down-level browsers (non-IE browsers), although you can redefine modern, non-IE browsers to be considered uplevel. See A Look at ASP.NET's Adaptive Rendering for more details. For uplevel browsers the TextBox's rendered HTML will be: <input ... type="text" style="background-color:#CCCC00;" />. In particular, notice that the color is rendered as its hexidecimal equivalent, #CCCC00.
Also realize that the FromArgb() method can also accept a fourth integer input as its parameter, the alpha component of the color. The alpha component dictates the transparency of the color. However, this component is not used when working with colors on web pages, so you can use the FromArgb() overload that just requires the red, green, and blue components.

ColorTranslator.FromHtml(string) There may be times where you have a color represented in either the hexidecimal format or as a named color, and you want to work with this color as a Color structure instance. For example, if you are building a site that is cobranded for various clients, you might have a database table that contains cobranding information for each client, including logo images and color settings. In the database you might have color settings expressed in either hexidecimal or named color notation. That is, for one client the page's background color may be specified using hexidecimal notation, such as #EEEEEE, and the text color may be specified using a named color, such as Black.
In your ASP.NET pages you would want to read in these unique color settings and apply them. When assigning these colors to Web controls, however, we have the challenge of converting the string to a Color structure instance, since the BackColor, ForeColor, and BorderColor properties of Web controls expect a Color instance. If the color is a named color we could use the Color.FromName(string) method, but this won't work for colors that use the hexidecimal notation; for those, we'd have to parse out the red, green, and blue components by hand.
Fortunately we don't have to tinker around at this level. The System.Drawing namespace contains a ColorTranslator class that has a static method called FromHtml(string). This method takes as input a string and returns the corresponding Color instance. If the color is a named color that is known, it returns that particular Color instance; if the color is in hexidecimal, the FromHtml(string) method parses the hexidecimal string, picking out the red, green, and blue components and then using the Color.FromArgb() method to create the appropriate Color instance.
The following code snippet shows how to use ColorTranslator.FromHtml(string) to retrieve a Color instance from a given string input.

'VB.NET... LabelID.BackColor = ColorTranslator.FromHtml("#CCCC00") // C#... LabelID.BackColor = ColorTranslator.FromHtml("#CCCC00");

The ColorTranslator class also has a static ToHtml(Color) method that takes as input a Color instance and returns a string for the color in HTML parlance.
View the ColorTranslator technical docs...

Conclusion

There are a slew of methods and properties in the .NET Framework Base Class Library that, while quite useful and versatile, are not well as well-known among the ASP.NET developer community as they ought to be. This article is an attempt in providing information about methods and properties that most ASP.NET developers will find quite useful in real-world situations with regards to working with colors. An earlier article looked at such methods/properties for working with file paths. If you have any recommendations on methods or properties that you find invaluable, but that you noticed not many folks know about, please don't hesitate to let me know!

Happy Programming!

By Scott Mitchell