The way we see the world and all that surrounds us is densely molded and perceived by color and choosing and selecting the right color schemes for your website is a clever and handy way of attracting visitors so that they browse even more pages on your website.

How we value and appreciate colors is delineated by an amalgam of visual and implicit experiences in our everyday life, thus meaning that rules and tips on how to choose the colors of your website aren’t carved in stone and can be changed dramatically depending on your website’s purpose. Designing your website and the way it will be perceived is an individual experience but that does not mean that we can’t provide a few guidelines and tips on how to choose your website color palette depending on a few factors. The end goal is to make sure we end up with a good looking site that carries out the website’s purpose.

Color is non-verbal communication and we can use this as an asset and it can give you an edge so that your website can serve its full purpose. Selecting the proper color for your website can significantly be the difference between a good and a bad design so we will take a look at some ideas and concepts on how to proceed when creating the color palette for your website and how to optimize comfort and readability through the use of color and contrast.

What’s The Aim With All These Colors?

A successful online engagement depends on visitors and having the right ones for your website is really important. There is no real value attracting the wrong kind of audience when the product’s aim is a different one, and color plays a big role in this.

[adsense]

Demographics

Tones, colors, brightness, hue and contrast appeal will change depending on the type of public that visits your website. So settling for the right color pallet is a must. Keep in mind the audience that you want to attract by correlating visitors gender, age, trade, geographic location and demographics. Pinpoint your audience as much as possible without leaving anyone out.

For example, a website offering a luxury spa service for couples needs to appeal to both men and women above current marriageable age who are willing to let go of a few bucks to enjoy a quiet and peaceful time and the website has to be a reflection of this. Green is the color of sense, serenity and health, it alludes to freshness, nature and growth this combined with minor palette of brown and greys will add a sense of class and durability.

Once the target audience has been defined then the process of choosing colors can begin. Keep in mind that the broader the audience the less specific the colors will be since color meaning and significance can vary around the world and throughout different demographic groups.

Comfort and Accessibility

Choosing a good color palette is an important step but that does not mean that it will function on a website. One of the first things to do is make sure that colors that you will choose work properly on a website. Green on paper and green on a monitor or a tiny screen are not the same since the intent and the media used differ ergo we have to make sure that the scheme that has been chosen helps users and aids clientele to gain accessibility to our website.

Make sure that the color palette is not making the user lose focus on the websites purpose by using friendly schemes and contrast. High contrast is ok for small and important areas but the repetitive use of contrast can make your site stressful to the naked eye and users will probably just look away. If high contrast is a must make sure it does not visually stressful and it does not include too much text.

As an example of this take a look at image below, contrast is so high that at the end a user will not spend more than 5 minutes looking at it. Text on the website relies on visibility too much and this can cause discomfort if is shown on a big area of your website.

So how do we improve comfort for users through the use of color on our website? We need to establish that setting contrast trough different hues and tones can help us set importance and hierarchy to content and areas.
Take a look at the image below and see how footer and header are the same color, that way you can see how content is established as being different from anything else on the website and that it needs to be taken into account when looked.

See also on the next image how high contrast between the navigation menu at the top of the site helps you notice it and at the same time adds importance to it.

[adsense]

Readability

It may seem augmented or amplified but the fact that the quantity of people that are recognized as users with visual disabilities is increasing poses as a good tool for us. Making your site reachable to all of its audience it’s another main task. Implementing accessible design and color schemes to your website makes sure that it boosts readability and perception.

On the image below courtesy of Contrast Rebellion we can see just a few of the many cases of user’s disability or difficulties that can be identified along the way when designing a website. This can help you through setting a more comfortable color for everyone and make sure text is completely readable.

Contrast Rebellion advocates for higher contrast usage to improve text readability, though this does not mean that the higher the contrast the better the website. There are some things that we can do to improve readability without relying only on contrast usage.

Readability and a good correlation with color can be obtained by making sure text is properly visible. Follow some conventions; dark texts on a light background provide the best readability, use a harmonious selection and remember contrast is your friend so use it wisely.

On the image below courtesy of Breezi website builder we see how dark text on a semi light background was used to improve readability and how logos at the bottom of the image are clearer to add hierarchy to text.

Check out the examples below to see how proper use of contrast can improve readability. See how images at the top can be read with no effort at all, now, first and second one on the bottom going from left to right my not seem bad at all, problem being that using this colors with small fonts will make text hard to read and user will lose focus. Example at the lower right corner screams high contrast for sure but as you may see it vibrates too much and at the end it turns out annoying to the eye.

Color Combination and Themes

There are several ways to match and combine different hues without losing harmony, and there also are some usual sets of colors and batches that we can use to make our website pair a certain theme or topic. Themes schemes of color can be obtained by combining different colors in a still related specific way.

We can use a monochromatic set of colors where only one hue variant is present. Analogous batches are done by using colors next to each other on the color wheel. Complementary color schemes are created when we use colors that are on opposite sides of the color wheel and can be hard to manage if they are not placed properly within space, though there is a way to make this work easy and that is by using colors that are on the either side of your opposite hue. Other variants include triadic, tetradic and custom color palettes for your website.

There are other themes present that don’t follow conventional rules and are actually inspired in motifs that carry a special meaning to us. Earthy themes, Christmas inspired, Independence Day, etc.

Don’t Spin Your Color Wheels

In short it is important to choose the right color combinations for your website so that it can be visually appealing to your target audience and if you keep in mind some of the basic principles that we covered in this article, choosing the right colors for your site should be a lot more simpler. As a designer you don’t need to stress over making the right color decisions playing around with and testing out different variations can land you on the right combination for your website. So good luck and choose wisely!

Chaz Magaña is a Graphic Designer at Breezi website builder, which allows designers to easily create and manage websites with pixel-level control. He is also a part-time self-proclaimed geek who enjoys web and print design, freelancing, cinema and continuous learning.

The colour scheme on our website is an important part of our brand. Its a unique identifier for visitors that they remember and associate those colours to our name. Our colour scheme also contrasts the design of our site well to make sure our visitors are looking at what we want them to and to not make viewing the site a chore.