Coding Color for the Web

If you're using a WYSIWYG (What You See Is What You Get) webpage design tool, you can select colors from a pallet. But what if you're coding by hand, or what if, as a professional, you want to know exactly how colors are specified for webpage elements? Let's start by learning the difference between using HTML attributes and using style properties.

Using HTML Attributes

HTML defines the visual elements of a webpage using tags. All html tags consist of the tag identifier enclosed within < and > characters. For example a paragraph is defined by the tag <p>. XHTML is very similar to regular HTML except all tags must be closed. To close a <p> tag, you would follow the paragraph's text with a </p> tag.

HTML tags can have attributes. Attributes allow you control specific visual features of the HTML element. For example, the entire background of a webpage is enclosed within <body></body> tags. The background color of the body can be set using the bgcolor attribute in the body opening tag as shown below.

There is however a small problem with using HTML attributes to control color. For one thing, not all HTML elements recognize any given attribute. In fact very few HTML elements recognize the bgcolor attribute. For another thing, many HTML attributes are deprecated. Deprecated means the W3C ( World Wide Web Consortium) does not recommend their use because they may not be supported in future browsers.

Using Style Properties

The fact is, the W3C would like to get rid of all HTML attributes in favor of style properties. Style properties are a feature of CSS (Cascading Style Sheets). Shown below is an example of setting the background color in the <body> tag using style properties.

The example above uses inline style, that is, the style properties are set right in the HTML element's opening tag. Style can also be set using a block of code embedded in the <head> section of the webpage, or in a separate file which is linked to the webpage. Shown below is an example of setting the same property in a code block.

<style>
p
{
background-color: blue;
}
</style>

The code block shown above, if placed within the head section of the webpage, would set the background color of all paragraphs on the webpage to blue. But it would apply to only the page with the embedded code block. To set a style to apply to all paragraphs on several pages, you would need to place the style code in a separate file and link it to each page using link code similar to that shown below.

Using Color Names

Whether you set color using HTML attributes or style properties, there are several different methods you can use ot define the color; color names, decimal numbers, or hexadecimal numbers. Of course, if you are setting a basic color like white, blue, or yellow, it's easiest to just use the color name. But what if you want to set the color to mediumslateblue?

The fact of the matter is that not all web browsers recognize the color name mediumslateblue, and if a particular web browser does recognize the color name mediumslateblue, there's no guarantee that a different browser will display exactly the same color for mediumslateblue. The only way to define a color exactly is to use either decimal or hexadecimal numbers.

Using Decimal Numbers

A particular browser may not recognize a particular color name. It's more reliable to specify colors with an RGB triplet. An RGB triplet specifies a color based upon the amounts of red, green, and blue, on a scale from 0 to 255, required to create the color. For example, to create the color cornflowerblue you need red=100, green=149, and blue=237. Shown below is how you would use the RGB triplet method with the HTML bgcolor attribute.

Good luck with this. As I stated earlier, very few HTML elements recognize the bgcolor attribute, and even if a particular browser does recognize the bgcolor attribute, there's no guarantee it will recognize the rgb method being used with that attribute. A better way is to use style properties as shown below.

However, today there are dozens of different web browser devices in use and there is no guarantee that a particular device will recognize the rgb method.

Using Hexadecimal Numbers

If you want to guarantee a specific color on all web browser devices, then you have to set the color with styles, and you have to set it using the counting system that computers use: hexadecimal.

Whereas the decimal numbering system uses the characters 0 through 9 to get 10 different values, the hexadecimal numbering system uses the characters 0 through f to get 16 different values. (After 9 the characters a, b, c, d, e and f are used, as shown below.)

Decimal Hexadecimal Equivalents

decimal	hexadecimal
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	A
11	B
12	C
13	D
14	E
15	F

On first appearance, this looks pretty simple but you need two hexadecimal characters to represent all decimal values from 0 to 255. When you increment decimal 9 by 1, you change the 9 to 0 and put 1 in the ten's place. When you increment hexadecimal F by one, you change the F to 0 and put 1 in the "sixteens" place. Sometimes it's not easy to convert between decimal and hexadecimal in your head.

RGB Triplet for Cornflowerblue

	decimal	hexadecimal
red	100	64
green	149	95
blue	237	ED

We could then specify the background color in the tag using hexadecimal notation as shown below.

Note that when we indicate the use of hexadecimal notation by placing a pound (#) sign in front of the number, and we don't use commas to separate the color components.

If it's not easy to convert between decimal and hexadecimal in your head, then how do you do it? You can use a calculator that has a decimal to hexadecimal conversion function, or you can learn to think in hexadecimal. For example, what's the next number after CE? That would be CF. what's the next number after CF? That would be D0. Which hexadecimal number is higher 99 or B2? B2 would be higher than 99. It gets easier with experience.

Learn more at amazon.com

More Graphics Design Tips:
• Draw Bezier SVG Drawing Application
• Inkscape Text Kerning
• Tips For Hand Coding MathML
• SVG Image Clipping
• Getting Started with Blender
• Example Code for X3Dom Basic Primitive Shapes: Box, Sphere, Cylinder, Cone, and Torus
• Inkscape: Combine the Paths of Multiple Shapes
• How to Make a Simple Animated Banner in Flash CS3
• Inkscape Basics
• Inkscape - Free Vector Graphics Illustration Package