Understand and Experiment with Color
|
You might not be an artist, but at some point in your life you’ve probably used paints, colored pencils, or crayons. When you sat down before a blank sheet of paper you had 10, maybe 12, colors before you. You experimented, mixed colors, and generally had a great time creating a picture that was uniquely your own. Can you imagine what it would have been like if, maybe in school, your teacher plopped down a box of crayons that had more than 16 million colors? That’s what you have when you work with color in HTML. With that many choices, where do you start? Try starting with the 16 basic colors.
| Note | The figure 16 million (16,777,216, to be exact) derives from the 256 possible “settings” for red, green, and blue—the three colors from which all others are created. If you multiply 256 by 256 by 256, you arrive at 16.7 million. |
Experiment with the Basic Palette
You won’t need to read many books on Web design before you’ll come across the term palette. Artists use this term to refer to the colors they have to work with at any given time. Web designers have a number of different palettes available to them, and only a few need to be covered here. The easiest way to begin working with color on the Web is by using the 16-color basic palette. These colors require no special coding for a browser to recognize them; just type in the color’s name and the browser does the rest.
The basic palette, sometimes called the HTML or Windows palette, is a range of 16 colors, generally based on the colors that Windows makes available as default colors. The top 16 are white, black, silver, gray, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, and purple. Because it’s more fun to actually do something with color rather than just read about it, try setting some (or all) of these colors as background colors on a blank Web page. An added benefit is that you can begin to experiment with Cascading Style Sheets as you change the colors on your page.
To specify these colors as a background for your page, use the following:
-
The color’s name
-
The CSS background-color property
-
The body selector
Note A selector, when used with Cascading Style Sheets, frequently is nothing more than an element’s name. By using the element’s name, you are “selecting” it to be modified. Thus, to apply a color to the entire body of a page, you use the body selector. Selectors can be more complex than just element names, but it’s best to start out simple. For more information, read Chapter 10.
To experiment with the basic palette, open template.htm and save it as colorcompare.htm. In between the <head> tags, add the <style> element. Then add the background-color property, with its value set to blue. Your markup should look like this:
<html> <head> <style> body {background-color: blue} </style> </head> <body> </body> </html> Save the page and display it in your browser. You’ll notice that the screen is a nice shade of blue. Go back into the page and change the color to any of the other color names to see how it displays as a background color.
Mix Your Own Colors
Now that you’ve had a chance to play with a simple, 16-color palette, you’re probably beginning to feel the boredom setting in. After all, the 16 colors that are available in the Windows palette aren’t very exciting, and they certainly don’t give you a lot of variety. Fortunately, with today’s computer systems you have a lot of colors to choose from.
Think of the colors on a computer monitor as being made up from three master “tubes” of paint: red, green, and blue (often referred to as RGB). In this case, the “pigment” is light rather than paint. Any of the 16.7 million colors referred to earlier in this chapter can be created using a combination of those three colors of light. However, because of differences in equipment (older monitors and computer systems have limited display capabilities), the majority of those 16 million colors will be dithered when displayed. Dithering isn’t a great problem in itself, but it does tend to make Web pages look sloppy. If you want to avoid it, you must use browser-safe colors.
| Tip | If you’re not sure what dithering is, just set your computer’s display properties to show only 256 or 16 colors; then surf the Net for a few minutes. Do you see the “speckling” that shows up in most of the graphics? That’s dithering. It’s the computer’s way of simulating a color that it is not able to display. |
Understand Browser-Safe Colors
Not sure what browser-safe colors are? Well, it doesn’t mean that the browser will crash or the computer will explode if you use unsafe colors. It does mean that your Web pages won’t look very good on some people’s systems. The so-called “browser-safe” palette dates back to the time when most computers could only display a maximum of 256 colors. Out of those 256 colors, about 40 colors were either reserved for the Windows and/or Mac operating systems, or they didn’t display consistently on different platforms. That left 216 colors that could be expected to display without dithering.
Browser-safe colors are made up of a very specific mixture of red, green, and blue light. To be browser safe, a color can be made up of combinations of RGB only in the following amounts: 0%, 20%, 40%, 60%, 80%, and 100%. Feeling a bit confused? It’s really quite simple.
Say you want to create a browser-safe shade of red. You could try this formula: Red=100%, Green=20%, Blue=20%. Because you’re using color in the proper amounts, you won’t have any problems with dithering; but what if you decide to create a shade of red with this formula: Red=93%, Green=27%, Blue=14%? The odd percentages mean that the color is not browser safe and is likely to produce dithering when viewed on certain systems.
Now that you understand browser-safe colors, how do you tell a browser to use them? You actually have several different options. You can specify the color using hexadecimal code, RGB percentages, RGB numeric values, or—in the case of the basic palette—the color’s name.
Apply Color with Hexadecimal Code
What is hexadecimal code? In simple terms, it is the base-16 numbering system used by computers. Trying to learn hexadecimal could be very confusing, but for color application, all you really need to know is how to specify the browser-safe percentages mentioned above. Table 4-1 lists the percentages and their hexadecimal equivalents.
Specifying a color using hex code really is quite easy. Just remember that the individual colors you will mix are always red, green, and blue and that they are always listed in that order. To mix the shade of red mentioned in the preceding section, the code would be: 100% red = ff, 20% green = 33, and 20% blue = 33. If you’re not sure where these codes come from, look at Table 4-1 again. It’s important that you understand this.
| Tip | In case you’re wondering why the code for 100% red is identified by “ff,” it’s because hexadecimal code is a base-16 numbering system. Since the base-10 system we use every day does not have enough numerals to cover the extra numbers, letters are used to take up the slack. The numerals of the hexadecimal system are 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. |
You build the color code by combining the codes for the individual RGB values and by adding the pound (or number) symbol in front. Your completed code for a browser-safe red is: #ff3333. Try it out. Open your colorcompare.htm and in the style element, use the background-color property to set the color to your custom browser-safe code. It will looklike this:
<head> <style> body {background-color: #ff3333} </style> </head>
 |
Nowadays, the browser-safe palette should probably be referred to as the so-called browser-safe palette. Because computer displays can be configured to various palettes such as “True Color” and “High Color,” which are figured differently than the 256 color palette, the possibility of dithering on some systems is all but inevitable—even with browser-safe colors. Ultimately, you have to estimate who will be visiting your Web pages and whether some color dithering will significantly detract from your Web site's presentation.
Some online articles and resources about browser-safe color issues that you might find helpful are as follows:
-
The Web Safe Color Dilemma by Lynda Weinman at www.lynda.com/hex.html
-
Death of the Web Safe Color Palette by Dave Lehn and Hadley Stern at http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design
-
All You Need to Know about Web Safe Colors by Gary W. Priester at www.webdevelopersjournal.com/articles/websafe1/websafe_colors.html
-
Web Safe Color Chart by VisiBone at http://html-color-codes.com
|
There are 216 different choices of browser-safe colors, more than enough to give your Web site that distinctive look. Try experimenting with the colors by creating browser-safe combinations from the chart listed in Table 4-1.
| Percentage | Hexadecimal Equivalent | Numeric Value |
|---|---|---|
| 0% | 00 | 0 |
| 20% | 33 | 51 |
| 40% | 66 | 102 |
| 60% | 99 | 153 |
| 80% | cc | 204 |
| 100% | ff | 255 |
| Tip | The author’s Web site, www.jamespence.com, provides a chart of all the browser-safe colors. To see them side by side, go to the site and choose the colorchart.htm file. |
Use the Basic Colors by Code
You also can specify the 16 basic colors by their hexadecimal codes. Table 4-2 lists the colors and their codes together. Notice that half of them do not fit the browser-safe description by using the specific percentages listed in the preceding table (80 is equal to 50% in hexadecimal, and c0 is just less than 80%). However, because they are basic system colors, they are still considered safe to use.
| Color | Hex Code | Color | Hex Code |
|---|---|---|---|
| Black | #000000 | White | #ffffff |
| Aqua | #00ffff | Blue | #0000ff |
| Navy | #000080 | Teal | #008080 |
| Yellow | #ffff00 | Lime | #00ff00 |
| Green | #008000 | Olive | #808000 |
| Red | #ff0000 | Maroon | #800000 |
| Fuchsia | #ff00ff | Purple | #800080 |
| Gray | #808080 | Silver | #c0c0c0 |
Try using one of the basic colors for a background on your colorcompare.htm page. To change your background color to teal, adjust the <body> tag to read this way:
<head> <style> body {background-color: #008080} </style> </head> Now, save the page and view it in your browser. Your background should be teal.
Apply Color with Percentages
Perhaps the easiest way to apply color in your Web pages is by using percentages. In other words, instead of using cryptic hexadecimal code to assign the values of red, green, and blue in your pages and text, you just list the amount of each color you want by percentage. This particular approach can be used only with Cascading Style Sheets, which provides a great incentive for you to learn how to use CSS.
To specify colors by using percentages, you simply need to list the letters rgb, followed by the percentage values you want for each color, like this: rgb(100%,100%,100%). Be sure to note that the percentages are enclosed inside parentheses, and that commas separate the values. And never forget that the colors are always listed in the same order: red, green, and blue—RGB.
To see for yourself how easy it is to assign colors with percentages, try creating a background color that is made up of a mixture of 100% red, 100% green, and 0% blue. You might be thinking what an ugly, muddy color a mixture of red and green would produce. Open the page you have been using to experiment with color backgrounds and change the line in the <style> element to look like this:
<head> <style> body {background-color: rgb(100%,100%,0%)} </style> </head> Now save the page and display it in your browser. Are you surprised? Instead of a muddy mixture of red and green, your page displays a bright yellow background. This is because you are mixing colors with light rather than with pigment.
The primary colors for pigment (paints, crayons, chalk, and so on) are red, yellow, and blue. If you mix them all together, you wind up with black. This is known as additive color mixing because all the colors “add” together as you mix them. However, if you mix the primary colors of light (red, green, and blue), you end up with white. This is subtractive color mixing. The more color you add, the brighter it gets. Thus, if you mix equal amounts of red and green pigment together, you get mud. Mix red and green light and you wind up with yellow! This is a good principle to remember as you experiment with color.
| Tip | For dark colors, use lower percentages; for bright colors, use higher percentages. |
|
Do all of these different color combinations confuse you? Osborne technical editor George Semerenko suggests you just think of your TV set. Semerenko comments, “The colors displayed on a computer monitor work in the same way a large projection color TV set deals with color. Large projection-screen TVs have three color electron guns—red, green, and blue—that pulse a stream of electrons against exact spots on the back side of a tube. The pulses intensify to brighten the colors that appear on our TV screens in the same way colors are determined by the HTML code.”
|
Apply Color by Using Numeric Values
Another alternative for applying color is using the numeric value of the color. If you recall from earlier in the chapter, red, green, and blue each have 256 possible values or “settings.” These numeric values begin at 0 (0%) and go through 255 (100%). If you’re having problems visualizing this, imagine that you have a red, green, and blue light, each wired to a dimmer switch that has 256 “notches.” A setting of 0 means the light is off. A setting of 255 means the light is as bright as it can be.
To assign colors using numeric values, you write your style rule the same way you do for percentages—with one very significant change. When using numeric values, you drop the percent symbol after each color value. If you wrote the preceding example with numeric values, the markup would look like the following listing:
<head> <style> body {background-color: rgb(255,255,0)} </style> </head> | Tip | If you want to use Web-safe numeric values for colors, Table 4-1 lists these for you. |
|
EAN: 2147483647
Pages: 126