Color and Web Design

This chapter introduces the basics of color theory, choosing color schemes that work, and good practice when dealing with color on the Web.

 

 

This sample is taken from Chapter 2: "Colors" of the Glasshaus Title "Web Graphics for Non-Designers"

Best Practice

The palette and techniques you use are dependent on your audience and the assumptions you make about them. You have a number of options:

1.  Play it safe; really safe: If your brand and site image is a low priority, and you are looking for a challenge, then working within the 22 colors of the really safe palette might be worth considering.

2.  Stick with web safe: To keep everyone mostly happy, you can work to the web-safe palette. The larger group of 16-bit users will experience some color shifting, but the fewer 8-bit users should be saved from the far less attractive dithering. Dithering occurs when the video hardware of a computer attempts to replicate an unsupported color by using a pattern of two other colors.

3.  Use transparent backgrounds: If your GIF only has to blend seamlessly with one HTML background color, then making the equivalent color in your GIF transparent will remove many typical lines of stitching concerns (since the background color shows through, there is no seam between the HTML color and image color).

4.  Keep GIFs and HTML colors separate: Since the color shifting which occurs for the majority of typical web audiences results from differences in color handling of images and HTML colors, separating the two within your page layout will prevent users from noticing seams. Nevertheless, some of the color shifting will be noticeable to the point that differences are discernible, even when colors are not adjacent. Testing will help you find out which colors are susceptible to this.

For most designs, using the restrictive 22-color palette will not be an option. With that in mind, the most sensible action would be a combination of the remaining techniques.

1.  Where possible, use web-safe colors for backgrounds of pages and tables.

2.  To minimize visible seams, make GIFs adjacent to an HTML background color partially transparent.

3.  When designing, keep in mind that separating GIFs with background colors from their HTML background equivalents removes the possibility of noticeable color shifting.

4.  Know your audience, and design to keep your site attractive for the majority.

Of course, regardless of the method you use you should always test your design on as many platforms, browsers, and color depths as you can. There may be valuable sacrifices you can make with your layout to remove seams and dithering.

PC vs. Mac

Gamma correction can be an issue when designing for the Web, and has a particular effect on the appearance of colors you use. Gamma correction, generally speaking, is a modification to the color saturation and brightness as displayed on your monitor, and can vary significantly from computer to computer. The most notable difference exists between Macintosh and PC computers. Macs usually adjust to a gamma correction factor of 1.8, while most PCs begin with a darker default of 2.5.

So, how does this affect your work? If you are designing on a PC for an audience featuring a majority of Mac users, you should adjust your gamma correction to emulate the default Mac of 1.8. Conversely, if designing on a Mac for a PC-heavy audience, it would be advisable to temporarily bend your gamma correction to something closer to 2.5. Finally, given that most of the people on the Web are using PCs, your gamma for a very general audience should be set to 2.5 also.

However accurate you might believe your gamma correction to be, if you are not designing to best represent your color scheme and image brightness to the majority of your audience, you are contravening one of the web commandments: design with the audience in mind!

Previewing your design with the default gamma correction settings of another platform is a straightforward process. For example, in Photoshop for Windows CTRL-Y allows you to easily toggle between the default and your current proof setting.

1.  You can learn more about gamma correction at: http://cgsd.com/papers/gamma_intro.html

2.  For Mac users, a simple gamma correction toggle is available from: http://www.thankyouware.com/gammatoggle.html

3.  For PC users PowerStrip from EnTech Taiwan: http://www.entechtaiwan.com is a handy gamma correction tool.

LCD vs. CRT

Frequent computer users would be familiar with the differences between LCD and CRT screens used by today's computer users. The difference that first and foremost affects your decisions in creating a site is of contrast. When viewing a Liquid Crystal Display, commonly used in notebook/laptop screens, at the usual angle, near-white colors such as cream, beige, or silver can appear indistinguishable from white. This is rarely a crucial issue, as vital components such as text never appear as light cream on white. It can, however, create unintended effects as cell backgrounds, alternating table row colors, and watermarks disappearing into your background color, and it is something to be aware of. With a vague audience definition, it is unlikely to trouble you, but if you are charged with designing a resource specifically intended for users of laptops, then keep an eye out and be sure to check your color choices on both CRT and LCD screens.

CRT: Soft butter-colored background provides focus for a key headline.

LCD: The focus is lost as the cream background disappears.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.

George is also the founder of Wappler.io - the most Advanced Web & App Builder

See All Postings From George Petrov >>

Comments

Great Tutorial!

December 5, 2002 by Cecilia Martinez

I want to add it to my favorites but I can't find a way to do it!

Thanks!

Cecilia

RE: Great Tutorial!

December 5, 2002 by George Petrov
Just click on the Favorites icon - that is right of the title

RE: RE: Great Tutorial!

December 6, 2002 by Cecilia Martinez
Thanks George! I figured it out once I sent the message  :-)

Great Tutorial

December 7, 2002 by Jeremy Conn
Awesome tutorial... very nice to see a focus on how traditional design skills need to stay important regardless of the medium. Well thought out and arranged.
See all 11 Comments

You must me logged in to write a comment.