• By admin
• no comments

How to choose colors for website design

Pablo Picasso, the famous artist, had said: “Colors, like features, follow the changes of emotions.” And how true that is? Don’t we get affected by different colors? We feel soothed by some, agitated by others, happy by some, depressed by others, and so on. While it’s true that everyone may not be affected in the same manner by the same colors, we can still make some generalizations regarding what feeling or mood each color induces in people.

Color is one of the major factors that decide how we see and retain information, which is why choosing a color scheme for your website or app becomes extremely important.

Color Basics

Let us first talk about the basics of color. We all know about primary and secondary colors, right? Primary colors are those red, yellow and blue. Secondary colors are those which you get when you mix two or more primary colors – green, purple, orange. You also have tertiary colors – which is what you get when you mix a primary color with a secondary color.

Hue more or less means color; shade is the darker versions of each hue (depending on amount of black added to the hue); tint is the lighter version – yes, you get it when you add white to a hue. Tone is created when you add both black and white to a hue to get a different effect. In digital terms, we use the word ‘saturation’. Saturation actually refers to how vibrant the color is. The term ‘value’ is also used, which refers to the brightness or darkness of a color

In design, you basically use two types of color schemes – RGB (red, green, blue) or CMYK (cyan, magenta, yellow, key/black).

Then we have contrast. Contrast refers to the variance in illumination that makes an object (or its image) distinct, and is measured in a scale of Contrast Ratio. Higher the contrast, more the distinction the object has (red text on a white background). Lower the contrast, lower the distinction the object has (medium blue text on a dark blue background).

CMYK is the subtractive color model, meaning you need to take colors away to get to white; the more colors you add, the closer you get to black. CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you get black; if all four colors = 0, you get white.

RGB displays are more suited for digital displays; the more color you add, the closer you get to white, and vice versa. In computer design, RGB is created with scales ranging from 0 to 255. So, black is made when R=0, G=0, and B=0; White when R=255, G=255, and B=255.

There’s a lot more to be mentioned about the technicalities of contrast ratios, RGB models and the color theory on the whole, but I don’t want to bore you with too many technical details. Just bear in mind that a computer lets you create hundreds of colors by subtly varying the black or white levels in each hue, and with numerous permutations and combinations of the available colors.

But merely this knowledge will not help in choosing a website color scheme. You also need to know a bit of color psychology and the brand or product for which you are designing the website.

Choosing Colors or Color Themes

• Now that you’ve gone over the basics of color, the question arises as to how you will pick the right colors for your website design. There are a few factors you need to consider before you start picking out colors:
• Consider what your app, website or brand stands for. What do you represent here, and what emotion do you want to bring out in your viewers? Some examples can be: If your brand or product is eco-conscious, green and earthy tones are a natural choice; if it is chocolate, varying shades of brown is definitely the first choice; anything connected with healthcare, shades of white and blue with tinges of red and/or green may be ideal.
• Who is your target audience? Pink, peach and lilac shades are usually best for female products and brands, whereas red, black, blue and brown attract males.
• Does the brand/product already have a color scheme? Then their website should stick to it too.  Like coca-cola – the site uses red and white predominantly, with varying tints and saturation of grey and black. The brand personality and message needs to be conveyed by the colors.
• Is your focus on content or visuals? You may want to use neutral colors if you want to draw attention to the content; this is especially so if your app is related to sales or business arrangements.

Color Schemes

The way in which we perceive colors depends on the way in which they are used. There are different color schemes like:

1. Analogous: This scheme is created by pairing one main color with the two colors right next to it on the color wheel, and if you want a 5 color scheme, you can use two additional colors found next to the two outside colors. You can use these to create designs that are softer and with lesser contrast – when you want a pleasing blend of the various elements.
2. Monochromatic: Yes, it’s basically one color, but you can use different tints and saturations for a neat, professional look.
3. Triadic: Use this scheme to create a high contrasting scheme without changing tone. This is created by picking colors equally placed in lines around the color wheel. To make it a little less overwhelming, you can use softer shades of two colors while retaining the original shade of the main color.
4. Complementary: This color scheme provides the highest contrast; choose this scheme to highlight important elements in your website design. The more important an element is in your application, the more important contrast is in its presentation.
5. Split Complementary: A slight variation of the complementary scheme, this scheme uses one dominant color and the two colors directly next to that color’s complement. This creates a softer color palette than complementary color scheme but retains the advantages of contrasts.

Choosing the Best Color Combinations for your Website

Now that we have some basic knowledge of how colors are created and represented on computers, and how people more or less view colors, we can use these bits of knowledge to create the best color combinations for websites.

Whatever the computer tells you, you can also use your aesthetic sense, and of course, not losing sight of the branding requirements, to see what colors go well together. There should be harmony among the colors you choose. Start out with a limited set of colors, and add to it only if and when necessary. Too many colors will overwhelm both you, and the viewer.

You also need to be consistent throughout the site; if you use a red CTA button on your home page, keep it the same throughout the site; if you use purple for latest offers on your home page, and make sure you use the same color wherever you’re mentioning the special offer, and so on.

There are also various tools available to help you pick the best colors for your website design, in case you still feel confused or lost. Some of the best are Adobe Color CC, Mudcube Colour Sphere, Color Hunter, and the Color App.

Remember that eventually, regardless of what method you use, the website design has to resonate well with the viewers. It’s possible that you don’t get it right the first time, because well, you can never tell with people! However, we are pretty sure that you won’t go too wrong if you follow these tips.