Designing with Web-Safe Colors 307
Web Palette
Designing with Web-Safe Colors
Web Design in a Nutshell, eMatter Edition
Combination Images
Images that contain combinations of photographic and flat web-safe colors are a
bit more challenging. Simple graphics with blends or gradients of colors also fall
into this category.
The trick is to allow the photographic portion of the image (where dithering isn’t
such an issue) to keep its adaptive palette while mapping the remainder of the
image to the Web Palette. This was problematic for Photoshop alone; however,
newly available tools designed specifically for creating web graphics have
powerful features for dealing with just these issues. These tools will be discussed
later in this chapter.
Another option is to break these images into separate graphics and optimize each
part appropriately—perhaps even saving photographic pieces as JPEG files. The
pieces can be held together using an HTML table as discussed at the end of
Chapter 10,Tables.
Designing with Web-Safe Colors
If you are creating graphics from scratch, especially graphics such as logos or
simple illustrations that contain areas of flat color, why not use nondithering colors
right from the start? In this way, you can be certain that your graphics will look the
same for all users. The major drawback to this 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. (See the “Color Blenders” section of this chapter
for one approach to overcoming the limited choice of colors.)
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, the 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.
Adobe Photoshop 5.0
Version 5 ships with the Web Safe Colors CLUT file (see the following
section) 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 1.0
ImageReady was created specifically for the optimization of web graphics, so
it’s not surprising that the Web Palette comes preloaded in the Swatches
palette.
Macromedia Fireworks 1.0
As a tool designed for the creation of web graphics, Fireworks has the Web
Palette available in its Swatches palette by default.