raphics are a common way of bringing color into a Web site. Your create your images using your favorite editor, test your color palette on different browsers/platforms, and drop the images into your page. Optimizing Graphicsteaches you how to create high-impact, low-bandwidth images for Web use.
Code, be it through stylesheets or directly within HTML, lets you set display colors directly. Typically you'll use a code-based solution for backgrounds and text colors. Remember, with CSS, you can do many of the text treatments you would once have done only with inserted graphics.
Color Palettes and GIFs
When you're talking about palettes and graphic files, the term takes on a slightly different meaning from the design palette.
A palette is the set of colors that you are using. In your design palette, you'll have maybe three or six colors, selected for the way they work with each other and with the content of your site. As you make your design palette decisions, you might be referring to a color wheel and selecting, say, a triad relationship plus three saturations of each.
As you move into production, this palette must convert to a palette that can be displayed by the computer—that is, it must be displayed using an RGB model, the model that monitors use. Each color will be represented by the amount of red, green, and blue it contains.
With indexed images, like GIFs, this process goes one step further. Each image is indexed to a table of 256 or fewer color palette. This type of palette is also known as a color lookup table. But wait, you say, I have only six colors! Ah, with variations of hue and saturation, not to mention anti-aliasing and edge smoothing and other techniques, your original six colors can quickly become dozens.
You'll save each indexed image file along with its palette, aka, color lookup table. As you save, you can select the type of color lookup table you want to use: adaptive, Web safe, or system. In theory, Web safe contains only colors which are displayable in all browsers on all platforms. In general practice, we find the adaptive palette will give you the best results.
Specifying Color for the Web
You specify color using color names, hex values, or RGB values.
Web pages are viewed on a monitor, so the text and images used in a design will always be displayed in RGB (additive) color. RGB colors are specified by a value that describes the amount of red, green, and blue the color contains. Each primary element in a color can be represented as a number between 0 and 255, resulting in millions of possible combinations of red, green, and blue, like this:
There are four ways to represent these color values to a Web browser:
- By color name, using a common lookup table;
- By hexadecimal (hex) representation of colors, in which values are converted to base 16 where counting is done 0-9 then A-F.
- By RGB value (CSS)
- By RGB percentages (CSS)
For example, here's some aqua text on a black background:
The same two colors can be described as:
- "aqua" and "black"
- #00ffff and #000000
- 00,255,255 and 0,0,0
- 0%,100%,100% and 0%,0%,0%