How to use colours in your design like a pro
Choosing the perfect colour combination can sometimes be complicated for most designers. Even with the numerous colour websites out there that help with choosing colour palettes, it’s still hard figuring out how much to apply from a certain colour, and when/how to actually apply these colours and in the right proportion to your design.
This article (inpired by Tolulope Saba and Dan Romero) is all about how to generate your palette from a single colour and how you can easily apply colours to your designs like a pro using the 60–30–10 rule.
A few things to consider when choosing colours
One thing to note when picking your colour is to always consider colour psychology and how it relates to your design. By choosing a colour and using it in the right proportions, you can set a certain mood or draw attention to something. You can create an atmosphere of elegance, or convey an image of playful youthfulness just by choosing the right colour scheme.
Having this knowledge can help designers evoke the right emotion and call users to make the expected action.
Another thing to note is that you should try using vibrant and saturated colours to get the best possible palette.
The 60–30–10 rule
60–30–10 is a timeless and incredibly simple-to-use rule borrowed from interior decoration that can help you put a color scheme together easily. We choose a dominant color and use it in 60% of the space, a secondary color in 30%, and a final color in the remaining 10% as the accent colour.
Creating palettes
We need a colour palette that we’ll apply to the 60–20–10 rule. You can generate your own palette from a single colour by using two techniques. You either adjust both the Saturation (S) and Lightness (L) values or just the lightness value (to generate a more)
First technique
The first step is to pick our primary colour. With this, we can generate our secondary and accent colours.
To generate our secondary colour, we duplicate our main colour, then set our Saturation (S) value between 5–10 and keeping the Lightness (L) value between 90–95.
The final step is to generate our accent colour by setting the Hue (H) value to 50 while keeping the Lightness (L) value between 70–80.
Let’s apply the colours we generated to our design. We use the main colour on 60% of our designs (can be used as background colour and on main elements of the design), the secondary colour on 30% of our design (2nd level elements, text and icons are examples of where you can apply them) and our accent colors on… well, CTAs and accent touches.
The beauty of this rule is you can switch things up and play with variations using the generated palette!
Second Technique
We can also generate a whole different palette from our colour by changing the colour’s lightness value.
We generate our secondary colour by setting the Lightness value to between 20–30 and our accent colour by setting the Lightness value between 80–90.
