How to Choose Colours that Work Well Together | Video Explainer Pune


How to Choose Colours that Work Well Together

How to Choose Colours that Work Well Together


The color of a website has even a deeper impact than we can imagine. Unknowingly, for the people who visit the websites, the chosen colors will stir up different moods with the user. The design of your website is one of the primary things that will help you create a good first impression. Knowledge of color combination thus becomes very important in order to be able to design a good website.There can be numerous ways to choose a color combination. Here are some of the most trusted ways that help designers.


  • Start with a blank canvas

The first method involves beginning from scratch. Do not use an already made template in this case. Sounds challenging? Well, not so much because there are different tools that will help you do so.

  1. Adobe Kuler
  2. COLOURlovers
  3. ColoRotate
  4. Color Scheme Designer

In such a case, it becomes important to understand how many colors can you use for this design that you are making. Although, there isn’t any hard and fast rule, one should make sure that all the colors that you use should give a unified look in the end. This starts getting more and more difficult with more number of colours.

  • The primary color should cover about 60% of the space. It must act as the binding ingredient of your design.
  • The 30% should contrast with the 60% to be able to stand out and give your website a structure.
  • The 10% is an ‘accent color’. This color is usually used to complement your primary or your secondary color.

In scenarios where you have to use more than three-five colors, tints and shades can be used. An example may be content-rich web pages where you need to visually separate side bars, captions, and tables from other content. The result will unify the design without the need for a fourth or fifth color.


  • Start with an image.

Sometimes, when you’re design is ready and you look for images that will go with it, you don’t find decent images that suit your color combination. So sometimes, going the other way around can be of great help.

The image will also help you get an idea of the kind of colors you want to use for it. Our eyes recognize the color relation by instinct, which in turn provides a strong connection for the user. When you borrow a smaller amount of color inspiration from a photo, additional parts of the layout are brought to our attention.

This method, in general, will help you get an unified look to your website and also it proves to be much easier to get inspired from the pictures that we will be using.


  • Use your business goals

There is an entire branch of science that deals with human cognition and the color psychology. Thus color can be used to elicit an action in someone. Market researchers and brand managers have used color psychology to influence product engagement. Examples of this in practice include restaurants that are usually red and orange, banks and financial institutions are often blue, while luxury products are typically packaged in black.

Sales and discounts tend to use a combination of bright colors. These attract attention very well and generate a sense of urgency. The bright colors also give a playful feel that one gets with the excitement of grabbing last minute deals.

Hotel websites stand for hospitality. The colors they would want to go for are the mild warm ones in this case because that will make the visitors very comfortable.. The website for The Taj Hotels has a light beige combined with a nice royal brown.

Carefully selected color combinations along with tints and shades will evoke different reactions, moods, and feelings in the minds of your viewer.  The best way to develop your color sense is to view lots of designs.