Colour theory is a very wide area of design, that many classes and course are dedicated to for committed designers. However, basic colour theory is also something that the average person can explore. Though you probably don’t think about it, you interact with colours on the web every day. Colours can affect the usability, user experience, mood, and overall appearance of a website, and these are things you need to think about when building a site. With the thousands of colours that are available to use in web design today, it’s important to know what you’re doing.
How do We See Colour?
Online, we see colour in RGB mode (Red Green Blue). This is because the colours we see on the screen are created by beams of light within the computer, and those beams of light come in three different colours that mix in certain variations. Red Green and Blue can each have a value between 0 and 255, and together can make 16777216 possible colours. With the colours being listed in (R, G, B) White is (255, 255, 255) while black is (0,0,0) and everything in between is a slightly different colour. These codes are used to convey the particular colour you want to computer systems all over the world.
Just to confuse you a little more, I should mention that you may have seen colours in your web design displayed in hexadecimal form like this: #000000. These colours offer the same variety as RGB colours, but are just a different system of conveying them. Technically hexadecimal colours translate to #RRGGBB with each pair of letters representing a different level of red, green or blue light.
Why do Colours Matter?
Colours make up everything we see online. From the pattern in your header to the shape of your logo, to the readability of your text, colour is everywhere. Great colours go unnoticed, and make a website attractive and easy to use, while bad colour choices stand out. While colours on their own may not be ‘ugly’ certain colour combinations definitely are, and can hurt the potential success of your website. That is why we need to consider not only colours on their own, but also how they interact with each other to affect the readability and mood of your website.
In the case of colours, contrast is usually good. Contrast is what makes it possible to see one colour against another. If you wrote on white paper with white chalk, you wouldn’t be able to see the writing, because there is no contrast between the colours. So, to make text legible and to make items stand out, you create contrast. Contrast is the best when the colours are directly across from each other on the colour wheel, like white and black, or red and cyan, though contrast also exists in other colour combinations from opposite sides of the wheel (cold or warm).
That is why 99% of the websites you go to will have a white background with black text. It provides the most contrast between text and background, and makes it easy to read. If you had text that was light blue on a white background, it would be difficult to read, strain the eye, and drive readers away. Though the wide array of colours out there make it easy to get creative, text is one area where you should be a little boring, and choose a very dark colour on a very light background.
Contrast can also be used to draw your users attention to a certain place on a page. Think about landing on a website that is compltely white, except for one bright pink box in the corner. The contrast between the two colours will make your eyes travel immediately to the pink box. Though you really shouldn’t design a completely white website with a pink box in the corner, this same technique can be used in more subtle ways to carry the readers gaze around the page in exactly the path you like them to travel.
Whether we realize it or not, certain colours compliment each other, while others don’t. If you think about kindergarten and playing with the colour wheel, this is likely a lesson you’ve learned before. Colours that are opposite of each other are complimentary, and make attractive and relaxing colour combinations for the eye. This includes colours pairs like purple and yellow, orange and blue, or red and green. Though these colours are attractive when paired together, they do not always provide enough contrast to be used in places like text. Yo wouldn’t want to look at a yellow page with blue writing, because even though the colours compliment eachother, they are both too bright to provide an easy read.
Colours can also determine how people feel when they interact with your website. Warm colours like red, orange, and yellow make people feel warm and excited, while cool colours like green, blue, and purple make people feel tranquil and relaxed. A white website like mine appears clean, modern, simple, and strategic, while pops of colour make it more exciting and casual. Each colour and colour combination you use has a different meaning, and when you are designing your site or brand you should look into what the colours you are using mean, and how they make people feel.
Just as buildings need to be accessible to people with disabilities by having things like wheelchair ramps, websites need to be accessible as to everyone as well. Though you don’t need to go as far as installing a different entrance, you do need to consider the different types of people who might be accessing your site. When it comes to web design, this mostly means people who have some sort of colour blindness, since websites are so highly visual. To design for people with colour blindness, which makes up about 5% of the population, you just need to make sure that there is sufficient contrast between different elements of your site. While there are different kinds of colour blindness, every type includes not being able to see a colour as it truly appears. So, that colour is transferred to a different colour or shade of grey. If colours on your site are contrasting enough, like black text on a white background, the colours shifting slightly or turning grey will not affect people’s ability to read the text. But, blue text on a yellow background like we discussed before might translate into shades of grey that are too similar and make it difficult to read. This is yet another reason why contrast is vital in web design.
Another thing you need to consider when choosing colours for your website is who your target audience is. If you’re creating a website for children it might make sense to use a crazy colour combination that adults might find unattractive. If you’re targeting seniors, you need to focus even more on accessible colour choices as colour blindness rates increase with age. Think about your target audience and what they would want to get out of your website. Are they rushed and just coming to get quick info, or are they going to stay on your site for a while to read? Are they relaxed and in need of some excitement, or stressed and in need of some calm? Every audience that you are targeting likely has the perfect colour scheme to suit what they want, and what you want to convey.
Whether you realize it or not, colours play a huge role in your website. From beauty to erasability, they can make or break a website, and determine whether readers keep coming back. No matter how good your content is if your colours are unattractive or make it difficult to read, users will not return.