It’s no secret that colour plays a significant role in design. Psychologically, certain colours elicit a different response or feeling from the viewer.
When it comes to designing an app, website, or brand, colour can give a strong impression of what your product is about, be used to facilitate the user flow, and even help users figure out where to click.
Given its power, It’s important not to base colour choices on personal preference, but use it with intention to achieve your goals.
Case study analysis for colour
In colour theory, it’s important to understand the concept of colour harmony, which basically tells you which colors look aesthetically pleasing side-by-side. These different colour combinations are best illustrated with the help of a colour wheel.
Let’s dive into some basic colour schemes.
Analogous colours
This color scheme is created by using colors that are next to each other on the color wheel.
These colour schemes are pleasing to the eye and often associated with nature. For example, sunsets, waves, or certain flowers have analogous colours that flow together naturally and gives the viewer a sense of ease.
Complementary colours
Colours that are opposite to each other on the colour wheel and are highly contrasting with each other are called complementary colours. They are completely opposite to monochromatic (tones of the same colour) and analogous colours. A combination of red and green make a perfect example for this type.
This colour scheme is the most suitable when you want to produce high contrast, whether you’re trying to highlight something, or have a feature stand out from everything else. The best example of this colour scheme would be in CTA buttons.
Split complementary colours
This color scheme uses a primary color with the two analogous colors to its complement. A good example would be red and teal which is made up of blue and green.
The split complementary colour scheme is similar to the complementary colour scheme, except it’s a little more easy on the eyes. It’s great for creating bold designs that aren’t overwhelming. This is a fun one to play around with.
Triad colours
This colour scheme uses three colours that are equally spaced on the colour wheel. Red, green and yellow make a Triad colour scheme.
Using triad colours is a great way to add vibrancy. This colour scheme provides a sense of fun, and gives great pops of colour to your design. However, with 3 contrasting colours, it’s important to control and balance this properly in order to avoid chaos.
Tetradic colours
This color scheme uses four colors arranged into two complementary pairs. As you can see in the wheel below, orange – purple and yellow – blue make the complementary pairs.
This is the most difficult scheme to balance since you are applying 2 complementary pairs.
In this case, you should pay attention to the balance between warm and cool colours.
How to improve your sense of colour
As a designer, you will encounter situations when you are unsure about the colour choices you’ve made. For such situations, I’ve listed out some tips that can help guide you on how to develop your sense of colour.
Try the grayscale mode
Before making any decisions, it’s important to check the usability of the colours for your design. Sometimes it’s hard to see the buttons or CTA that you want to emphasize especially when you have a lot of content. When colour is applied, you might get overwhelmed if you don’t know how to control the tone of the colour. For example, using a lot of bright colours on buttons and text might cause the user to ignore the button as there is too much going on.
Designing in grayscale first will help you analyse what functions you should be focusing on.
Just like in the wireframe phase, we create the wireframe with dark colours and strong tone to point out the CTA.
The grayscale mode will also give you insight into how people with colorblindness view your work. If you are unsure of the colours you have selected, this mode can be used to test them out. As you start designing more, you will gradually figure out which components should be highlighted to make your design more impactful.
Follow the 60-30-10 rule for colour proportions
Originally used as a rule of thumb for interior design, the 60-30-10 rule has proved to be useful for all kinds of design including web and mobile. 60% should be a neutral base colour, with 30% as a secondary colour, and 10% percent as a bright vibrant accent colour.
These proportions lead to a balanced design that is easy on the eyes.
Capture inspiration from your daily life
There’s so much inspiration out in your environment, you don’t have to limit yourself to your own design field. Whether you a UX/ UI designer or an interior designer, you can borrow ideas from different fields of art, for example traditional painting. Although we are far ahead of the times when our color choices were limited to a small batch of natural colours, seeking out inspiration from the variety of natural landscapes around us could be worthwhile. You can also look at online sources like dribbble to get lots of inspiration from your favorite designers and artists.
Useful colour scheme generators
There are a bunch of tools out there to help you generate colour schemes and palettes.
The Adobe Color CC is a free tool where you can easily import any image and get a photo colour analysis giving you details of colours that will work the best together.
2. Coolors
Coolors is one of the most complete online tools that is simple, fast and easy to use. It has a free chrome extension that allows you to save/bookmark all your favourite colour schemes. There’s a mobile app available for both ios and Android. You can also add the Adobe Add-on plugin for Photoshop and illustrator.
This is a platform where all designers and artists discuss the latest colour trends and articles. The creative community on this platform also share colours and pallets among themselves.
Color Calculator is a creative and handy interactive color wheel tool. You can also play around and explore more options by trying out the various different colour harmony formulas.
Now that you know the basics of colour theory, you can practice mixing and matching, and creating your own colour schemes. Practice makes perfect, and you will need to experiment with different colours to understand which ones work well together. This will ultimately help you take better colour design decisions.
More blogs by TTT Studios
