Selecting the appropriate colors for your site is as vital as choosing content and graphics. People are often not aware of the impact of COLOR and the influence that it has on the human state of mind. The color scheme that you choose for your web site can entice the visitor to engage or cause them to leave after the first few seconds. A poor selection of colors and other visual elements of your website can have a negative impact on your business and turn potential clients away.
The background color of your website, the color of your header, the color of your text, headlines and sub-headlines etc. can all have a psychological impact on your visitors.
When thinking about site color selection, you must take some things into consideration…
-
Who is Your Audience?
There are certain color preferences for certain groups of people. For instance male and female, ethnic groups, or even specific target markets. If you have a site that you know only attracts male visitors, then you will not want to go with a pink color scheme., instead you will want to use strong, bold colors. Choose colors that are appropriate for your Web site’s topic.
-
What is the PURPOSE of your Site?
Ask yourself these questions…
– Who are your site’s potential visitors?
– What products or services are you offering?
– What are your site’s key objectives?
Are people going to your site as a place of reference? Are you selling a specific product or service? If the aim of your site is to sell something, then the colors you choose will need to inspire the right kind of emotion in people. So that brings me to my next point…
-
Meanings of Colors
Just as you use words to express yourself, colors can be used as an expression as well. Different colors can evoke different emotions.
Red is the color of heat, passion and excitement. It grabs attention and evokes energy and speed.
Orange is the color of warmth and vitality. It’s also associated with reliability and playfulness.
Yellow is the color of optimism and creativity. Bright yellows represent sunshine, cheer and happiness.
Green is the color of serenity and health. It connotes growth, nature and freshness.
Blue is the color of security, truth and stability. It implies loyalty, reliability and an open communication.
Purple is the color of spirituality, intelligence and wealth. It can also mean royal, sentimental, creative and sophisticated.
Pink is the color of youthful intensity. It conveys energy, fun and excitement.
Brown is the color of durability and class. It could represent age, stability and relaxation.
Black is the color of power and drama. It’s serious, bold and strong.
White is the color of simplicity and cleanliness. It’s message is youthful, mild and pure.
-
Color Preferences
There was a Color Study done on the favorite color options between male and female as well as different age groups, and demographics. People of different ages have different reactions to color. Older people prefer more relaxing colors that are easy on the eye. But young people tend to like bright and more vivid colors. Here is an example, from the study, of the color choices for all people in general.
As you can see, blue is the top color and that is actually the #1 color used for websites today.
-
Color Harmony
A basic rule when using color in any area of design (including interior design) is to stick with 3-4 colors. Chromatic harmony is one of the most important criteria in order to create a pleasant experience for the visitors. Using too many colors creates an inconsistency and can cause people to glance over important areas of your site.
Another color rule in design is the 60 – 30 – 10 rule. The rule specifies that you should pick three different colors and use them in ratios of 60%, 30% and 10%. The 60% is the primary color which would set the overall tone of your site. Then the 30% would contrast the main color and the 10% would be the accent color.
Also, keep in mind that it is safer to incorporate a ‘neutral’ color (white, gray, beige, black and so on) as either the 60% or 30%. This gives you the maximum number of options when choosing your other two colors, because neutral elements will generally “go with anything.
-
Image Integration
Photos can be a great source of inspiration when it comes to choosing your color scheme.
Many sites will actually start with an image as the focal point. This can be anything from a product, location photo, headshot, stock image, original photography or even a pre-made graphic design element. It is important to coordinate the colors between them and the layout of the site. This will create a unity in the design. We can then borrow color inspiration from the image instead of the other way around. Our eyes recognize the color relation, which in turn provides a strong connection for the viewer. When you borrow a smaller amount of color inspiration from a photo, additional parts of the layout are brought to our attention.
In many cases when I start on a site design, the client will already have a logo and I will have to build the site around that. In that case, you will have to tie in those colors for branding purposes and be consistent on all platforms.
-
Color Consistency
Being consistent in your color choices can be the difference between a professional and a ‘not-so-professional’ website. If you use a different shade of purple for your logo, every time you print, post, or upload it, you run the risk of making your brand seem inconsistent and undefined. This is why it’s important to understand some basics about color and use hexadecimal color codes to make sure the colors you use on your website (and elsewhere) consistently represent the personality of your brand.
-
Color Palette Tools
Now that you know the basics about choosing colors for your website design, here are some helpful online tools that can assist you in coming up with the best color palette and color combinations.
Kuler – Kuler is a community based web app that lets your look through color palettes created by others. You can also create your own palette by using the color wheel, harmony rules, and color sliders.
Color Blender – Color Blender let’s you select a preferred color and then it generates a six color blend based on that color and from there you can tweak each individual color.
Color Wizard – With Color Wizard you can submit a base color and it generates color schemes based on your color’s complementary color, split complementary colors, analogous colors and other variations. I used the Tetradic color option which displays 4 colors that supposedly work well together. It is fun to play around with it.
Coposa – Copaso is another color palette generating tool. It allows you to save colors to a scratch pad, extract colors from a photo, and publish a palette for other people to see. Here is an example of extracting colors from a photo.
