The Importance of Color in Web Design | DS MEDIA

The Importance of Color in Web Design

  admin   Jun 20, 2016   Uncategorized   0 Comment

Humans have a natural attraction to colors. To develop a successful brand & website, first you need to identify your target market and their needs. Color plays an important role in creating your identify and attracting the right target market.

The ability to use colors to your advantage is extremely important and it’s easy to get wrong. This post is designed to help you understand the effects of color and how you can use color wisely in your business.

In web design, color can be broken into three general parts: contrast, complementary and vibrancy.

  1. Contrast simply means the opposite of a color or shade.
  2. Complementary colors is when colors bring out the best of each other. For instance, the color purple provides an excellent complement to lime.
  3. Vibrancy takes into consideration the fact that different colors evoke different emotions. For example, the bright colors of yellow and orange make you more alert and energized; while darker colors like purple and blue can make you tranquil and relaxed.

Any good web designer knows that colors can have a tremendous impacts on a design, and will use color to set the right mood and atmosphere in a website design. Let’s take a look at some of the most commonly used colors in web design and what they represent…


Red represents excitement, think Coke, Ferrari etc. It’s a terrible color on a website when used in large background areas because it hurts your eyes to look at it and therefore kills conversions.

CNN uses red on their top banner to increase level of alertness, which is an excellent choice given the nature of the website. Red is a very powerful color that’s why it is used for warnings and to highlight important notices.

You can use the color red is the first section of a single-paged website because it has the psychological effect of telling readers to scroll down to get out of the danger zone. This is actually a clever strategy because by doing that, users become convinced to read more of your content.

However, you cannot just throw the color red around freely as it could incite anger and other negative emotions. Overstimulation makes readers tense so if you’re going for a more relaxed environment, it’s best to either use it sparingly or use a lighter shade.


Orange promotes friendliness, uniqueness and energy. Nickelodeon uses orange, which works well with a lighthearted and cartoonish website. It is generally versatile but production can be quite a challenge especially if you’re trying to evoke stronger emotions. This is because orange is the most muted of the warm colors.


Depending on the shade, yellow can quickly become one of the most versatile colors around. Bright yellow is energy, middle shades of yellow is comforting, while darker shades lend an air of wisdom, curiosity and timelessness. The use of darker shades of yellow is most recommended for a company that sells consultancy and skill-based services.


Green means stability and growth. It relates financial and environmental themes. The color green is a balancer, which bridges the gap between warm and cool hues. If you’re after feelings of money and affluence, go for darker shades of green.


All shades of blue are relaxing, but with the lighter shades coming out as friendly while the darker shades are somber. For example, social media sites use light and medium shades while corporate websites go for the darker shades of blue.

Black and White

Located at the opposite sides of the color wheel, black and white are two contradicting colors. Black means power, sophistication and edginess so it’s the strongest of all neutral colors. It is the color of choice for long blocks of text. For certain websites, the use of black creates an emotion of timelessness, especially when set in white font and against a minimalist layout.

Meanwhile, white is associated with virtue, innocence and purity. It is the best accent for all the other colors found on the page. Most minimalist themes are based on white.

Mixing Colors for a Website


Above are only some of the most commonly used colors on websites. The repeat use of colors will ultimately affect the mind and mood of the visitor. Most of these effects happen subconsciously so you have to choose them very carefully.

Below are the three most successful ways of mixing colors into an effective color palette, using Triadic, compound and analogous…

  • Triadic uses vibrancy and complementation but without the trickier contrast, this method is the safest and most reliable. What you will do is simply to select colors that are 120 degrees from each other, as placed in the color wheel. Use one of the colors for the background and the other two can be used for the content and navigation.
  • Compound, otherwise called as split complementary, uses a pair of contrasting and another pair of complementary colors. It’s a tricky setup but well worth it, if done right.
  • Analogous scheme that focuses on complementary colors only. It’s easy to do but you have to be careful when choosing the colors to use because you don’t want to exaggerate.

We’re lucky that we now live in a time where there is already a deep understanding of colors – thanks to the scientific and artistic color theorists that lived before us. Still others have used that understanding to create workable tools that can assist us in selecting the best colors for our websites.

Here’s my notes that I wrote before we recorded our podcast episode on color, please try to use this in this post…

What is colour and how important is colour in design?

First of all let’s work out how to spell it: is it COLOR or COLOUR?? =)

Seriously though “Colour” is one of the single most important elements that make up a great design.

It takes time to come up with the most appropriate colour palette for a design and we will show you the process we go through in this episode.

Get the colour wrong and it can make or break a website, product or advertisement.

The biggest brands in the world have very strict rules around their colour palette and have put a lot of thought into choosing their main colour. For instance:



  • Cadbury, Halmark = Purple (Luxury, Sophistication.)
  • Coke, Ferrari = Red (Energy, courage, strength)
  • Fanta, Nickelodeon = Orange (Fun, playful)
  • McDonalds, Batman = Yellow (Cheerful, Warm, Friendly)
  • Facebook, American Express = Blue (Trustworthy)
  • Greenpeace, BP = Green (Natural, Earthy, Friendly)
  • Apple, Mercedes = Silver (Neutral, Calm, Classy)


How to create a colour palette for a new brand or website:

We like to use a limited colour palette so that it is more memorable and easier on the eye and not confusing

Here’s our technique to approaching colour and designing a colour palette for a brand or website

–  Emotional and psychological response to colour

–  What age group is it for. (Kids vs teens vs adults, male vs female, unisex etc.)

–  What demographic is it for / target market

–  What’s trending

–  What season is it for or is it every green

We then need to research based on the above to get inspiration:

–  Competitors websites or products

–  Pinterest

–  Magazines (Home Improvement magazines have great limited colour palettes.)

–  Advertisements: Posters / Signs / TV etc

–  Day to day life

We then need to think about:

–  What colours work in harmony with each other

–  There are rules about what colours do and don’t work with each other.

–  When some colours are touching each other they can actually create movement.

–  How much of each colour to use in a design

–  Is there a family of products that need a family colour palette?

–  Where to place the colour so that it accentuates the main ‘CTA’ or purpose of the design. (For instance on a web page design the main CTA button should be a contrast colour to everything else on the web page.)


Please WhatsApp at +65 8742 8153 to discuss.

Post a Comment

Your email address will not be published. Required fields are marked *


We have received your request. Please allow us to send you the FREE Report within 48 hours. We might need more time depending on the demand and complexity of your apps.

We might contact you at the mentioned contact number for confirmation before testing.


Sam Guna
DS Media
+65 93824256

Singapore Address
DS Media Concepts. Pte. Ltd.
No.10 Anson Road, International Plaza,
#26-04, Singapore 079903

Malaysian Address
DS Media Concepts. Pte. Ltd.
Level 30, Menara MSC Cyberport
No.5, Jalan Bukit Meldrum,
80300 Johor Bahru


Subscribe to our newsletter

%d bloggers like this: