Web Color Technology

You've already become familiar with color management methods for the computer screen. The one emphasized as a starting point for Web-based color is RGB (or red, green, blue) color management.

To effectively work with color on the Web, however, you have to take RGB a step further and convert it into a system of values HTML will recognize. This system is known as hexadecimal.

Hexadecimal, referred to simply as "hex," is the base-16 number system. Base-16 is an alphanumeric system, consisting of both numbers and letters in combinations that translate into a color. Hexadecimal uses the numbers 0 9 and the letters A F. All hexadecimal color values should contain a total of six characters for HTML to understand it. The first pair in the series of six equals the amount of red in the color; the second pair equals the amount of green; and the third pair equals the amount of blue.

TIP

If at any time you get a single character in hex conversion, such as a single 0 or letter D, simply enter a 0 before the hex character so that the resulting binary information will be accurate.


Remember your computer science classes way back when? A single byte is made up of 8 bits of information. Every two characters within a hex value makes up one byte, or 8 bits. This means that each hex value contains 24 bits of color information.

It's no accident that RGB color is also known as 24-bit color.

How do you find the hex value of RGB colors? You're in luck. FrontPage automatically does the conversion and shows you these values when you select a color.

Imagine Web design without all these tools and having to do these things by hand. Now you know why your authors are such fans of FrontPage.

Using Hex Color Values

If you examine HTML code, you will find places where colors are specified in hex values. These are easy to identify because they begin with the # sign followed by six characters.

Although FrontPage uses the standard Windows color selector dialog box, an additional dialog box shows a range of colors useful on the Web. This is the More Colors dialog box, and it also shows the hex values for all the colors (refer to Figure 43.1).

You can use these hex values to replace the hex values in the HTML code to change colors manually. To find the hex value for a color, follow these steps:

  1. Find one of the many color selection dropdown lists through FrontPage, such as the ones in the Page Properties dialog box on the Background tab. You can access this directly by selecting the Format, Background menu.

  2. Clicking the Background dropdown list opens a small popup menu showing the Standard Colors, Document Colors, and a link to the More Colors dialog box. Figure 43.2 shows these options. Click the More Colors option.

    Figure 43.2. Choose a color or click More Colors in the Background dropdown list in the Page Properties dialog box.

    graphics/43fig02.gif

  3. The More Colors dialog box presents a hexagonal array of colors (see Figure 43.3). Select a new color by clicking it.

    Figure 43.3. The More Colors dialog box shows the hex value for each color.

    graphics/43fig03.gif

  4. The hex value for this color is shown in the Value field at the upper right. Remember to drop the commas when using the hex value in code.

NOTE

A select few colors have familiar names associated with them. When a color in the More Colors dialog box shows a value in the Name field, that color can be specified within HTML code by that name. These names include blue, cyan, lime, fuchsia, yellow, red, maroon, white, silver, gray, and black.


Browser-Based Colors

If your pages were all text and your users never had to download any graphics, your pages would load very quickly. Would you sacrifice speed for visual attraction?

The answer: probably. But it doesn't mean that you can't use color to create a rich base for the graphics you will use. What this does is offer the opportunity to have faster loading pages because you're using fewer graphics to achieve visual appeal.

Smoke and mirrors? Hardly! But if you understand how to tap into the colors native to your browser, you will have stable, attractive splashes of color before a graphic is ever downloaded.

To make this happen, you must understand the Web safe palette. This is a palette of 216 colors that are reserved by browsers on the Macintosh and Windows platforms for immediate access. Instead of having to download information from a remote server, the browser parses the hexadecimal color codes from the page right away.

Does this sound great? The FrontPage creators are one step ahead of you. The colors in the hexagonal array within the More Colors dialog box just happen to be these 216 colors.

The Safe Palette

A safe palette is the palette made up of 216 colors that remain as stable from one browser to another, between platforms, and at various monitor color capacities and resolutions as possible.

TIP

In some cases, the term "safe palette" can be a bit of an overstatement. If you've ever looked at an old monitor days away from death or surfed the Internet on a black and white Palm pilot, you know that these graphics are anything but as the developer originally intended. Remember that not everyone is surfing with the monitor power that you have.


You should use the safe palette in most instances because it ensures cross-browser, cross-platform stability. If you use colors outside the safe palette, you can run into serious problems.

Picture this? You choose a soft, pale blue color for your background and a very dark blue for your text. Enough contrast exists to be readable, and you're happy with the look of your hard design work done on an upper-end machine capable of full 24-bit color.

You put your page up on the Internet, and along comes a friend to check out your work. He gets to the page and sees that you've chosen a bright peacock blue for your background and a very similar color for your text. He can't read the content on your page, and he's confused.

How did this happen? Well, you didn't use safe color. Your friend came along with a more limited set of hardware and software, and his color management system chose to dither the colors. This means that his computer grabbed the first blues available because it couldn't identify your unsafe color.

To avoid this, you must choose from the safe palette. It might seem that 216 colors is a very limited number, and it's true. My only words of solace are to encourage you to be creative. Enough colors are available within the safe palette to create beautiful designs it's done every day on the Web.

NOTE

If most color systems can display at least 256 colors, how did the safe palette end up with only 216? It's a complicated story that involves older versions of Windows having reserved colors for the operating system that were different from the reserved colors on the Macintosh. Browsers then went on to use just the available colors to avoid the problem, and the end result was a limited palette. The good news is that the 216 color palette is very stable and addresses many problems that occur across platforms something over which Web designers can breathe a sigh of relief.


To work effectively with the safe palette, you must draw from all the information covered in this chapter. Beginning with what you know of color, you can think about the look-and-feel and emotion you want to express on your site.

Let's say that you want to create a warm and welcoming personal presence that expresses your personal energy. Begin by selecting colors that are warm as well as vibrant: orange, red, and yellow. Then find an appropriate combination of hues: You want the site to be harmonious, not discordant. The harmony of colors will help express the welcoming and personal presence, offering comfort while still conveying energy.

Turn to your understanding of RGB and hexadecimal values. Add to that the fact that you know you want to choose your colors from a safe palette, and you've narrowed down your choices to a very specific set of colors.

What you can do at this point is create what is called an individual palette, which is a selection of five to seven colors you choose from the safe palette.

FrontPage offers an easy way to keep track of the colors you've selected. In the dropdown menu on any color selector is a section of Document Colors; these are the unique colors you've chosen for this document. By examining these colors and checking the harmony between them, you should be able to tell which colors need to be changed.

So where do you go from here? By using the hexadecimal values in combination with HTML and Cascading Style Sheets, you can employ your colors to create a design. Be creative, combining your colors for backgrounds, links, text, and table cells.

NOTE

As computer display technologies get better and better, the rising majority of users have video displays that are simply capable of handling a much wider range of colors. As these numbers continue to rise, the importance of the Web safe palette decreases.

As a result of these significant changes in technology, it is important to point out that a lot of professional Web designers are now ignoring the Web safe palette.


For more information CSS and Web design, see "Using Style Sheets to Format Web Pages," p. 385.




Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net