Working with color for Web Pages:

Color Palettes and Depth

Working with color Palettes

As we saw in the last tutorial, the color palette is the set of colors a file can choose from. If the file can use the full range of 16.7 million colors, its palette is unlimited. Otherwise it's limited to what the file format supports: the GIF format, for instance, supports a 256-color palette.

If the file is saved in a format that uses a limited palette, you won't be able to use many of the best features of your graphics program. Options such as drop shadows, blurring and many other special effects and filters need to have access to the full range of colors.

That doesn't mean you can't add drop shadows or special effects to a GIF file. the trick is to create your image in the paint programs's native format (Paintshop Pro's is called PSP and is the format automatically chosen if you create a new image) using the higher color depth and then reduce the color depth when your image is finished. If you're editing an image already in GIF format, you increase the color depth temporarily, and decrease it again to save the final version of the file.

To increase/decrease the color depth in Paint Shop Pro, choose the Colors menu, then Decrease/Increase color depth.

How to Build or Select a Palette

You can associate a new or existing file with the exact palette you want in a number of ways:

You can load an indexed (or GIF) image into your graphics program. Having done so, the palette associated with that image will be available to you.

You can save a palette to disk from a GIF image and then load it into a different (or a new) image. To do this, load the image whose palette you want to save, then choose from the menu bar Colors -- Save Palette. Choose which folder to save the palette in, and give it a name (the default is the name of the image it came from). Its file extension will be .pal. Then open a new image, or the image you want to use the palette in, and chosse from the menu bar Colors -- Load Palette. Choose from the disk the palette you want.

You can build a palette color by color. You can open up the palette and add, edit or remove colors from it. To do this in Paintshop Pro 5, choose Colors -- Edit Palette from the menu bar. You get a window like this (this one shows the colors of the palette of an existing image):

Double-click on one of the colors to get the color-editing window, which looks like this:

You can now change the color you double-clicked by moving the cursor in the square-within-the-circle, which gives you a different hue around the same basic color. As you move the cursor, the RGB and hue -saturation- luminance values displayed change to match the color you're moving over. You can also type RGB values in directly.

Changing the colors you're currently working with:

The graphics program allows you to work with two colors at a time. These are called the foreground color and the background color.The foreground color is applied to your graphic using the left mouse button, and the background color, using the right button. The background color is the one that will fill the canvas when you start a new image.

In Paintshop Pro the right-hand bar of the main window displays color information and gives access to the current image's palette. At the top of the bar there's a picture of a spectrum, and underneath it there are two overlapping squares. The top square represents the current foreground color and the bottom square represents the current background color. Clicking on either of these squares will bring up a dialog box called "Select color from palette" but virtually identical to the "Edit Palette" dialog box shown above. You then click on a color and on "OK" to select a new color, or double-click on a color to edit it.

You can switch the background and foreground colors by clicking on the little double-headed arrow that points to them both.

Types of Palettes

The system palette is a 16-color palette containing the colors the operating system (Windows or MAC) uses. These are the colors used for icons, wallpapers, cursors, etc. They have to be part of every other palette.

The exact palette is built from the colors currently being used in an image.

If you start a new image in the GIF format, its palette will contain only the colors you've actually used (all the rest will be, usually, white, or else black). This is automatically an exact palette. But if you open an image in another format which uses more than 256 colors, e.g. a JPEG image, and save it in GIF format, some (perhaps many) of the colors actually used will have to be discarded. The program will either choose the nearest available color, or it will dither the color, i.e. mix pixels from two similar colors to give the eye the impression of the color which does not actually exist in the palette. Sometimes this works and sometimes it creates a speckled effect. For instance, the screen shot of the color-editing dialog box, above, could not be saved in GIF format without dithering, and some of the colors look speckled on-screen as a result.

An adaptive palette is what most web browsers will use when loading an image that doesn't fit their own color palette. If there are pictures in the same Web page (or even different Web pages accessed one after the other) that use radically different color-schemes and therefore have very different palettes, the browser will not be able to display all the colors at the same time. It will therefore dither the colors. Very often the result is absolutely terrible, such as strange neon-like effects in some or all of the pictures.

A basic rule of Web design is therefore always to use the same palette for graphics that are to be displayed on the same or adjacent Web pages. In its most stringent form, the rule is: if you want to be absolutely certain that everyone will see the true colors of your graphics without dithering, use the Web Palette.

The Web palette consists of 216 colors that, if used when constructing your images, will display your images exactly the same no matter what platform they're being displayed on. This is because it's the internal palette dreamed up by Netscape and later adopted also by Microsoft Internet Explorer for displaying images. It actually contains 216 colors, leaving 40 for the system palette and the browser palette.

These 216 colors are made up of 6 values of each of the 3 basic building blocks, Red, Green and Blue (6 x 6 x 6 is 216). The 6 values are: 000, 051, 102, 153, 204 and 255. In hex codes, they look much more logical: 00, 33, 66, 99, CC, and FF.

So you can look at an RGB number or hex code and know whether the color is in the Web palette or not, but there's a better way. Paintshop Pro 5 comes with a Web palette provided, and I've also included one (called netscape.pal) in the library of graphics included for the use of participants in this course. In addition, Lynda Weinman has made available a table illustrating the Web palette. Load the Web palette into every image you make, and your colors will be limited but not speckled, even on screens limited to 256 colors.

The one real limitation of the Web palette is pale flesh tones: the nearest is one pale beige-brown. All the rest cause dithering. You can draw black and brown skin-tones, but if you try for Caucasian, your people are apt to appear on 256-color screens looking as if they had measles.