Color is much more than eye candy in web design. Color affects people in many ways, both consciously and subconsciously. Some colors evoke certain emotions. Some colors represent ideas and traditions in different countries. The colors that make up a web design, in many cases, speak just as loudly as the words they support. Choosing the right colors can strengthen a site’s message and reinforce its goals.
When a visitor lands on a web page, it takes only a few seconds to make a visual impression. That impression can make the difference between securing visitor loyalty and failing to connect with that visitor. With such a short time frame to capture a visitor’s attention, the primary colors of a web site should communicate the emotions and intentions of the site.
Color Temperature
Colors are broadly split into 3 groups: warm colors, cool colors, and neutrals.
- Warm colors: Reds, Oranges, Yellows, Browns
- Cool colors: Greens, Blues, Violets, Pinks, Magentas
- Neutral colors: Blacks, Whites, Grays, and colors containing a lot of gray
Warm colors tend to carry a powerful charge – exciting, bold, and aggressive. They should be used sparingly or in small bursts, unless the site’s message truly exudes such power.
Cool colors invoke a sense of calm in people. They are soothing and relaxing, and can be used more liberally in a design.
Neutrals make good backgrounds, as they don’t themselves put forth much emotional charge, but do complement both warm and cool colors.
See the chart below for typical emotions associated with various colors.
Color Harmony
Choosing a color palette is a work in balancing colors and creating color harmony. Multi-color web sites that mix too many colors are visually chaotic and confusing. Such designs don’t encourage repeat visits. Sites with too few colors are visually boring and fail to make a lasting impression on visitors. Choose a few colors – 2 or 3 major colors – and complement those colors with variations in shades.
Designing Color Palettes
The web offers a wealth of tools for designing color palettes.
- Adobe Kuler is a web application for generating color themes. Create your own, or browse through hundreds of themes contributed by the Adobe community. This site is great for inspiration and ideas.
- ColorSchemer.com offers both a free, online color scheme tool and downloadable tools for Windows and Mac. Using Color Schemer Online, choose the primary color for the web site and Color Schemer will generate mathematically compatible colors. Select from these colors to create a color palette.
For Mozilla Firefox users, there are several add-ons that allow users to pull color schemes from existing web sites and pick color codes from images. Look for these add-ons at Mozilla’s Firefox Add-ons site:
- ColorZilla – a tool for picking colors out of a web site and saving color palettes
- Palette Grabber – a tool that will generate an entire color scheme from an existing web page
With these tools and some basic knowledge of color psychology, it’s easy to design a color scheme that supports a web site’s message and looks good.