Color is used to attract attention, group elements, indicate meaning, and enhance aesthetics.

The use of color in a design can completely change the meaning or idea that you are trying to convey. Color has a lot to do with aesthetics.

You can have the most visually appealing layout and when you add a deep blood red background to the mix, completely destroy your chances of success.

The first thing to understand when dealing with color is how much color should be applied. In web design, I tend to work with about three main colors. The most that the human brain can process at a time is about five different colors, so you would never want to use more than that.

There is a term tossed around the design community on a regular basis, “Less is more”. This is especially true when dealing with color.

So, how do you select the right colors for your project? Beyond that, how do you ensure that your colors work well together? The easiest foolproof way to achieve a proper balance in your color choices is by using adjacent color combinations.

When I start a new project and nail down my main color, I’ll open a web browser and go to Kuler.com. This is a free tool provided by Adobe. It allows you to set your main color and play around with different color combinations. It’s not an exact science; you kind of have to have an eye to know which colors are terrible combinations and which ones work.

A good rule of thumb though, is to select colors that are analogous or complementary. Use warmer colors for the foreground elements and cooler colors for the background elements, hence why blood red is a terrible choice for your background. If you aren’t sure which color combinations work, Kuler.com has hundreds of pre-mixed colors that designers have marked as favorites.

Each color that you choose for your design project has an impact on the user and can be the difference between an increase in sales or a large drop-off rate.

Warm Colors

Warm colors are colors that are associated with warmer temperatures. They include red, orange and yellow. They are the colors of the sun and fire and they are passionate and positive colors.

RED (Primary Color)

Red is associated with fire, violence, and warfare. It’s also associated with love and passion. Interestingly enough, the color red can actually cause a physical effect on people, raising blood pressure and respiration rates. Red can also be associated with importance. In design, red can have a powerful overwhelming effect if it’s used too much.

ORANGE (Secondary Color)

Orange can be associated with the earth and autumn. Orange is often used to represent change or movement. It is also sometimes associated with health. You can use orange to draw your users attention without being as bold as it would be with the color red.

YELLOW (Primary Color)

Yellow is very difficult to work with in design. Yellow is one of the brightest colors and it is associated with hope and happiness. The use of bright yellow gives off a feeling of happiness or joy.

Cool Colors

Cool colors are colors associated with colder temperatures. Cool colors include green, blue, and purple. They are representative of water and nature and are calming colors.

GREEN (Secondary Color)

Green is a very earthy color as it is often found in nature. It is a calming color and has an effect similar to blue. Green conveys peace, health, and healing. Green is a color often used by companies that deal with natural products. On the flip side, green is associated with feelings of jealously and greed.

BLUE (Primary Color)

Blue is the only primary of the cool colors. Blue is very widely used by government and businesses because of the feelings it conveys. Blue is associated with positive feelings like confidence, loyalty, strength, power, and success. It is a very calming color.

Neutrals

Neutrals are generally used to support your designs and are often mixed with other brighter accent colors. The feelings conveyed by neutral colors are defined by the main warm and cool colors that surround them.

BLACK

Black sets a serious tone and signifies authority and distinction. Black is an excellent choice if you are trying to convey elegance. Black has some negativity associated with it and is used to represent evil. Using black in your design is an excellent way to provide contrast when mixed with other lighter colors, such as white.

WHITE

White denotes purity and cleanliness. More often than not, white is used as negative space in design, meaning no colors are present. White works well with just about any color in the spectrum. White is most often portrayed in the health care industry, specifically doctors, nurses, and dentists.

GRAY

Grey is a neutral color that is used to bring other colors together. It is suggestive of humility and somberness. Light grays can be used to replace white and dark grays can be used to replace black. It is an excellent way to soften the effects of dark and light colors, especially when working with fonts. Gray can be a very sophisticated and formal color and is often used in corporate style websites.

It’s a lot to remember. Just keep in mind as you begin to select colors to use in your design that each color can signify or convey a different meaning. An interesting aspect of this is how different colors mean different things to people of different cultures. If you are designing a website that will be widely viewed in China, for example, the colors chosen will convey a completely different message. Take a look at some of the different variations of the Coca-Cola website and see how they modify the colors on their site for each different region, it’s pretty interesting.

So, to summarize, check out this chart and come and feel free to use it as a reference as you start to select your own colors.

• Red: Passion, Love, Anger
• Orange: Energy, Happiness, Vitality
• Yellow: Happiness, Hope, Deceit
• Green: New Beginnings, Abundance, Nature
• Blue: Calm, Responsible, Sadness
• Purple: Creativity, Royalty, Wealth
• Black: Mystery, Elegance, Evil
• Gray: Moody, Conservative, Formality
• White: Purity, Cleanliness, Virtue