Designing with web-safe colors - Web Designing

If you are creating graphics from scratch, especially graphics such as logos or simple illustrations that contain areas of flat color, you can use web palette colors right from the start. In this way, you can be certain that your graphics will look the same for all users.

Figure shows how dithering could have been avoided if the image had used colors from the web-safe palette. Remember, it's the flat color areas where using web-safe colors makes the most difference.

Figure: Designing with web-safe colors prevents dithering

Designing with web-safe colors prevents dithering

The major drawback is that with only 216 colors to choose from (a good 30 of which you'd never be caught dead using for anything), the selection is extremely limited.

The trick is to have the web palette colors available in a Swatches palette or in whatever device your graphics program uses for making colors handy. You should be aware, however, that even if you select web colors for fills, any shades of colors created by soft drop shadows or anti-aliased edges between areas of color will probably not be web-safe.

Tools with Built-in Web Palettes
Not surprisingly, with the explosion of the Web's popularity, the web palette is finding its way into many commercial graphics tools. The web palette is known by many names, including Netscape Palette, Web 216, Browser-safe Palette, Non-Dithering Palette, the 6 6 × 6 Cube, and so on -- but you should recognize it when you see it.

Adobe Photoshop 5+
Version 5 and up ships with the web Safe Colors CLUT file in its Color Palettes directory. These can be easily loaded into the Swatches palette by selecting Replace Swatches or Load Swatches from the Swatches pop-up menu.

Adobe ImageReady (bundled with Photoshop 5.5 and higher)
ImageReady was created specifically for the optimization of web graphics, so the web palette comes preloaded in the Swatches palette.

Macromedia Fireworks
Fireworks also has the web palette available in its Swatches palette by default. In fact, it is difficult to use non-web-safe colors in Fireworks.

Adobe Illustrator 7.0 and higher
Version 7.0 of Adobe Illustrator introduced the ability to work within the RGB color space (instead of being limited to CMYK as in previous versions), so you can color your graphics and even export them directly to GIF format. To select colors from the 216 web-safe colors, select Windows Swatch Libraries Web.

Macromedia Freehand 7.0 and higher
You can select colors from the Websafe Color Library, under Options on the Color Palette. Colors appear with their decimal and hexadecimal RGB values.

Macromedia Director 5.0 and higher
You can find the web palette under the Xtras pull-down menu. Look for the palette called "Netscape."

Macintosh System OS8
MacOS8 comes with an HTML Color Picker in addition to the standard Color Picker. This tool makes selecting web-safe colors extremely easy via slider bars that snap into place at the safe color values. It also translates the colors into the hexadecimal values that HTML and browsers understand.

Pantone ColorWeb Pro
ColorWeb Pro is a Mac-only product that enables designers to select web-safe colors via an addition to the Macintosh Color Picker. It also has printed swatch books that provide Pantone color equivalents for the web palette when you need to coordinate your web page with a printed piece. Another swatch book lists traditional Pantone ink colors, but lists their digital equivalents in decimal and hexadecimal RGB values.

Color Look-Up Tables (CLUT Files)
Photoshop and some other graphics tools save palettes in files called CLUTs (Color Look-Up Table). To make the web palette available in the Swatches palette, you need to load the appropriate web CLUT file using Load Swatches, Replace Swatches, or some equivalent command.

Creating a CLUT file in Photoshop 4.0
Photoshop 5.0 ships with the Web Safe Colors CLUT file in its Color Palettes folder, but Photoshop 4.0 does not. If you are using Version 4.0, it's easy enough to create one as follows:

  1. Convert any RGB image to Indexed Color.
  2. In the Indexed Color dialog, select Web from the Palette pop-up menu. Click OK.
  3. Select Image Mode Color Table. Although the Table pop-up lists Custom as the current option, the table itself contains the 216 browser-safe RGB values.
  4. Click the Save button, and save the color palette. Name it descriptively and save it into Photoshop's Color Palettes folder.
  5. Load these colors into the Swatches Palette by choosing Replace Swatches from the Swatches Palette submenu.

Now you can select from swatches of web-safe colors to fill areas of your graphic. If you don't want to create the CLUT file yourself, you can download it from Lynda Weinman's FTP site, as explained in the following section.

CLUT files for other graphics programs
Many commercial tools that don't ship the web palette in their color selector tools (including Photoshop) allow you to load in palette files. Lynda Weinman, author of a well-known series of books on web design, has created a collection of browser-safe palette files that can be loaded into the following software packages:

Software Package CLUT filename Adobe Photoshop Paint Shop Pro netscape.pal Photo-Paint 216clut.cpl MetaCreations Painter clut (in Painter folder) Macromedia Freehand clut.BCF

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Web Designing Topics