Using Color on the Web

Using Color on the Web

In the past, you had to be very conscious of what colors you used on the Web. Some computer monitors were limited in the number of colors they could display. Nowadays, color monitors are much more advanced and can handle a full range of colors, so images on the Web are much more likely to be properly displayed.

Technical Stuff 

It doesn’t have to do with color, but Macintosh and Windows computers usually display your work differently because of gamma differences on these machines. Generally speaking, colors on a Mac appear lighter, and colors on a PC look darker. You can account for this difference by making a Mac version of your site, videos, and so forth, look darker so both are the same (or you can make the Windows version lighter), but these changes aren’t usually necessary.

Even though most computers can handle a full range of colors, you should still take into account color limitations if you’re designing a site specifically targeted at old computers or a certain user base. Older computers might only handle 256 colors, which means that any other colors used are approximated, which can look poor. If it’s likely that your site will be viewed by users with older computers, consider the following:

  • Use a Web-safe palette of 216 colors to design your Web sites so that you specifically design with those older displays in mind and know what the pages will look like. This number is 216 instead of 256 because the lower number is compatible with both Mac and Windows computers. This palette is usually called the Web-safe palette or Web-safe RGB and can be accessed from the Swatches palette menu in Photoshop and Illustrator.

  • Avoid using gradients whenever possible because they use a wide range of colors (many unsupported in a limited Web palette).

  • If a color is approximated because it cannot be handled by someone’s computer, that color is dithered — the computer tries to use two or more colors to achieve the color you specified, causing a typically displeasing granular appearance. So a limited number of colors can have a negative affect on an image; notice the granular appearance on what should be a clear sky in Figure.

    Click To expand
    Figure: The sky is dithered!

If you keep the preceding elements in mind, you should be ready to start designing for the Web! Remember also that you don’t have to worry about using the Web-safe palette if you’re designing primarily for modern computers.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows