in Design

Basic Colour Rules for Web Designers

There’s an ongoing debate about how humans perceive colours. Some say that nobody sees the exact same colours as someone else, but that by perpetuating what we’ve been taught by our parents or grandparents we’ve just somehow managed to reach somewhat of a common ground. So, in theory, green looks the same to everyone because we’ve been told it’s the colour of plants in spring and summer and blue is also safe, because it’s the colour of the sky during midday. Still, the way we categorize shades of the same colour is still a topic that is always open for debate and can sometimes lead to lengthy and heated arguments.


Nevertheless, it is clear that colours have a very important role to play in how we visually perceive most things. Therefore, extra care should be taken when choosing what combination of colours to wear in our outfit or what shades are suitable for decorating our houses. The same principle should be applied when talking about web design, albeit the rules may vary somewhat. It’s normal that a mix of colours that makes sense on a t-shirt or on the walls of a house does not translate just as well on a computer or phone screen. That’s why it’s vital for web designers to understand a set of basic rules about how to combine colours, how to choose colour schemes and how to send out the correct message to viewers by employing this simple, yet powerful tool.

Colour meanings.

Yes, I know, saying that colours have meanings sounds like something very girly and very infantile. But, trust me when I say, it’s not. Multiple studies have show that humans perceive certain colours and their shades or tones in certain ways. Some colours may inspire trust, while others will give off a sense of wealth or even signal if your website is targeting males of females (remember how when someone is having a baby everybody says that pink is for girls and blue is for boys).

Here are some basic outlines of which colours mean what:

Green means freshness, nature and dynamics. Choosing a green colour scheme for your website is a good idea if you’re promoting an environmental organization or a sport that is practiced outdoors, like mountain climbing.

Purple means wealth, tranquility and spirituality. Purple has acquired some of its meaning due to the fact that the Catholic church has been using it, along with red, quite frequently. Therefore, we’ve come to unconsciously link it to riches and spiritual matters.

Blue means trust, integrity and peace. A blue colour scheme would be a great choice if you’re designing a website for a government or public institution, because it will trigger a sense of tranquility and security in the viewers.

Pink means romance and love. Nowadays, pink is widely recognized as being associated with women and all things girly. A pink theme would be excellent for a website selling toys for little girls or one that is advertising a Valentine’s Day event.

Yellow means happiness and energy as well as cowardice or potential hazard. It really depends on your content, if you’re building a website for a toy store, yellow will come off as positive, but if you’re making a website for a campaign to raise awareness for a disease, its meaning will be drastically altered.


Always keep in mind these basic meanings when creating a colour scheme and try to choose colours whose meanings work together. If you use too many colours you’re going to end up sending too many conflicting messages to your viewer and you’ll leave him or her confused and displeased.

Pure colours, shades, tints and how to use them.

Pure colours are what you called during arts class, colours straight from the tube. They’re vibrant and demand to be noticed. You can use them efficiently for areas of your website where you want to focus your viewer’s attention. However, don’t overuse them because too many strong colours or even too much of a single strong colour can become visually tiresome and annoying.

Shades are darker versions of pure colours, kinda like you’ve mixed them with black. They can also be very useful if employed correctly. For example, a darker shade of blue will inspire more trust in a viewer than a lighter one. Likewise, using a dark purple will add sobriety to your design, as well as a deep spiritual feeling.

Tints, which you might also call pastels, are pure colours toned down a bit. Such colours work very well in the background, because they give off an impression of calm and quiet. They’re usually viewed as being on the feminine side, although they can be successfully  employed on websites that target men if they’re used correctly.

Always try to spear a thought for what kind of colours you’ll use in your colour scheme. If you’re looking for something mature and elegant, go with shades. If, on the contrary, you’d like something that appeals to the younger generation, choose something vibrant like pure colours. Whatever your target might be, if you keep in mind how your choice of shades or tints will affect them, you will have a much better design in the end.

Dos and Don’ts.

As I’ve previously said, you always have to keep in mind what your website is trying to convey when picking a colour scheme. Personal preference shouldn’t really matter. Yes, it would be perfect if you could design and deliver a website to your client that is based on your favorite colour, but if you like black and your client owns a kindergarten, your thoughts on what is suitable will definitely clash.

Always take into consideration what type of content you will have in your website. For example, if the website will contain a fair amount of text, it needs to be easy to read and users should not find it tiresome. You can easily achieve this by choosing a colour for your font that has a good contrast with your background colour. Also, if your website will have picture galleries or sliders, try to choose a neutral colour scheme that will work with any type of photos your client chooses to upload.

Take into account your target audience by country. If you’re designing a website for a company based in The Netherlands, remember that orange is their royal house’s colour. Similarly, green has an added meaning for Ireland as it’s the colour of their patron, Saint Patrick. Red, when thought of in association with Eastern European countries, leads many to think about communism and so on. The examples are numerous.

Try to have as best an idea as possible about the type of graphics your client is aiming for. For example, black and white are ideal colours for 3D designs, while green and red would make a very poor choice, both because they have similar luminance as well as being a problem for the colour blind.


To sum up, saying that there’s an exact science when it comes to choosing colours for your web design is a bit strong, but saying that there are some basic rules that can be easily followed is a decent conclusion.  If you’ll take heed of at least some of them in your future designs, it’s most likely that you’ll enjoy positive results at the end.


I read, I write, I sleep.