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!
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:
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.
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!
