Colors in Web Design: Choosing a right combination for your Website

Posted in Web Design4 years ago • Written by 29 Comments

Color is undoubtedly the essential means to touch the emotions of your website visitors. It is a non-verbal communication and creates a physical and emotional reaction of the viewers. Colors are able to set the right tone and carry a necessary message for visitors. Colors can calm or excite, arouse plenty of feelings and stimulate to actions. Color is extremely powerful.

When choosing a color scheme for a website, it is important to do it right, guided by the main principles of the color theory and of course, follow professional advices. In this article I intended to cover the most important aspects of color, the main principles of combining colors, its meaning in web design as well as symbolic meaning. Also, you will see some good examples of well designed websites divided according to the prevailing color as well as get familiar with some useful tips from professional designers as to using colors effectively when creating a website.

So, let’s start discovering the magic of color…

Color theory: the main principles. Learning to combine colors

The people, who are not closely familiar with the web design main principles, choose colors for their websites according to their own taste and end up with the colors that just look good in combination with each other. It is great if you have a good eye and you feel intuitively what color scheme to choose for a website. But of course, all men can’t be good at it. So, for all those who are not sure what colors to combine for the website, I would recommend to learn the basics of color theory – it is very clear and easy to understand.

One of the most useful issues to start with is the Color Wheel.

A little bit of history: The color wheel was invented by Isaak Newton in 1666. He took the bar of colors created by the passage of light through a prism and transformed it into a segmented circle, where the size of each segment differed according to his calculations of its wavelength and of its corresponding width in the spectrum.

Source: sustland.umn.edu

The color wheel is an indispensable attribute of many designers and artists all over the world. This great tool is a perfect proof of the theory that the ingenious is always simple. The color wheel allows you to pick the colors that are harmonious together. The wheel consists of 6 basic colors: red, orange, yellow, green, blue and purple. In addition to the basic colors, we have extra colors (mixes of the basic).

So, to find a right harmonious color scheme, you need to use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle or any of four colors that form a rectangle (two pairs of colors opposite each other). Color schemes remain harmonious regardless of the rotation angle.

Primary Colors

There are three primary colors: Red (#ff0000 in HTML or #f00 in CSS), Yellow (#ffff00 in HTML or #ff0 in CSS) and Blue (#0000ff in HTML or #00f in CSS). We cannot get them by mixing any other color. The other extra colors can be formed by combining of these three colors. If you mix two of the primary colors, you will have a secondary color.

Secondary colors

There are also three of them: Orange (#ff9900 in HTML or #f90 in CSS), Green (#00ff00 in HTML or #0f0 in CSS) and Purple (#ff00ff in HTML or #f0f in CSS). You can get them by mixing red and yellow (orange), yellow and blue (green) and blue and red (purple).

Tertiary colors

To get one of tertiary colors you need to mix one primary color and one secondary color together. The opportunities for tertiary colors are endless.

Complementary colors

Complementary colors are the ones that are located directly across each other on the color wheel: red and green, blue and orange, purple and yellow. In combination with each other they compose a striking contrast. Such color combinations are usually used for standing out some elements on the website. For example, if you have an orange background and some blue elements on it, the blue items will be almost blinding.

Analogous colors

These colors are located next to each other on the color wheel. They usually look extremely good together, but absolutely quiet. Use such color combinations when you need your visitors to feel comfortable while looking at your website pages.

There are plenty of color groups that refer to various aspects of color, i.e. warm colors, cool colors, neutral colors to name a few.

Colors in different cultures: symbolism

When choosing a color scheme for your website, you should obligatory take into account the fact that this or that color may have different meanings in different cultures. The cultural aspect for color symbolism can be very strong, so you need to be aware of how your audience views the colors. If you understand what you are saying with your website color scheme, you will avoid a huge mistake.

Let’s find out what some colors mean in different cultures:


Red

• China: the color of brides, Good luck, celebration, summoning
• Cherokees: triumph, success
• India: purity
• South Africa: mourning color
• Eastern: worn by brides, joy (in combination with white)
• Western: excitement, love, passion, stop
• USA : christmas (with green), Valentine’s day (with white)
• Hebrew : sacrifice, sin
• Japan : life
• Christian : sacrifice, passion, love
• Feng Shui : Yang, Fire, good luck, respect, protection, vitality, money, recognition


Blue

• European : soothing, “something blue” bridal tradition
• Cherokees : defeat, trouble
• Iran : mourning, color of heaven and spirituality
• China : immortality
• Colombia : soap
• Hinduism : the color of Krishna
• Judaism : holiness
• Christianity : Christ’s color
• Catholicism : color of Mary’s robe
• Middle East : protection
• Worldwide : ‘safe’ color
• Feng Shui : Yin, water, calm, love, healing, relaxation, peace, trust, adventure, exploration
• Western: Sadness, depression, conservative, bridal tradition, corporate, “something blue”


Yellow

• European : happiness, hope, joy, cowardice, hazards, weakness
• Asia : imperial, sacred
• China : royalty, nourishing
• Egypt : mourning
• Japan : courage
• India : merchants
• Buddhism : wisdom
• Feng Shui : Yang, Earth, auspicious, sunbeams, warmth, motion


Orange

• European : autumn, harvest, creativity
• Netherlands : favorite color (House of Orange)
• Ireland : protestants (religious)
• USA : halloween (with black), cheap goods
• Hinduism : saffron (peachy orange) is a sacred color
• Feng Shui : Yang, Earth, purpose, strengthens concentration


Brown

• Colombia : discourages sales
• Australian Aboriginals : color of the land, ceremonial ochre
• Feng Shui : Yang, Earth, industry, grounded


Green

• China : exorcism, green hats indicate a man’s wife is cheating on him
• Japan : life
• Islam : hope – the cloak of the prophet was thought to be green, virtue – only those of perfect faith can wear green
• Ireland: symbol of the entire country, Catholics
• European/USA : spring, new birth, go, safe, environmental awareness, Saint Patrick’s Day, Christmas (with red)
• USA : money
• Western: spring, new birth, go, Saint Patrick’s Day, Christmas (with red)
• India: Islam
• Feng Shui : Yin, Wood, growing energy, refreshing, nurturing, balancing, harmony normalize, healing, health, peaceful, calming


Purple

• Thailand : mourning (widows)
• European : royalty
• Catholicism : death, mourning, crucifixion
• Feng Shui : Yin, physical and mental healing, spiritual awareness


White

• European : marriage, angels, doctors, hospitals, peace
• Japan : mourning, white carnation symbolizes death
• China: mourning, death,
• India : unhappiness
• Eastern : funerals
• Feng Shui : Yang, metal, death, ghosts, mourning, ancestal spirits, poise, confidence


Black

• European : mourning, funerals, death, rebellion, cool, restfulness
• China : color for young boys
• Thailand : bad luck, evil, unhappiness,
• Judaism : unhappiness, bad luck, evil
• Australian Aboriginals : color of the people, ceremonial ochre
• Feng Shui : Yin, water, money, career success, income, stability, emotional protection, power, bruises, evil

The meaning of colors. A varicolored showcase

A visitor’s immediate opinion as to you and your offers is formed right after he sees your website for the first time. And this immediate opinion is formed not because your offer is brilliant or your products are great… When your web page appears to the visitor, the colors you have used go to work on the subconscious of your visitors. It happens because we all react on colors intuitively and psychologically. If the color scheme is chosen right for grabbing your audience’s attention, a huge part of work has already been done.

Let’s see what feelings each color can evoke as well as look at some ready-made website solutions selected as examples for each color.

Red

is mostly associated with boldness, excitement and desire. Red is the color of love, strength, power, energy, leadership and excitement. It is a strong color, and you should be aware of some its negative associations, i.e. danger, alarms, traffic lights, etc.


Blue

means patience, peace, tranquility, trustworthiness, love, stability. It is one of the most beloved colors, especially by men. It is associated with stability and depth, professionalism, trust and honor.

A Stunning Blue Color Scheme for a Blog

Yellow

is the color that mostly associated with liveliness. It is energetic and gives the feeling of happiness. Also, it associates with curiosity, amusement, joy, intelligence, brightness, caution, etc.

A Yellow Website Brighter than Sunshine

Orange

means cheerfulness and creativity. It can be associated with friendliness, confidence, playfulness, courage, steadfastness, etc.

An Attractive and Friendly Orange Solution

Purple

traditionally associates with power, nobility and wealth. Wisdom, royalty, independence, nobility, luxury, ambition, dignity, magic and mystery.

A Mysterious Design in Purple

Green

is the color of harmony, nature, healing, life, food and health. Also, it is often associated with money.

A Stylish and Well Balanced Green Design

Brown

is the color of relaxation and confidence. Brown means earthiness, nature, durability, tribal, comfort, reliability, etc. It can be thought of sophisticated, solid and conventional.

An Excellent Brown Colored Portfolio

Grey

gives the sense of seriousness, conservatism and traditionalism. It can provoke the feeling purity and innocence. It can be associated with security, reliability, intelligence, modesty, dignity, maturity, solid, practical, old age, sadness, quality, boring, practicality, professional, durability, quiet, gloominess. In combination with orange, grey looks fantastic and awakens the sense of perfection.

A Creative Portfolio in Grey

Pink

expresses tenderness, romance, femininity, truth, passivity, good will, emotional healing, care, peace, calming, affection, emotional maturity, nurturing, sweet tasting, sweet smelling, ethereal, delicacy, etc.

A Wonderful Pink Web Solution

Black

is a stylish and elegant color associated with power, sophistication, formality, health, etc. Black is an excellent technical color and helps to add some mystery to your design. But if you don’t want your website provoke depressing feelings, avoid using black over a large area. On the other hand, if you make a black background, it can enhance perspective and depth. Black is great to use for art and photography websites to help other colors to vibrate.

A Black Colored Business 3D Solution

White

White is associated with purity, simplicity, fresh, goodness, innocence easy, cleanliness, etc. This color is great to use for a background or accent color, because it highlights other colors.

A Clean White Web Design

Conclusion: some useful tips

As a conclusion, there are some useful pieces of advice that will help you in choosing a good color scheme for your website. These little tips are widely used by professional web designers.

1. If you wish your text content to be easily readable, choose contrasting colors. It is important to make contrast between the text and background.
2. Use less colors. Don’t make your website to look like a circus. For the best impact you can use one color on headlines and another color (the complementary one) for the text.
3. Use enough colors. Use less, but enough. If you use too little colors, you risk to make your website boring. Or use little colors but just use other means to underline the elements in that case.
4. If you need to attract the visitor’s eye, use intense colors. But be careful, as If the color scheme is too intense, it attracts the eye in too many directions, and the techniques will lose its effectiveness.
5. Derive inspiration from nature: you can find really great complementary color schemes.

Useful related links:

That’s all for now. We hope you will find this article useful and look forward to your comments.

3 Written ArticlesWebsite

Tina Zennand is a copywriter, content manager and blogger. Interested in and write about web/graphic design, flash, photography, SEO, internet marketing and many more. Works for MotoCMS.com - an innovative Flash CMS provider that helps to create a professional Flash website. Follow her on @Twitter.

29 Comments Best Comments First
  • ANYA

    Wednesday, September 29th, 2010 20:19

    10

    Thanks for the article! it’s that what i was looking for!

    +1
  • Julian

    Thursday, September 23rd, 2010 00:49

    1

    Have you any suggestion about an online tool for choosing colors combination?.

    thanks

    +1
  • Nathan Maggard

    Wednesday, December 22nd, 2010 17:28

    15

    Love this post. We’re locals here in Nashville and Justin Bird is a local designer here. Fantastic work he puts out. Glad you guys featured his orangy-twitteresque sweet layout.

    +1
  • Cah

    Wednesday, March 14th, 2012 22:53

    27

    This is brilliant, I’m looking for the next post..Perfect combination of colors .

    +1
  • arun

    Tuesday, March 27th, 2012 08:58

    28

    let us know more about the use of Phi color selection and the use of it ? ( Golden ratio )

    0
  • Shrikrishna Meena

    Friday, October 1st, 2010 08:24

    12

    Color combination is an essential part of every web page, liked the brown and orange examples shown here.
    Bookmarked this for later reading.

    0
  • forque

    Thursday, September 30th, 2010 13:06

    11

    The three primary colors (i.e. in the additive colour model used in pc displays) are red, blue, and green (instead of yellow in this article). Yellow is a combination of red and green (#f00 + #0f0).
    Perhaps you meant subtractive model, based on C(yan), M(agenta) and Y(ellow) colours?

    0
  • Jan Suchandt

    Saturday, September 25th, 2010 12:39

    8

    Thanks for this arctile. The examples are very nice too.

    0
  • Aneslin

    Saturday, September 25th, 2010 02:45

    7

    thank you my man,
    really usefull,
    and is there any online tools for this?
    friend got an app, but thats only for iphone :(

    0
    • Tina Zennand

      Monday, September 27th, 2010 08:18

      9

      Thank you for your feedback!
      I like ColorBlender.com, it is a rather good online tool for color matching and palette design. Also, as Dainis already said here, kuler.adobe.com/ is good.

      0
  • Federico Capoano

    Thursday, September 23rd, 2010 11:27

    2

    Cool and useful article. Never knew about the differences of color significance in the various cultures.

    0
  • Jason Gross

    Thursday, September 23rd, 2010 18:42

    4

    Great article, I love seeing stuff based on the core principles of art and design. Understanding how to use color in combination with other colors is one thing but then graduating to an understanding of how to use color in terms of an action and an emotion is a whole new ballgame.

    Subjects like color, spacing, alignment, shape, and form are huge tools for designers and things we should continue to learn about and experiment with as we grow our skill sets.

    0
  • D.Buck

    Friday, March 30th, 2012 06:18

    29

    Very helpful article, using different colors to target specific demographics and region

    0
  • Ahmad

    Friday, September 24th, 2010 08:14

    5

    I think you may want to recheck your symbolic-colours table. I live in South Africa and this is first that I heard that Red is symbolic of mourning. Also India/Islam.

    0
    • Tina Zennand

      Friday, September 24th, 2010 09:09

      6

      Thanks for the info Ahmad, I’ll revise the table.

      +2
  • JayTravis8210

    Tuesday, October 5th, 2010 17:45

    13

    This was an interesting article. I didn’t realize that colors were held in so many different regards culturally. I tend to lean towards black backgrounds as they give more feeling to the other elements of the page.

    0
  • cah oblianda

    Wednesday, March 14th, 2012 22:50

    26

    This is a great combination of colors. Inspirational Effects.!

    0
  • johan

    Saturday, August 27th, 2011 14:58

    22

    I am designing some webshops for myself and i always found it really difficult to choose colors.

    Thank you for a great article this helps a lot with picking the right ones.

    0
  • Petra

    Tuesday, September 13th, 2011 13:15

    23

    Thanks for this brilliant idea…I can stop doing all rubbish and do good looking websites.

    0
  • Innerbaia

    Thursday, January 19th, 2012 14:46

    24

    A marvellous article, thank you alot for being there and help me out with this information.
    Thanks again.
    I need advice and / or help on my color project.
    I am a newby on building websites and need help in creating color experiences for visitors.
    My non-commercial site agam.tk – baia.nl is just the beginning for me in working with pages,
    My goal is to give visitors some experience on colors fand emotions.
    It has to be a combination of a hidden color wheel-mouse-oriented colorwheel page and a full-color page display of the mouse browsing the spectral colors..
    I should appreciate if you can advise me in one way or another.
    Thanks in advance.

    Kind regards and have a beautiful day

    0
  • Andreas Pazer

    Saturday, February 11th, 2012 17:17

    25

    Colors are such an important ingredient for your web design that this cannot be emphasized enough. We all know that different colors affect the moods of people to varying degrees, so this will also have an affect on your customers’ perspective of your company.

    0
  • Jasim Muhammed

    Thursday, August 4th, 2011 13:46

    21

    Its a very good article :) Thanks
    I would suggest to add one more site. http://uicart.com it gives how color patterns are best shown up in reality. Provides ability to showcase Web User Interfaces as well as searching UIs based on our favorite color patterns

    0
  • remco

    Sunday, June 26th, 2011 11:10

    20

    Wow …. I have been lookng to a lot of articles like this but this one i really like because of the expamples and pictures you give with it.

    This one will help me so much with choosing my website colors.

    thx

    0
  • LucyZhang

    Wednesday, October 13th, 2010 07:22

    14

    I think colourlovers.com is a good colour tool online, I hope the can help you.

    0
  • RAJ

    Thursday, December 23rd, 2010 13:23

    16

    Hi,
    here is Raj. from Pune (India)

    It’s a fantastic. Really, it will be helpful to all designer from basic to high. This topic improve the color scheme to create a creative and attractive design.
    Thanks for providing this knowledge. Thank you very much.

    0
  • Brett Widmann

    Thursday, January 27th, 2011 06:34

    17

    This was a very helpful article because color can make or break your website!

    0
  • Keny

    Friday, May 27th, 2011 18:47

    19

    Great!

    0
  • Lisa

    Tuesday, May 24th, 2011 22:37

    18

    This is a great article. I have added it to my delicious for future reference. I have read several articles on this subject and it,definitely, is one of the easiest to understand.

    Thank you for the great resource.

    0
  • D.Buck

    Friday, March 30th, 2012 06:18

    29

    Very helpful article, using different colors to target specific demographics and region

    0
  • arun

    Tuesday, March 27th, 2012 08:58

    28

    let us know more about the use of Phi color selection and the use of it ? ( Golden ratio )

    0
  • Cah

    Wednesday, March 14th, 2012 22:53

    27

    This is brilliant, I’m looking for the next post..Perfect combination of colors .

    +1
  • cah oblianda

    Wednesday, March 14th, 2012 22:50

    26

    This is a great combination of colors. Inspirational Effects.!

    0
  • Andreas Pazer

    Saturday, February 11th, 2012 17:17

    25

    Colors are such an important ingredient for your web design that this cannot be emphasized enough. We all know that different colors affect the moods of people to varying degrees, so this will also have an affect on your customers’ perspective of your company.

    0
  • Innerbaia

    Thursday, January 19th, 2012 14:46

    24

    A marvellous article, thank you alot for being there and help me out with this information.
    Thanks again.
    I need advice and / or help on my color project.
    I am a newby on building websites and need help in creating color experiences for visitors.
    My non-commercial site agam.tk – baia.nl is just the beginning for me in working with pages,
    My goal is to give visitors some experience on colors fand emotions.
    It has to be a combination of a hidden color wheel-mouse-oriented colorwheel page and a full-color page display of the mouse browsing the spectral colors..
    I should appreciate if you can advise me in one way or another.
    Thanks in advance.

    Kind regards and have a beautiful day

    0
  • Petra

    Tuesday, September 13th, 2011 13:15

    23

    Thanks for this brilliant idea…I can stop doing all rubbish and do good looking websites.

    0
  • johan

    Saturday, August 27th, 2011 14:58

    22

    I am designing some webshops for myself and i always found it really difficult to choose colors.

    Thank you for a great article this helps a lot with picking the right ones.

    0
  • Jasim Muhammed

    Thursday, August 4th, 2011 13:46

    21

    Its a very good article :) Thanks
    I would suggest to add one more site. http://uicart.com it gives how color patterns are best shown up in reality. Provides ability to showcase Web User Interfaces as well as searching UIs based on our favorite color patterns

    0
  • remco

    Sunday, June 26th, 2011 11:10

    20

    Wow …. I have been lookng to a lot of articles like this but this one i really like because of the expamples and pictures you give with it.

    This one will help me so much with choosing my website colors.

    thx

    0
  • Keny

    Friday, May 27th, 2011 18:47

    19

    Great!

    0
  • Lisa

    Tuesday, May 24th, 2011 22:37

    18

    This is a great article. I have added it to my delicious for future reference. I have read several articles on this subject and it,definitely, is one of the easiest to understand.

    Thank you for the great resource.

    0
  • Brett Widmann

    Thursday, January 27th, 2011 06:34

    17

    This was a very helpful article because color can make or break your website!

    0
  • RAJ

    Thursday, December 23rd, 2010 13:23

    16

    Hi,
    here is Raj. from Pune (India)

    It’s a fantastic. Really, it will be helpful to all designer from basic to high. This topic improve the color scheme to create a creative and attractive design.
    Thanks for providing this knowledge. Thank you very much.

    0
  • Nathan Maggard

    Wednesday, December 22nd, 2010 17:28

    15

    Love this post. We’re locals here in Nashville and Justin Bird is a local designer here. Fantastic work he puts out. Glad you guys featured his orangy-twitteresque sweet layout.

    +1
  • LucyZhang

    Wednesday, October 13th, 2010 07:22

    14

    I think colourlovers.com is a good colour tool online, I hope the can help you.

    0
  • JayTravis8210

    Tuesday, October 5th, 2010 17:45

    13

    This was an interesting article. I didn’t realize that colors were held in so many different regards culturally. I tend to lean towards black backgrounds as they give more feeling to the other elements of the page.

    0
  • Shrikrishna Meena

    Friday, October 1st, 2010 08:24

    12

    Color combination is an essential part of every web page, liked the brown and orange examples shown here.
    Bookmarked this for later reading.

    0
  • forque

    Thursday, September 30th, 2010 13:06

    11

    The three primary colors (i.e. in the additive colour model used in pc displays) are red, blue, and green (instead of yellow in this article). Yellow is a combination of red and green (#f00 + #0f0).
    Perhaps you meant subtractive model, based on C(yan), M(agenta) and Y(ellow) colours?

    0
  • ANYA

    Wednesday, September 29th, 2010 20:19

    10

    Thanks for the article! it’s that what i was looking for!

    +1
  • Jan Suchandt

    Saturday, September 25th, 2010 12:39

    8

    Thanks for this arctile. The examples are very nice too.

    0
  • Aneslin

    Saturday, September 25th, 2010 02:45

    7

    thank you my man,
    really usefull,
    and is there any online tools for this?
    friend got an app, but thats only for iphone :(

    0
    • Tina Zennand

      Monday, September 27th, 2010 08:18

      9

      Thank you for your feedback!
      I like ColorBlender.com, it is a rather good online tool for color matching and palette design. Also, as Dainis already said here, kuler.adobe.com/ is good.

      0
  • Ahmad

    Friday, September 24th, 2010 08:14

    5

    I think you may want to recheck your symbolic-colours table. I live in South Africa and this is first that I heard that Red is symbolic of mourning. Also India/Islam.

    0
    • Tina Zennand

      Friday, September 24th, 2010 09:09

      6

      Thanks for the info Ahmad, I’ll revise the table.

      +2
  • Jason Gross

    Thursday, September 23rd, 2010 18:42

    4

    Great article, I love seeing stuff based on the core principles of art and design. Understanding how to use color in combination with other colors is one thing but then graduating to an understanding of how to use color in terms of an action and an emotion is a whole new ballgame.

    Subjects like color, spacing, alignment, shape, and form are huge tools for designers and things we should continue to learn about and experiment with as we grow our skill sets.

    0
  • Federico Capoano

    Thursday, September 23rd, 2010 11:27

    2

    Cool and useful article. Never knew about the differences of color significance in the various cultures.

    0
  • Julian

    Thursday, September 23rd, 2010 00:49

    1

    Have you any suggestion about an online tool for choosing colors combination?.

    thanks

    +1

Comments are closed.

54.196.189.229 - unknown - unknown - US