Menu
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.

<body bgcolor="blue">

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.

<body style="background-color: blue;">

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.

<link type="text/css" rel="stylesheet" href="stylesheet.css" />

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.

<body bgcolor="rgb(100,149,237)">

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.

<body style="background-color:rgb(100,149,237)">

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

decimalhexadecimal
00
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F

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

 decimalhexadecimal
red10064
green14995
blue237ED

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

<body style="background-color:#6495ed">

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:
• SVG Matrix Transform Example Code
• Inkscape Rectangles and Squares Drawing Tutorial
• SVG Code for Outlined Letters Text
• Getting Started with Krita
• Building an Image with a Logo
• Use GIMP to Scale (Resize) an Image
• Inkscape Text Kerning
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects
• CSS Button Designer
• Inkscape - How to Use Bitmap Image Fill Pattern