When it comes to colours and web design, it’s not all about just what feels and looks good. There is also science in the art that is called colour theory. Even as the topic itself is broad, the basics are what you need to know at least. Knowledge, grasp, and practice of colour theory will help enhance your creativity when you embark on future projects.
1) Base Colours: Primary and Secondary Colours
All the colours that are used in web design actually come from a combination or derivative of the three primary colours. These colours are red, yellow, and blue. Combine red and yellow, and you have orange. Combining blue and red will give you purple while mixing yellow and blue will yield green. Purple, orange, and green, in turn, are considered secondary colours.
2) Colour Schemes for Print vs. Digital design
The same colour would appear different when used in print design compared to digital design. This is because of the medium where the colour exists. For instance, the violet colour used in digital design is relatively brighter and lighter, compared to a violet colour used in print. That said, you have to learn when and how to switch between different colour schemes, depending on the intent of your design. The digital design uses the RGB colour scheme while print design uses CMYK.
3) Monochromatic Colours
A certain type of colour, such as red, can have different shades. When used side-by-side, these different shades of the same colour can create what is called a monochromatic colour effect. To achieve a monochromatic colour effect, you can dim or make th e opacity of the base or reference colour more translucent with respect to a white background. No mixing or combining of pigments are involved, but the differences in intensity of each shade will make them stand out next to each other.
You can adjust the opacity scale at varying degrees, which means that there is an endless number of intensities you can make from even a single colour. With hundreds of colour pallets and contrasting combinations that you can make and use, you have a lot of shades to choose from that best fits your intended design. In web design, monochromatic schemes are commonly used for branding purposes. Even the otherwise idle background colour of a website can still play a role in branding by giving it a shade derived from the colour brand of the website.
4) Analogous Colour Schemes
Aside from mixing pigments and changing opacities, another way designers achieve their colours’ intended effect is to create what are called analogous sets or pairs of colours. When two or more colours are analogous, it means that placing them side by side will give a pleasing and harmonious effect on the eyes. An example of an analogous colour scheme is red/yellow, green/orange, and green/yellow-green/yellow. Notice how intuitive and natural-looking the appeal of these colours are when placed side by side. Analogous colour schemes made of three parts are also known as base triads. Each base triad, in turn, can also be combined alongside each other to create a hybrid set.
5) Complementary Colours
In contrast with analogous schemes, complementary colour pairs or sets are comprised of colours that differ sharply in contrast yet still produces a gentle, seamless impression on the eyes. But whereas analogous colour schemes involve blending of the colours, complementary sets involve a high level of contrast, which is then used to highlight a certain corner, object, or element in the website’s design. Examples of complementary colour pairs include blue/orange and red/green. Because of the boldness and sharpness of contrasts, complementary colours are usually used in moderation to temper down their inherent overpowering impression.
Colours are a powerful
and important tool for all designers. As such, web designers need to understand
the colour theory, which will guide them in delivering the desired effects of
the website they are working on.
If you’re looking for a website design agency or help
with your graphic design, get in touch with us today!
We’re happy to create a solution that works for your business.