NWE Help: Graphics: Color: Controlling Color

NWE Home :: Help :: Graphics :: Color

Have you ever worked with a web image that looked great in the graphics program you were using, but looked awful once it was saved in GIF format? You're not alone. When you save an image as a GIF, the graphics program transforms your image from 24-bit mode, which handles information for millions of colors, to 8-bit mode, which allows only 256 colors. To simulate colors not included in the 256-color range, the program creates clusters of different-colored pixels in a process known as dithering. Some dithering is fine and can even be helpful in some cases, but it also can turn what once had been a nice, flat color into a speckled mess. To compound matters, only 216 of the 256 8-bit colors are recognized across all Web browsers, monitors, and computer operating systems.

When working with GIFs, it's a good idea to make sure the dominant colors of your image match the Browser-Safe Color Palette as closely as possible. In the NWE, the best way to manage colors is in the XV image editor.

The color editor in XV allows you to adjust individual colors in your image by changing the numerical values of red, green, and blue, the "primary colors" of computer graphics. In RGB mode, each of the three basic colors is assigned a value from 0 to 255. For example:

R (255) + G (255) + B (0) = Yellow

R (255) + G (0) + B (255) = Violet

If you do the math, you will find that there are millions of possible color combinations. With all those colors to choose from, matching the colors of your image to the 216 in the browser-safe palette may seem an impossible task. Luckily, you can find the numbers you need by performing some simple calculations. The chart below matches numbers in the RGB color scale with corresponding values in hexadecimal code, which is used to designate colors in HTML.

RGB-Hex Conversion Chart
RGB	0	51	102	153	204	255
Hex	00	33	66	99	CC	FF

According to the chart, the hexadecimal equivalent of RGB (255,255,0) would be #FFFF00; both describe the same shade of yellow. If you look at the Browser-Safe Color Palette, you will notice that every color on it can be described using the alpha-numeric characters listed above. Once you know the corresponding RGB values, it will be fairly easy to use XV's color editor to make the colors in your image more web friendly.

(If you are not familiar with XV, we suggest you read the XV help documentation before continuing with these instructions.)

After you load your image into XV, select the "Window" button on the control panel and "Color Editor" from the menu. An editing window like the one below should appear.

Notice that the RGB controls, which are magnified on the right, show that the image is using colors outside the Browser-Safe Color Palette. While these colors may look fine on your computer, they might look terrible on someone else's. To change the blue background on the image to a web-safe color, we adjusted the dials to reflect values on the RGB-Hex Conversion Chart.

You can change the RGB values in the XV color editor by dragging the "needle" around the dial using your mouse or by clicking on the arrows below each dial. Note that the notches on each dial fall into five groups and that the lines defining each group correspond to the browser-safe values of 0, 51, 102, 153, 204, and 255. If your image contains a series of nearly identical shades, you can change them all to the same color with a few clicks of the mouse using XV's Color Map Editor. When you have changed the colors to your satisfaction, select the "apply" button to make your changes permanent.

The image on the left below shows the RGB controls after the background color has been changed; the one on the right shows the image with its new Web-friendly colors.