Contact Info Contact Info
Tel:
(+632) 654 0001
Office:
WEB OUTSOURCING GATEWAY
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog

20
Jan

#WebDesign2015: Choosing the Right Color for Your Business website

The things you need to remember when putting colors to your website are simple: it must compliment, it must have a good contrast, and a bit of animation.

What is difficult is implying the message before the color you have chosen.

Color is the umbrella term for manipulating hues to render variations. So it might not be appropriate if we say “colour Red” because Red, Orange, Yellow, Blue, Green, and Purple among others are technically termed as Hues, the degree of color which it can be categorize as to a specific color set. On the other hand, color purity is called Chroma.

Toning (adding Gray to a pure hues), shading (adding Black to a pure hues), and tinting (adding White to a pure hues) are techniques to yield various colour saturation (strong or weak colours) and colour value (light or dark colours).

A web designer then may be guided by the colour wheel when mixing these hues to render eye-catching colour combinations. Some people, however, really have a good eye for colours and just trusted their instinct and personal preferences.  But for us perceivers, colour can be the most subjective element in web design. What is good to one is not pleasing to the other person. Maybe we can be “wowed” by Purple and others may just hate this colour. These perception differences sometimes are due to our mood and cultural background.

THREE MOST IMPORTANT ELEMENT OF COLORING A WEBSITE

Web designers can be guided by 3 of the most basic yet most important element of coloring a website. This is also called the color relationship aspects of a website. See the following:

1.  Complementary. This refers to how the color in you website was harmonized by a specific set of colors. These are basically the opposite color in the color spectrum that results to harmonized and appealing color to users.

Complementary colors may go with two different uses: the triadic and the compound color scheme. Triadic, these are color schemes that rooted from three separate ends of a color spectrum.

On the other hand, compound color scheme or also known as Split Complimentary, are colors that was chosen from 2 different opposites ends of the color spectrum.

2.  Contrast. Contrasting is simply reducing eye strains by reducing two different elements in two ends. This can be done by putting a very bright color as a background and dark color as text itself, or vice versa.

3.  Animation. Right color combination can create an animation in a website. It is like creating a movement through picking colors that harmonized each other thereafter create a natural phenomenon of vibrancy. With this, it can signify an emotion to your website.

One good example is the Solar News website. They have used blue color around a white background to focus on the Headlines. With this, the emphasis in the website is the headline that will lead to reader’s attention to go directly to the headline form any other.

The given fundamentals are just few of the common elements in coloring a website as part of a web design.

SO HOW YOU CHOOSE A COLOR FOR YOUR WEBSITE?

Giving you the following color with corresponding meaning according to country and culture among others.

Red - it could mean love or anger but this is a good luck in China, mourning in South Africa, Christmas in the USA, and life in Japan.
Orange - it means vitality and happiness; autumn in Europe, and Halloween in the USA.
Yellow - it means deceit; but also means hope in the Philippines, mourning in Egypt, royalty in China, and courage in Japan.
Blue - It can signify professionalism or calmness; immorality in China or heaven and spirituality in Iran.
Green – It can connote rebirth, health, money in the USA, or environment in Europe.
Purple – It means creativity, psychic energy, luxury, royalty in Europe, or mourning in Thailand.
Pink – It can signify sweetness, feminine, acceptance, or trust in Korea.
BlackIt signifies elegance, power, age and wisdom in Africa, or mystery in Japan.
White - cleanliness, purity, but death in China.
Gray - Gray can mean traditional, security, reliability; it is a dull and boring color in Western, but helping attitude in Eastern countries.

Now that we are done orienting you about theoretical concepts of color meanings, we’re going to complement these with practical application in web design.

Here are our top 7 good-to-remember web design color points for top business types and sectors that are outsourcing web development (at least in our experience)!

1. Colors for Government/Public Offices and NGOs

Government and non-government offices primarily concern the well-being of the citizens, community and beneficiaries, professions respectively. It’s a worthy note to opt for positive, respectable, and cool colors such as Blue, Green, and White for the web design of public offices and NGOs.

2. Colors for Private Companies

Blue is said to be a universally-accepted color and induces professionalism. Thus, any shades of blue or touch of it is a nice choice for private-owned business websites. The color does not only invite large number of people but also encourages its employees to work smart and productive.

3. Colors for Spa and Hotel Businesses

Spas and hotels sound elegant and cozy, right? There are no other colors for these sophisticated and soothing endeavors but the colors of the earth and luxury. Blue, White, Green, and Brown are the right hues to call for mind and body relaxation. While Gold, Silver, Black and also White define grace and taste. Playing with these earth and luxury colors definitely transcend the idea of a spa or hotel business.

4. Colors for Medically-related Businesses

No one will disagree when I say that White is the cosmic color for medical fields. Put an ample amount of White in a website in which industry is into medicine. But do make sure to supply other colors for it not to look boring. Go for Red, Lavender, Green, Blue, and Brown when complementing the whiteness of a medical field websites.

5. Colors for Food-based Businesses

Are you aware that Yellow increases metabolism and Red encourages appetite? No wonder why most restaurants and fast food chains pick Red and Yellow as its brand colors. Look at McDonalds, Pizza Hut, and Wendy’s. In web design, blend these hues well because merely marrying the two does not actually look good on web. Try to inject some white or any neutral to soothe the readers’ eyes.

6. Colors for Legal Services

Hearing Legal or Law sounds tough and brave.  Drive for neutral colors here like Black, White, Gray, Tan, and Brown. We don’t like the idea of prevailing Red in the legal firms’ websites as this color might be overwhelming when thinking of “Law.” Yes, no scientific explanation on this. But when complementing the neutral colors above, we really prefer Purple or Blue for legal services. Why? Purple signifies psychic abilities and Blue represents professionalism. Both hues may mean professionally getting into the psych of a person for truth, and that’s what basically Law is.

7. Colors for Beauty, Hygiene, and Fashion Products

Beauty is refinement, hygiene is cleanliness, and fashion is style. We don’t want you to choose warm colors for these sites that offer these types of products. Monochromatic, simple, neutral, clean websites are two thumbs-up for the online platform.  High-end brands like MAC, L’Oreal, Gucci, and Hermes play around the colors of White, Gold, Brown, and Black to communicate simplicity and sophistication. While Watsons and Etude House key into the coolness of Green and Pink to convey cleanliness/sanitation. In addition, most of fashion and beauty websites lay large images and few texts especially on the homepage.

COLORS FOR GENDERS AND AGES

Color can also find a parallel views depending on the age and gender of the receiver. For instance, a combination of several colors as o the rainbow colors can be viewed as homosexuality omen in some point of the world.

To sum up, Boys wants strong colors. Primary of combined Colors such as red, orange, yellow, orange, and blue among others attracts men. While shades of red to blue and yellow to orange settles with women—not pink at all times. Also, it must be remembered that woman has a higher ability to perceive a color than of men. Nonetheless, a study says that blue is a favorite color of any sex, men and women with a staggering 57% and 35%, respectively.

Meanwhile, middle-aged people wanted a moderate and relaxing color. While youngsters prefer to have a bright and energetic colors.

FINAL THOUGHTS:

Color combination in web design is an art, science, and branding. An art because it talks about aesthetic, meaning what is pleasing and attractive. And a science because of a scientific and deliberate picking of psychological and cultural color effects to the readers as well as the color functionality with respect to the whole site itself. It is where opacity, white space, and contrast come in. In the same way, pointing the colors for a site goes beyond picking the favorite color or prejudice.  A color must be keenly picked with respect to audience, culture, ages, and even gender.

More importantly, the website color of businesses or organizations should speak a message and stand for its brand.

Thus, Art and Science are the building blocks of a successful color of website that leads to branding.

Reference:
http://www.brandigirlblog.com/2012/11/why-do-some-color-schemes-work-and-others-dont.html

Tags: , , , , , , , ,

  • http://www.miraclestudios.in/ Raj Arora

    Like the way you explain the meaning of different colors according to countries and their culture. One should consider these stuffs in mind while designing one’s in relation to the clients you are targeting.

  • http://www.weboutsourcing-gateway.com/ Web Outsourcing Gateway

    Agree with you. Locale and territories’ culture and tradition is on of the most delicate and crucial part of choosing a color. thus, we recommend a comprehensive analysis and study of it.
    Thanks @miraclestudios:disqus

  • Pingback: Web Outsourcing Gateway | Blog » Blog Archive » The Basic Guide for Developing a Multilingual Website