This post is also available in: Español (Spanish)
Hi! If you have a technical profile or you’re not very familiar with Design, you’ve probably struggled before with the visual part of your projects. To be honest, I still find that Design is always a challenge because there are no correct answers. We are in one of those strange and ambiguous sciences where, in theory, you can’t be totally wrong but you will never know if you are right. Many subjective things play a role in Design and, of course, different people and cultures care for different tastes. So yeah, it’s not an easy task at all.
Still, I want to make it simpler for you. This will be the first article in a collection about Design Tips! And today we start with what I believe to be one of our greatest gifts: colour!
The power of colour.
As you probably know, colour is just the way the light reflects on the objects, and in normal conditions, it is the first thing we ever notice about a visual stimulus. They say “you only have 3 seconds to make a good impression“. So I’m sure most of the attention during those seconds is given to the colours you choose in that communication act.
But why are colours so important for us? Well, from a biological point of view they help us animals identify risks, edible food and water, healthy mating material, etc.; but their importance is even greater in the case of humans since we have neglected our other senses and rely mostly on our eyes to understand the world. And, also, because for us humans, colours awaken a strong emotional and psychological response.
Therefore choosing a colour palette should always be a conscious and meditated decision, since your colours will become your visual identity. It is not a simple process, but it shouldn’t be that hard either if you know the ropes around what matters in the equation. I would even dare to say that choosing the right colour combination is reduced to only two main elements: emotion and contrast.
Before entering the details, consider giving some time to refresh your knowledge about colour terminology. It will surely come in handy to know the difference between hue, tints, shades and additive and subtractive colour schemes. If that is day clear to you, then let’s get on with the first part: colours and emotions!
Colour Psychology.
There is no such thing as a neutral colour. Just as each Power Ranger had its own character linked to the suit, we tend to associate certain values and concepts to hues. Did you know that the colour of your car can be related to your personality? Exposure to colour triggers a psychological response (and that is why you shouldn’t paint your bedroom walls in red if you ever want to sleep well).
The ideas we relate to colours may be subjective and depend on our base culture and experiences. For instance, my father loathes yellow because when he was a kid he was forced to wear baggy pants in that colour and grew a sort of trauma about it. Also, while in most of the world death matters are black, in Eastern Asia the colour associated with the transition to the afterlife is white.
However, there is a quite solid common imaginary around colours, and that is why they play such an important role in branding. There are tons of studies about it, but I think we can sum up most of Colour Psychology concepts with the following table from Class With Mack.
You’ll probably think this is pretty simple, but it usually works. How many banks, insurance or money dealing companies can you remember? How many of them use blue in its different shades for their brand image? PayPal, Visa, Bank of America, City Bank, American Express, Deutsche Bank and many more! Because blue is a calm colour that often communicates reliability, sincerity and seriousness. Check out the following infographic. Do you think these brands carry the same values as their colours?
As I said, choosing a colour or colour palette should always be a conscious and thorough decision. What we want to communicate with our brand image should take advantage of the universal colour psychology principles in the company’s favour, while being aware of the cultural and geographical nuances. Still, there is also an important criterion when choosing a hue that can put the colour psychology to a second-place: differentiation.
What’s the point on making your new bank logo blue too, when there are already that many blue money related companies? Colour psychology is important, but so is competition analysis. You will want your brand to stand up against its rivals and be remembered by your potential clients, so sometimes you will have to work with colours that are not the obvious choice for your activity, but will get you further and make you memorable.
In a nutshell, take into account what colour psychology has to say about the values you want to transmit, but keep an open mind when choosing colours that can make you special amongst your peers. And this is a nice allegory to introduce the next point of this article: for your brand to pop up, you’ll need contrast. In other words, you should always consider colours in context.
Importance of contrast.
Colour schemes or palettes.
Now we’ve considered your rival’s colours, let’s forget a bit about them and just focus now on your visual identity. Your product may have a dominant colour, but in most of the cases, it will also need other hues or shades that match for any visual communication. That is what we call a palette or colour scheme: a collection of colours the designer chooses for a brand, product, graphic or multimedia design.
Here are some examples from Brandcolours.com, the biggest collection of famous companies colour codes:
Colour schemes are usually divided into two sets of colours:
- Primary: are the dominant colours, they can be found in background colours, logo, menu, buttons, etc.
- Secondary: are used mostly for accent purposes.
Palettes usually also contemplate several shades of the same tone, to give consistency. However, if you only use values of a chosen colour (that same colour combined with white and black), it is not usually very striking, is it? The main thing a colour scheme needs is CONTRAST.
Colours in context.
Check the circles below. As you can imagine, the inner circles are always the same colour, size and position, but the outer colour makes us perceive them differently. The power of colour is strongly related to its surroundings. In other words, contrast is achieved by using colour combinations that make tones pop up.
It is a choice, of course: we may want combinations with little contrast, so they give a softer, calmer impression; but we may also want to be visually striking. We may also combine these degrees of contrast depending on the elements we are styling: for instance, a background with a soft pattern should have low contrast, but a graphic bar chart or text-blocks should have good contrast to be easily read.
What is important here is to know how we can generate more or less contrast. But, hey, and this is probably the most technical part of colour theory!
But before, remember that monochrome schemes are also an option! And by the way…
Pro tip: have you considered starting with a grayscale?
Did you know certain designers and illustrators initiate their projects using only a grayscale? Working between blacks and whites force us to create contrast in a single colour spectrum, without other distractions.
Starting your colour works without colour (lol!), just values, has the following advantages:
- It constraints us to use a limited number of shades and tints to achieve good contrast.
- It makes it easier to test different colour schemes later on since we know how many different colours we will need (and tools like Adobe XD or Illustrator let us swap swatches quickly and painlessly once we have our grayscale prototype).
- It trains us to think about other elements that can generate contrast apart from colour: like sizes, shapes, positions, layouts, etc. This is very useful for UI and UX works.
- It is good practice for accessibility. Remember that some people have disabilities perceiving colours (different degrees of daltonism), and we have to design for them too!
I personally don’t use this technique in my illustrations regularly -they end up darker than I would like them to-, but I often start prototyping in grayscale and find it quite useful. I’ve you’ve never tried it before, give it a shot! It will definitely enrich your workflow.
Scientific methods to choose a harmonic palette.
Apart from using palettes with different saturation, temperatures and values, we have certain formulas for choosing colour combinations. Remember the colour wheel? Now it’s the time to go back to it since we will need it to learn about colour harmonies. You have to think of these as the chords you play to get to softer or stronger colour melodies (synesthesia, anyone?).
Let’s check them out!
1) Analogous colour scheme.
This scheme uses the main colour and the two adjacent hues in the wheel.
They have little contrast and tension, but in exchange, they are very harmonic and integrated.
Palettes using analogous colours have a modern, sophisticated look. They also emphasize the colour range they work on so that the emotions associated with them will be amplified.
Here are some examples of branding and illustrations based on this scheme: Gives a sense of balance and stability, doesn’t it?
2) Complementary colour scheme.
This is the way you can achieve the most contrast between too colours: by using the diametrically opposed hues in the colour wheel. These colours are called complementary because it you mix them, you get grey as they cancel one another.
This is the opposite to the previous scheme: we get the most contrast and tension, resulting in compositions with a lot of power and intensity, but little to none harmony. You know what they say, opposites attract!
With these kind of clashing palettes, we get a strong impact, so it is used frequently. However, remember this is a risky combination when we use it for texts and backgrounds, as it has terrible readability. Check out how these logos solve this issue by darkening the complementary tone or using a very bold font. Logos are one thing, but never use it in text blocks!
Did you notice how Disney uses that scheme in many of their princesses?
3) Split-Complementary colour scheme.
This is a very frequent colour scheme as it is a softer approach than using complementaries. Instead of taking the exact opposite of a colour, we choose the two adjacent hues of the opposite.
These palettes keep a great contrast without it being extreme, and they have less tension. They are considered a great choice for beginners and an all-around nice solution.
If you pay attention you’ll probably notice many brands that use these colour schemes.
4) Triadic colour scheme.
This harmony is achieved by chosing colours that in the wheel form the shape of an equilateral triangle.
It is also a frequent choice because it has the positive points of the previous schemes: a good degree of contrast and vibrance with good balance and integration. Another advantage is that these colour schemes let us work with more flexible combinations.
Again, to make the correct use of the triadic scheme, we should let one of the colours dominate and leave the other two for accent purposes. That way we will avoid readability problems and get a better sensation when looking at these hues and tones.
5) Tetradic and square tetradric colour scheme.
After the triangle, we have the rectangle! And an equally spaced rectangle is a perfect square. In both of these harmonies, we are working with pairs of complementary colours.
In the first case, we have a mix of the contrast of the complementary with the softness of analogous colours. You usually also get a good balance between cold and warm hues. The square variation is the most extreme and the contrast is bigger, but you get a wider range of hues to play with.
However, in both cases, their limitations are the same: if you use all of the colours in the same amount you will get an undesired cluttered circus-like design. It is very recommended that you let one of the colours be the dominant one and use the others to emphasize.
As a note, Playstation and Microsoft brands don’t even use these tetradic tones regularly. The Sony console changed its logo to a pure white one and its interfaces are mainly blue and white. Microsoft websites use a light scheme based on white and a screen-of-death blue which is different from the one in the logo. Slack main colour isn’t even in this logo I attached in the article, it is a shade of magenta, but slacks uses these other hues for their infographics and accent interactions in the app.
And now you know about the scientific methods we can use to choose a colour palette! As a way to sum up all that we’ve seen until now, check out this great Designmantic infographic!
DOs and DON’Ts when choosing colours.
Now that you know how to choose and combine colours, completing your palette doesn’t seem that difficult, does it? Still, before we check some super cool tools to start, let me give you some final advice.
Tips when choosing:
- Get inspiration from nature and real life. Scientific methods are cool and all but, in the end, you know pretty well what inspires you. Pictures, scenes, even works of art. Find the pieces that move you in the right direction and extract your palette from them!
- Use the 60-30-10 rule. This idea comes from interior design and means you should use your colours in a 60%/30%/10% proportions. This formula works because it balances the colours and makes it easier for the eyes to go from one focal point to the others. It is also very simple: 60% should be your dominant hue, 30% should be your secondary colour and only 10% should be allowed for your accent colour. Of course, this works with three, but you can keep a balanced proportion with one to two more colours if you keep a similar division.
- Embrace “neutral” colours. Combining your desired colours with white or black has the advantage of highlighting the rest of the palette, keeping your scheme with good contrast, readability and comfort for the eyes.
- White space is good. This is true for layouts and for colour schemes. Your accent colours will always weight more than the rest of the elements of your brand. Give them the space they need and avoid cluttering your designs.
Things you DEFINITELY want to avoid:
- Pure colours. And by pure colours, I mean these:
. Never, and I mean NEVER, use a colour that is 100% saturation of a primary colour. They’re hard on the eyes and ugly. You can get a strong colour if you want, but add a little black or white to it, and even mix it a bit with their closer hues. The resulting colour would be much more appropriate. - Pure black. I won’t be as nazi as with the previous point but the idea is the same. Pure black is usually unnecessarily dark and contrasted. A dark shade of grey looks much better. Wanna bet? Open the inspector in any websites you visit and check out how many of them use the #000 colour in their texts or footer backgrounds. You won’t find many. It’s easier on the eyes and more elegant.
- Combining complementary colours as text and background. I already mentioned this, but please don’t do that -unless you really REALLY know what you are doing-. Have pity on your readers.
- Little contrast. I know this goes with the tastes and you may want a very integrated image, but if it’s about Design and not Art that we are talking here, you need things to be readable and you have to think of people with visual problems or colourblindness. The design should always be inclusive.
Super cool tools to create your palette.
Now you know the theory, let’s get to the action! Let me introduce you to the best tools to create and export colours palettes!
Coolors
This one is my personal favourite colour scheme generator because it gives us a wide range of tools while keeping it simple:
- It’s intuitive and quick. It’s perfect to play around with the spacebar and discover nice colour combinations.
- You can extract a palette from a photo or picture you like.
- Has a tool to test your palette simulating different degrees of colour blindness.
- Also has a zen mode so you can concentrate only on the colours and forget anything else.
- Gives you plenty of exportation options for your colour schemes.
Paletton
Paletton on the other hand lets you choose using the idea of the colour wheel as a central figure. You can start by considering one of the most frequent harmonies and then move around the wheel changing hues and values to get to a nice and striking palette. As a bad point, it is pretty slow, you can’t create an account to save your work and is swarmed with adverts.
Color Hunt
This site gives you access to already existing and rated palettes, suggested by other users. If colours are not your forte and you would rather just use something that other people have already judged as pretty and functional, Colour Hunt allows you to skip the choosing process. But, now you’ve read until here, you are now able to understand if the suggested colour schemes work or not for you ; ).
Flat UI Colours
Very similar to Color Hunt. It provides palettes with a wide range of tones and hues for your apps and websites, based on flat design.
Adobe Color
I left the best for last. Adobe Colour is by far the most complete tool. Includes all the previous goodies and also lets you explore and choose palettes made by others. It is integrated into the pipelines of the Adobe Suite so you can always access your library from your design apps. In addition, it also has SASS and LESS exportation options. Still, it’s sometimes a bit tricky to use and not that intuitive.
Extra cool inspiring thing – I Love Hue ❤
Want to train your skills differentiating colours? There’s a super cool puzzle mobile game series: I love Hue and I Love Hue Too! I assure I don’t get paid from them xD, I just love to share what I like. Try them for a very relaxing and pretty visual experience. For me, playing it’s like some kind of meditation.
And that is all for this first part of the design tip series! Now you have the knowledge and the tools to start creating striking and beautiful colour schemes for your designs, websites, illustrations or whatever you desire.
Let us know if you found this article useful, and share your colour experiences with us if you’d like!
Further reading…
- Wikipedia’s Colour Theory entry.
- Intro to Color Theory from Tiger Color.
- How to select the colour for your logo design from Designmantic.
- Guide to create illustrations colour schemes from Art Rocket.