Colors in HTML

The RGB System

The three primary colors used on computer screens are:

1. Red
2. Green
3. Blue

These colors are produced on CRT screens by shooting electron beams in such a way as to cause phosphors behind the glass to glow in one of the three colors. By mixing the colors in different intensities, we get the millions of colors we see.

Bits and Colors

All information in computers is stored in simple on/off switches known as bits. By putting bits in groups of 3, we can represent colors.

• The first bit(s) represent red
• The second bit(s) represent green
• The third bit(s) represent blue

These bits can then be used electronically to turn the electron beams on and off in the CRT mechanism.

In the simplest color sytem, there are only 8 possible color combinations:

Common color systems on computers now represent 16,777,216 color combinations. They do this by representing each of the primary colors with a group of 8 bits. Eight bits allows 256 levels of each primary color. Multiplying 256 x 256 x 256 is what gives us the 16,777,216 combinations.

HTML color notation is set up to let us represent each of these more than 16 million colors using numbers in base 16. In the next section we'll talk about base 16 and why it is used.

For more detail about colors and image representation on comupters, see module D20c.

Computer engineers use the base 16 hexadecimal numbering system, often abbreviated hex. The word comes from Greek, hexa 'six' and deka 'ten' (6 + 10 = 16). Here, we look at why it is used and how to interpret it.

Why Hex?

In everyday life, we use the base 10 decimal number system. But the basic number system in computers is base two, or binary. This is because of mathematician John V. Atanasoff's decision in 1938 to try building an all-electronic computing device using the simplest numbering system available. Base two has only two digits: 0 and 1. These can easily be represented in many devices, and from Atanasoff's successful experiment using vacuum tubes has come our entire world of digital electronics.

Binary numbers are simple but they are clumsy for people to use, because to represent numbers greater than 1, more digits have to be used. Here are a few example, just to give you the picture:

• 2 in our normal decimal system is 10 binary
• 5 decimal is 101 binary
• 10 decimal is 1010 binary
• 100 decimal is 1100100 binary
• 16,777,215 decimal is 111111111111111111111111

You can see that it is very easy to take up a lot of space and get confused!

Computers and humans do best when binary numbers are divided into chunks. The most logical chunks for binary numbers is in powers of two, such as 2, 4, 8, 16, 32... We could make the larger numbers above a little easier to understand by "chunking" into groups of 4, like this:

• 100 decimal is 110,0100 binary
• 16,777,215 decimal is 1111,1111,1111,1111,1111,1111

That's better, but even more bulky. How to compress the notation, and still maintain the groupings of binary digits that are fundamental to the "nybbles" (4 bits) and "bytes" (8 bits) of computer memory and disk storage?

The answer lies in using a number base that is a power of 2 (2, 4, 8, 16, 32). In the 1960s and 1970s, octal (base 8) notation was commonly used. Base 16 is more convenient though, because of the universal division of computer memory into bytes of 8 bits each: two base-sixteen digits exactly represent one byte of memory.

There's only one problem: we don't have 16 digits available! After 9, we run out.

The solution is to take the letters of the alphabet and press them into service above the number 9. The next section shows how this works...

Binary-Decimal-Hex

Here is a chart of the first 16 numbers in three number bases:

Hexadecimal notation is clearly the most compact of the three ways to represent numbers. Here are those larger numbers:

• 110,0100 binary is100 decimal and 64 hexadecimal
• 1111,1111,1111,1111,1111,1111 binary is 16,777,215 decimal and FFFFFF hexadecimal.

It is these six hexadecimal digits that are used to represent the 16+million colors in HTML.

To explore hexadecimal numbering, see Hypersolutions Thinking Hexadecimally, at http://www.hypersolutions.org/pages/hex.html. This includes a built-in converter from decimal to hex and back again.

If you want a quick way to convert numbers to different bases, the Windows calc program can do it. To start the calculator:

• Start > (All) Programs > Accessories > Calculator
• Start > Run and type calc

The program usually looks like a simple calculator, but under the View menu you can change it to look like a scientific calculator. In this view, you can convert numbers to and from Hexadecimal, Decimal, Octal, and Binary, by clicking on a radio-button below the display window (shown in the accompanying figure).

Although it is common for computers to represent 16+ million colors, not all do. What does this imply for the Web?

Why Web-Safe?

Because the Web is intended as a medium for use on all types of computers and monitors, we need to be aware of the limitations of monitor types.

• Some computers are set to show 65,536 colors, and some are limited to only 256. These limits make it possible to save memory space, and...
• In some cases the display technology itself is limited in the number of colors it can show.
• What's more, not all computer brands are set to show the same hues in their limited color displays.

Consequently, we are limited in the colors that we can depend on to appear faithfully on most people's screens. It turns out there are only 216 colors that we can really depend on.

Chart of Colors

The 216 Web-safecolors can be represented by using pairs of hex the digits 3, 6, 9, C and F. Colors that have other digits, or digits not in pairs, aren't Web-safe.

Here's a chart showing the primary Web-safe color system and the hexadecimal codes used to represent them.

The primary colors can be mixed with each other at the five Web-safe levels to get the 216 Web-safe colors. Here are a few samples:

There are also six shades from black to white, with all the digits the same:

You can experiment with Web-safe colors using Dougie's Color Picker: http://www.hypersolutions.org/pages/colorSel.html. This interactive page is fun to use, and gives you a good feeling not only for the colors but how to combine them on Web pages.

Now that we've seen how to create the colors in hex, all we need to know is how to set them in HTML. Colors can be set in both the text (foreground) and background...

Background Colors

Background colors can be specified using the parameter bgcolor="#000000" for several contexts:

• the entire Web page, as part of the <body> tag
• tables, as part of the <table> tag
• rows of tables, as part of the <tr> tag
• cells within rows, as part of the <td> tag

In each case, the parameter looks the same. Here's an example setting the entire Web page background to bright yellow. (Unfortunately, this example doesn't display the correct colors in Netscape!)

Foreground (Text) Colors

Text (also known as "the foreground") is colored in HTML using the style attribute with a color value. Here's what it looks like:

CSS offers a few more choices of how and where to set colors. Let's take a look...

How to Set Colors with CSS

There are four sets of color descriptors in CSS:

• Full hexadecimal numbers
• Abbreviated hexadecimal numbers
• RGB triplets
• Color names

Full Hex Numbers

All the six-digit hex numbers discussed above can be used in CSS - and like HTML, they should have the "#" sign in front.

Abbreviated Hex Numbers

Since all Web-safe colors are represented by pairs of identical hex digits, CSS allows these to be abbreviated by using only one of the doubled numbers. For example,

Complete code example:

RGB Triplets

If you're not comfortable with hex numbers for the colors, CSS lets you mix colors either with percentages or amount or red, green, and blue.

Percentage Triplets

You can specify the amount of red, the amount of green, and the amount of blue by percentage, where 0% is off and 100% is on. Here's our familiar example converted to percentage triplets:

Numerical Triplets

In this method, instead of percentages you can use numbers from 0 to 255. This gives you more precise control than percentages, and corresponds to the actual numbers in the 24-bit unit that represents the pixels. These numbers correspond exactly to the hexadecimal numbers 0 to FF. Once again, the example:

Color Names

CSS recognizes 16 basic color names:

These colors are recommended in the CSS specifications without any precise RGB color assignment, but are generally similar in browsers.

A large number of "designer" colors (my term) are supported by the major browsers, though they are not officially recognized by W3C. You can see a complete list with samples at The Complete Reference: HTML & XHTML, by Thomas Powell.

Where you can Set Colors with CSS

Almost all HTML entities can have color and background-color assigned in CSS. This includes all headings, paragraphs, tables and parts of tables, div, span, strong, em, and numerous other entities. In addition, borders can be given colors.

The text and borders are set using the color attribute, as illustrated in the examples above.

Background color is set using either the generic background attribute, or the more specific background-color attribute.

Border colors follow the same principle, where you can use either the generic border or specific border-color attributes.

This illustrates background and border color options:

Review:

Audience:

Objectives:

When you successfully complete this lesson, you will be able to...

1. Explain the RGB color system used to display colors on computer monitors
2. Explain the hexadecimal color system used to describe colors in HTML
3. Identify and explain the concept of Web-safe colors
4. Identify the syntax for setting background colors in HTML
5. Identify the syntax for setting text colors in HTML

Module W22e:

Author:

Institution: