How to Correctly Handle the Colors of Your Website

Using the RGB format and math is simple to determine that the number of existent colors is astronomical and the conclusion is obvious: we have countless colors to use in our projects. It’s true, the differences between these are sometimes too small and for some people the differences are unnoticeable, but clearly:”000000″ is pure black while “000001” is another shade, even if the difference is observed only by specialists.

How to Correctly Handle the Colors of Your Website

In design projects, but also all around us, it is hard to find an entity using a single color; the world “is governed” by color combinations and here come the bad news: two nice colors added together isn’t a must to create a cool color scheme. In spite of the limitless colors, the correct matches between these are fewer and may not work for everyone.

In the overall value of a designer’s work, colors have an important role hence ignoring them isn’t a smart move. This article is written with the special purpose of helping web designers handle colors to their advantage even though it will be a strong “fight” against bad color combinations.

Before delving into the realm of color schemes and understanding the hidden aspects of nuances it is for the best to present their classification. From the kindergarten or the first classes in school we are taught that there are three colors which are the “parents” of all the colors and don’t worry, this isn’t a story for the kids. The RGB system used on our computers is nothing more than the digital version of the old tale (a “small” technical replacement of yellow with blue). The “R” stands for red, “G” for green and “B” for blue.

Red, green, and yellow are called primary colors and all the colors from now are created by using various percentages of them.

Secondary colors are formed, as you probably guessed, from the primary ones: combining yellow and blue the green color is born, from the combination of blue and red appears purple and from red and yellow we have orange. The color wheel from below reveals to you the secondary colors better.

instantShift - How to Correctly Handle the Colors

Finally, the tertiary colors are the result of combining the primary with secondary colors: yellow-orange called marigold, yellow-green is chartreuse, red-orange or vermilion, red-purple is magenta, blue-purple born the violet color, and blue-green is aquamarine. These mixtures are somehow hard to remember but using the visual concept from below learning can become easier.

instantShift - How to Correctly Handle the Colors

Another classification divides colors in two main categories:

  • Warm Colors:

    These are the ones situated on the color wheel between red and yellow.

  • Cold Colors:

    cold colors are called the ones that are based between blue and green. They radiate calmness and it is a reason of their being frequently used for the creation backgrounds. The combination between a warm and cold color has as a final result the accentuation of the last one. (Keep this idea in mind, it’s very useful when powerful contrast is required).

A web designer must know that colors have special meanings, for the most of us the white is the color of purity or red is for love but are you sure that these work all around the world? Surprisingly, in various parts of the world, the meaning suffered alterations so it’s wise to study the meaning of colors. A multi-cultural project is a real challenge from the coloristic perspective; consequently, the next tips are helpful.

  • White:

    Universally, the color of armistice;

    White is the color which represents purity and cleanliness and because of that the brides in European countries don white wedding dresses.

    In China and some African countries it is the color of mourning; it was also in Europe in the Middle Age but nowadays it’s totally outdated and I don’t advise to mark your mourning in white color. In China, white represents at the same time autumn, age, virginity and purity.

  • Black:

    It has a lot of meanings, each situation pointing out to a new significance;

    The great Pierre August Renoir said: “For 40 years I’ve been discovering that the queen of all colors was black.”

    It represents the color of mourning in Europe but it is associated with sophistication, mystery and elegance.

    In China a black product means quality and trust while in Thailand it is bad luck or evil.

    It is great when you want to emphasize other colors (did you notice that many photography portfolios have a black background – it is used because the pictures are highlighted on a black colored screen).

    Used on a large scale, black may be depressing.

  • Red:

    In European cultures it has three main senses: love and passion (Valentine’s Day is full of red hearts, all the gifts must contain something in red), danger (many traffic signs use red to warn the drivers and passers-by) and excitement (search for some online stores and study the call-to-action buttons, are they red?);

    In China red is associated with joy, good luck, in India with purity, in Japan with life.

    It influences the human metabolism, raises blood pressure; anyway it’s a strong color. Because of that, it is highly recommended to avoid the direct combinations with blue and green (it creates a powerful tension to the eyes).

  • Blue:

    It is the most preferred color of people and the fame of “safe color” is correctly established (important tip: if you have to design a website for a financial institution, it is almost necessary to insert something blue);

    The worldwide meaning of blue: good fortune, calmness, wisdom, respect, devotion.

    In Iran blue has special meanings as mourning and immortality and in Columbia soap (I am not from Columbia, but too many online sources are agreeing with this; I will highly appreciate any clarification about this fact)

    The final thought about blue is the Van Gogh idea: “There is no blue without yellow and without orange.”

  • Green:

    A trendy color quickly associated with the eco-friendly products and natural environment;

    Usually green is associated with: abundance, freshness, safety, and youth;

    In the USA it represents monetary power (dollars are predominant green, it’s obvious);

    Ireland is an entire country that is dedicated to green.

    The countries with a good density of jungles associate the green color to death.

  • Yellow:

    Did you know that studying in a yellow room your test results are better? Do you know that a baby in the same “yellow conditions” has the tendency to cry more? Studies reveal that the yellow color stimulates the mental activity, attracts attention, and combined with black, ensures the most powerful contrast.

    Taxis and school busses are mostly painted in black and yellow, guess why? Could it be about the strong contrast that attracts the eyes of the people…?

    Europeans perceives the yellow as a source of happiness, joy and hope while the Asians have a more respectable approach to it and consider it a royal color.

Choosing the right colors can’t be achieved by reading this post and few others; this kind of expertise is gained across the time and the practice is the best teacher.

A real help in selecting a proper solution related to the colors used into a website are the online applications that allow an easy handling of these. More information and addresses where the best applications can be found are here and I really recommend using them on a daily basis to make the colors “your friend”.

Experts in web design have classified the color schemes; they noticed that each project looks fine by using certain colors and some aren’t impressive enough to be used. This classification isn’t a fixed one; you shouldn’t take it as an axiom but it is useful in the final selection of the colors used.

Monochromatic

As the name itself is saying, the designs based on a single color use a monochromatic color scheme; the differences in hue and saturation being the single differences that allow for a clear visualization. Here may the achromatic color scheme be added up, namely black and white works. A monochromatic color scheme lacks the high contrast but it has the advantage that the majority of websites aren’t using such a solution. If you must create an original and modern website, a monochromatic scheme is welcomed. The websites below have already applied this idea and the results are brilliant.

Analogous

An analogous color scheme uses colors that are “neighbors” on the color wheel. The websites based on this color combination are easy to the eyes, not too much contrast, zero tension hence a powerful message can be sent but may be created amazing works.

Complementary

Definitely, here we can speak about powerful contrast; an intense message needs such a color scheme. The process of selecting a complementary color combination is simple: you select a nuance and on the color wheel choose the opposite of it. The imaginary line between your colors must divide the circle in two equal semicircles. There you should pay great attention to the selection, avoid any tension between colors else the visitors won’t be capable to enjoy your work; it isn’t easy to the eyes. Can you look at the image below more than 7 seconds? Surely, you can but the effort is pretty important.

instantShift - How to Correctly Handle the Colors

Triadic

In this case, the web designer uses three colors which are situated each one under 120°. This is the equivalent of a very balanced layout, in the most cases only two colors are preponderate and the third one is used only to highlight.

Split Complementary

The split complementary color scheme requires more refinement from the designer, but this doesn’t mean that an amateur or a less experimented individual can’t work with it. You must select a color, find the opposite on the wheel and from there, to both the left and right you are allowed to move a few degrees and choose the colors. Below, you will find this selection more evidently explained.

instantShift - How to Correctly Handle the Colors

Tetrad

Tetradic implies the use of four colors: two adjacent and the opposite of these. Apparently, it’s complicated, but it’s useful when a colorful design is needed.

From my experience, I infer that for a newbie the theory of above seems difficult and hard to put in practice but in fact many of us judge colors without realizing it. Somehow, it’s similar to the process of walking: all of us know how to walk but describing the physical process is more complicated than we may expect. Is it true? Certainly, I have a lot to learn about colors but I am allowing myself to advise you: always try to decode what the designer wants to express by using some colors; repeating this process on a daily basis, colors won’t be a secret for you.

Why are Colors So Important?

01. Colors have manipulative powers

The great majority of people don’t pay attention to this but colors may influence us. Designers noticed that some colors or the combination of these make people react while others make them very calm. As I previously said, there are very few websites of financial institutes that don’t use blue. This color predisposes people to calmness and wise decisions and these attributes are quite necessary in this field.

The websites related to the environmental issues are all using green and sometimes brown; imagine a website representing a company acting in the domain but using black and red colors. Only a genius may handle these colors to create something qualitative and having something in common with the nature. Here the same manipulative principles are applied; the colors of a website must suggest the essence of it.

02. Colors may attract or run away visitors

A cool design, very functional, respecting the rules of web design may be easily destroyed by a poor color scheme. Due to the amazing number of possibilities, users prefer to make a superficial judgment and the colors contribute to a good first impression. In conclusion, the colors are a double side entity: these may be your friend, “calling” visitors to land on your page but adding together “enemy” nuances may scare people which will never come back to you.

03. These may emphasize your message

The contrast is very important in the context of a website, by using it the main message is highlighted and the readers understand what you really want to say. I think its purpose is too obvious and I wouldn’t treat the contrast but I warn anyone that the other extremity is dangerous: lots of contrasting elements don’t emphasize more or clearer the ideas, just make the website horrible and a disaster to the eyes. Many designers consider that complementary colors can realize a quality contrast that is very wrong; there is a big difference between contrast and tension. The tension is powerful and not easy to the eyes while the contrast just highlights something.

The false reason of a strong contrast is given by the accessibility principles which require a very clear difference between near colors in order to help people with various problems. A smart web designer knows how to overcome this issue: the huge majority of the people that face sight problems usually see all the colors in different nuances of black and white or all the images have plenty of gray. In conclusion, when you are in doubt about, is recommended to desaturate your files and study the visibility; once you have no problem and everything is clear go ahead, you got the OK from the accessibility point of view.

04. Colors are the soul of marketing

Apple is almost the biggest company in the world and they got this coveted position by offering quality products but it wasn’t enough, the strategy of marketing was brilliant. What we all should learn from them is that nowadays marketing isn’t an optional component, it’s vital to attempt to be a more and more well-known brand. A study realized by the University of Loyola has a shattering conclusion: colors increase brand recognition with more than 80%.

Did you see many black and white ads? I doubt that…but have you asked yourself why? The natural colors, besides boosting recognition, make people more active towards buying or asking for services. This statement is based on another study that reveals the appetite to participation of the people that receive subliminal or normal messages with the aim of colors. As a small extension, the colored ads are read up to 40% more than the correspondents in black and white format. In commerce, colors make the difference between a well-sold product and a decent one; studies demonstrate that 80% of the customers believe that a colorful wrapper is the mark of a better product.

We all must be aware that the surveys and studies are the objective proofs that demonstrate the colors must be our friends because bring us massive advantages. In commerce, it’s evident that by neglecting them, the incomes and the profit are neglected as well; I believe it’s the same in web design but in a more subtle way. What do you think? Do you give an important role to the colors used in your projects? Please let me know and share your interesting perspectives with the readers by using the comment form.

Image Credits

Like it? Share it.

49 Comments

  1. I stopped reading this article at “”000000″ is pure white while “000001″ is another shade” in the first paragraph. 000000 is not white, it’s black. Unless you’re working off of hex color codes from another dimension.

  2. Really nice article! btw #000000 isn’t pure white, it’s pure black :)

  3. Thanks Daniel!

    • excellent job bro, continue to make it.

  4. Great useful collection.Right color choice is an important task.

  5. Great overview for someone trying to wrap their head around how choose proper colors.

  6. Yes Daniel! I agree with you. Colors play very important role in attracting the visitors towards the websites. I hope it is an interesting post regarding the different colors and their influence on the website. Thanks for sharing.

  7. I feel color collaboration of a website can be particularly important. The best blend of coloring forms one web page so interesting as well as amazing. Appreciate it regarding giving.

  8. Yes Daniel! I agree with you. Colors play very important role in attracting the visitors towards the websites. I hope it is an interesting post regarding the different colors and their influence on the website. Thanks for sharing.

  9. color combination is the core step of decorating the website, Here I become able to know the best way of creating most effective color result.

  10. Thanks. Its really nice article . color combination in a web site is very important to increase visitors.

  11. This article is really informative and I will like to get such types of article from you.But you have to keep in mind that color-selection is an important task. .because it always attracts the visitors.
    Thank you

  12. Thanks. Its really nice article . color combination in a web site is very important to increase visitors.

  13. I agree with you. Really color selection one of the important part for designing websites. It attract visitors eye and help to hold visitor for long time.

  14. wow.. Fantastic steps.. I really like it. keep up

  15. know friend and search your old friend who is in your memory then enjoy all the moment with joy.

  16. Its really nice website . good combination in a web site is very important to increase visitors.

  17. Thanks for nice articles on color selection on web page its great topic for web page color combination and selecting is really so important for a valuable site to show it attractiveness.

  18. Color is very important for any nice design.I thing website color combination is attractive the visitor.I like this articles about color combination of website.

  19. Thank you for create a nice article.You have describe deeply on color matching on Photo as well as color is important fact in design.I Hope you will back soon on other elements.

  20. This article is really informative article. but color-selection is an important task which will attract the visitors to increase traffic of ones website.
    Thanks a lot….

  21. In any design color is a important subject. In that corner this article is really nice.

  22. Thanks. I like this articles about color combination of website.Its really nice article . color combination in a web site is very important to increase visitors.

  23. this collection is very effective which i was looking for.Thanks for the great list of blogs for posting,It is a very informative post on blog posting.I agreed with your point to start posting slowly and steadily because mostly bloggers loose their interest if they star so fast. Looking forward for your new postings. Thanks for sharing!

  24. Thanks ,
    It is a very informative post on blog posting.Your collection is very effective.

  25. your post is very nice. it’s aeticle is very effective. thanks…………

  26. Great useful collection. Thanks for Admin & thanks for all.

  27. nice article. i know many things of color combination.thangs sharing it

  28. Finally I learn a lot from your post and now I think learn about RGB is too much Important.Thanks dude!

  29. Awesome and great artistically blog

  30. I’m so happy to read this post .I’m must follow ur instruction. I come back again.
    PHD degree with us

  31. This is very exclusive post. very essential articles for a web designer. Its really helpful to handle the color of a website. I have gathered adequate knowledge about website color management. Thanks.

  32. Awesome and great artistically blog.

  33. I’m so happy to read this post .I’m must follow ur instruction. I come back again.
    PHD degree with us

  34. this post is very exclusive.

  35. How nice this sight, I am happy to sharing with you.

  36. Which things i know from this site i want to share my friends

  37. I am just starting out with building sites and had no idea about the impact of colour. Thanks for your insights – a good resource.

  38. This is the essay and efficient way to the for learning to this.
    Thanks a lot to the author. we want this more efficent way of such like this.

    thanks to
    All

  39. Thanks for your insights.I think this is the essay and efficient way to the for learning to this.

    Thank you

  40. We will get well done from it !
    Thanks

  41. I am just starting out with building sites and had no idea about the impact of color. Thanks for your insights & a good resource.We will get well done from it !

    Thanks

  42. Great tutorial I have ever seen! Very informative. Specially the Monochromatic section.

    Thanks
    Md. Sadiqul Alam

Leave a Comment Yourself

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>