The color scheme of your website is an important component of the user interface (UI), as it contributes to the overall aesthetic appeal and, as a result, the quality of the user experience. You might not be aware of this, but a significant number of site visitors base their purchasing choices on the colors used on the site. Therefore, selecting the appropriate colors for your website design requires a lot of careful consideration.

Colors trigger certain feelings on sight. There’s a lot behind color psychology – we look at the main colors and the feelings they inspire, as well as the brands that use them.

Whether you’re building your new website’s brand from scratch, or are rethinking the palette of your existing website, this guide will help you choose the right color scheme.

The best way to decide on a primary color is to think about the vibe of your product or service, and peruse colors that fit that vibe to find one you like. If you already have a colored logo, it makes sense to have a primary color that matches your existing branding.

Different colors are used to convey various emotions, so it’s good to choose one that matches the intention of your business or brand.

A good starting point for choosing additional colors is to consider color complements. Every color has counterpart that makes it “pop”, and these are known as color compliments.

For example, if you’re using a predominantly green website, a good idea is to implement red calls to action, or use red to highlight important features that you want to catch the eye of any readers.

Try to only have one or two colors on top of your primary color otherwise it may look cluttered.

Using a color wheel will help you find color that work together. Complementary colors are located directly opposite from each other, and the three primary colors are on the triangle points.

This is an important although an easy choice to make, since it really boils down to two options.

The easy option is to choose black, but purely black typefaces aren’t that common. A black typeface on a white background can lead to reader eye strain, as there’s a 100% contrast.

While explicitly colored typefaces should be reserved for highlighting links and important bits of information. You can use gray or gray-tinted color to give your website a softer, more inviting look. There isn’t much room for experimentation, but it can be worth coloring bits of your text for that finishing touch.

One thing you can do to strengthen your brand is to use various colors with a similar saturation. Saturation is another way of saying a color’s brightness, and using it across various colors keeps them visually consistent, like Innocent has done below.

Everything being a single color related to a brand can become a bit stale, so it can be fun to take your primary color and play with the saturation a bit – like TechCrunch have done with their social sharing buttons.