HOW TO CHOOSE THE BEST COLOUR FOR YOUR WEBSITE
A website is a great marketing tool, representing the company, owner, employees and products & services. Going beyond that, it reflects the personality of your business. A website is a personality? Definitely yes, as it portrays a positive or negative ‘mood’ and ‘emotions’ of your company.
When we communicate with each other, we use body language to display using our voice tone, gestures and face expressions, however, website is a different thing. In the digital world, the ‘mood’ can be displayed through the use of colors, where it is crucial to be careful when choosing them.
Website development requires web designers to perform a very crucial job that also involves deciding on color schemes. Web designers have to choose the color schemes that trigger only positive consumer emotions. Even the black color motivates consumers to make purchases, if the product offered matches the mood of the black color. Website colors also present the impression that you want to make on potential customers.
First, we will have a look at ‘rules’ of what kind of web designs should be avoided and later, at what are the useful tips for your current or future website. Let’s start!
WHAT SHOULD BE AVOIDED
Color affects how we feel, our perceptions, and our interactions. A visitor has already made a conscious choice to visit your website, now you should keep his or her interest. You have between 8 to 10 seconds to visually appeal to your visitor. How can you do it?
Through color you can make a surfer feel welcome, comfortable, relaxed, and trusting. At the same time, choosing the wrong color may “kill” your website conversion rate. Why? Let’s look at the following example:
Taking a water-based product and placing it on a pink or orange website design color would decrease marketability. Pink and orange are not associated with water or nature and will give the website and product a “false” impression. Placing that same product on a blue or green site will increase the desire for that product, as those color are immediately associated with nature and water. Besides, sites that are nature-related receive better responses when multiple colors of green are used than any other color or combination.
Multi-colored websites, or “rainbow sites,” have the lowest visitation time. This is not the case if the site is predominantly white, while displaying only small amounts of various colors. As the multiple colors decrease, the time of website visitation increases. Sites aimed at children, such as toy sites, often use a wide range of color to “entertain” the visitor. While this is smart marketing, displaying large quantities of multiple colors decreases the “fun” aspect as the eye tries to focus and concentrate on the overly busy page. A smart rule of thumb when using multiple colors: do not use more than 5 colors, keep them either “warm” or “cool,” and make the background white. Fun is more fun when it is easy on the eyes.
The multi-colored web design is presented below and serves as an example of the fact that the mix of various colors makes the website look aggressive and unattractive:
USEFUL TIPS FOR YOUR WEB DESIGN
Not only can color help make a website more memorable and provoke emotional stimulation, it can also make the user experience more enjoyable resulting in higher conversion rates. Along with a well designed user-interface, helping visitors to navigate through the site is one key role color plays, guiding them through the website content easily and quickly. Color also helps towards building a content hierarchy, focusing attention on key information and calls-to-action.
As we have seen in the examples above choosing 2-3 non-bright colors is a better option, rather than taking the whole palette of colors. Below we show the web design with appealing and attractive design:
The Clyde Space website uses a complementary color palette. The yellow content and graphics on the dark blue background creates a very high in contrast allowing content to be easily read as well as highlighting on page actions and link/button interactions.
The meaning of colors
Colors can bear different meanings through different factors like pairings, shades, context, content, vibrancy, culture, location, tone, and so much more. It can even be pretty subjective, but here are some examples of what different colors portray.
- Red: powerful, emergency, life, passion, health, romance, call to action, sale
- Yellow: caution, joy, sunshine, warmth, intensity, happiness
- Blue: trust, peace, serenity, loyalty
- Green: environmental, nature, finance, health, jealousy, growth
- Orange: impulse, confidence, friendly, safety (construction)
- Purple: royalty, wealth, romantic
- Brown: stability, natural, earth
- Gray: neutral
- White: purity, clean, innocence, neutral
- Black: power, intensity, death, authority, luxury, edginess, sophistication, unknown
As it was mentioned earlier, the role of color perception by the culture your business operates in, is very crucial. For example, in western cultures, red symbolizes hot, danger, blood and stop signs. In Indian culture, red is a powerful color that means fear, fire, wealth and power, purity, fertility, seduction, love and beauty. In South Africa, red is associated with mourning and the red section on the country’s flag symbolizes violence and the sacrifices that were made during the struggle for independence. In Thai tradition, each day of the week has a color and is linked with a particular god. Red is the color for Sundays and associated with Surya, a solar god. In China, red represents celebration and is meant to bring luck, prosperity, happiness, and long life.
In general, warm colors are energetic, alert, and work well for calls to action. They come off bold, portray daytime energy, and can also be aggressive. Cool colors, on the other hand, are peaceful, calming, and tranquil. They can bring to mind nighttime and sadness.
Judging from the colors on the Obrigado website, the yellow block emulates warmth, energy and joy, which makes sense because this is a product from Brazil — which has a lively culture and warm/tropical temperatures. The green elicits a natural aspect and the white emphasizes purity and cleanliness. The web design is bold, but not overwhelming, while playful and informative.
The cool tones on Capital Crossroads’ site create a balance between day and night with the tonal lighter differences in the solid color blocks and the nighttime scene in the photo. The blues convey a feeling of tranquility and trust, while the green evokes a sense of growth. The cleanliness and neutrality of white, help balance out the dynamic and energetic layout.
Also, below you can find a short summary of colors of CTA (call-t-o-action) buttons and how they affect the consumers/clients of the overwhelming majority of brands.
Please note that the impact of color can vary depending on geographical location. For instance, a color appealing to American shoppers may not necessarily appeal to Indian shoppers.
What does all of this mean to website designers? If you want your site to be marketable, remember that there is more to it than just graphic placement and text. Every color tells a story and it may not always fit the one you are trying to portray. In informational design, distinguish functional color from decorative color. Decorative color enhances the layout by making it more aesthetically appealing, creating a mood, or establishing a style. Functional color conveys information explicitly.
Would you want Blueninja.io help you with Web design and Website Development? Give us a call anytime! The highly-qualified team of Blueninja.io provides an unforgettable experience for businesses and their clients through innovative digital solutions. Website design & Mobile Development, Web Application Development services, E-commerce web systems, SEO, Google Adwords and Social Media Marketing (SMM) are just a small part of a wide service portfolio, opening doors to enormous opportunities for your business success. Stay connected with Blueninja.io and be the first who will read our next article!
With creativity in heart, with an idea in mind!