A
color palette is the set of colors used in the design and creation of
the website. These colors should be chosen carefully because they will
not only determine the overall look of your site, but they will help
define your brand as well.
Most color palettes consist of between
two and four colors, not including basic colors such as black and white.
If you already have a logo or corporate design, then you may already
have a good idea of the colors you wish to include in your website.
Choosing Your Primary Color
First, choose a primary color. If you already have a logo, choose the main color of that logo. If not, then you will be choosing one from scratch. Take a moment to consider the target audience of your site. Are they young, fashionable, pop-oriented? Perhaps a bright color such as red or purple would be a good choice. If your site is oriented towards corporate clients, then blue is a solid option. Children and families? How about a bright yellow?
A good resource to use when choosing a color is Jason Beaird's book The Principles of Beautiful Web Design.
Creating a Color Scheme
Websites built using HTML and CSS use a relatively limited set of colors that are known as browser-safe colors, meaning they render the same across all browsers. These colors are defined by CMYK numbers (Cyan-Magenta-Yellow-Black) and look like: #4671D5 (Light Blue). Most web-design tools will have a color palette tool that will show you both the color and number.
Traditional designers often use a color wheel - a tool designed to help you select color schemes visually. The most common color schemes are:
- monochromatic - a color scheme based on shades of the primary color
- complementary - a contrasting scheme that uses your primary color plus the opposite color on the wheel
- analogous - your primary color plus two colors next to it
- tetradic - two complementary color schemes combined
- triadic - three colors equally separated on the wheel
Let's take a look at examples of the most common color schemes.
Monochromatic
Here are examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.
Complementary
Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades.
Analogous
Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.
Tetradic
Tetradic color schemes are probably the most difficult schemes to pull off effectively.
Triadic
Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.
The best combination of both tools is an online tool like the Color Scheme Designer. You can graphically choose your colors, select what type of scheme you want, and it will give you the CMYK colors to input into your web-design tool.
Using Good Contrast
It's important to choose background and foreground colors that will provide good contrast between words, images, and backgrounds. For instance, black text on a white background, or white text on a black background make websites easy to read. Orange text on a brown background does not have enough contrast, and will frustrate your readers by making your site hard to read.
Finalizing Your Color Palette
Once you've chosen your color scheme, ensured good contrast between text and background, all that remains to do is to choose any additional tints (lighter or darker shades) of your main colors. These can be used for hovering menu buttons, link text, or shadowing.
Don't overload your site with too many colors, as it will create a loud, clashing experience for your visitors. An About.com poll of two hundred web designers indicated that most prefer between 4 and six colors per site.
A good step once you've got your color palette picked out is to mock-up your site layout and get your team or a friend to look it over. Ask them what impression your site gives. If it's the right impression, then you've done a good job! If not, then go back and tweak your color scheme some more.
A resource I've found helpful when working on new websites is Open Source Web Design, a site with lots of free templates and inspiration. Good designing!
