Rule #2: Three colours is enough
Colours can have a huge impact on a design – there's no question about it. But it's not necessarily about how beautiful they are. When it comes to UI design, colour is habitually one of the first things that we enjoy dabbling with, but we're taught that diving straight into visual design is a bad thing. This is still true, however, when it comes to creating design systems – colour should be a top concern because it plays many different roles.
Colour in UI design can be mighty effective, but since some users (many, actually) suffer from various types of visual disabilities, it's not always reliable.
That being said, it's not necessarily about the specific colour that's being used, but rather the type of colour. This may not be true when it comes to branding – since colour is used for emotional impact in this regard – but with UIs, colour can also be used for visual hierarchy.
01. Choose your colours
Colours hold meaning, so it's important to not have too many of them. Too many means more things that the user has to understand and remember, and for us, more colour combinations to worry about.
Generally speaking, this would be the recommended format to use:
- A call-to-action colour (also the main brand colour)
- A neutral light colour (ideal for text-heavy content)
- A neutral dark colour (better for UI elements, and also for dark mode)
- Then, for all of the above, a slightly lighter and slightly darker variation
The final point on the list means that it's easy to achieve the following:
- Dark mode will be easily possible
- Our CTA colour will never conflict with other colours
- In any scenario, we'll can emphasise and de-emphasise as we wish
02. Create a palette
With your UI design tool of choice, create one fairly large artboard (tap A) for each colour (named Brand, Neutral / Light, and Neutral / Dark). Then, in each artboard, create additional smaller rectangles displaying the darker and lighter variations of the colour and also the other colours themselves.
Generally, consider slightly lighter and darker as 10% extra white and 10% extra black respectively. When you're done, display a copy of the typographic styles on each artboard.
The colour of these text layers should be neutral light, except when on the neutral light artboard, where they should be neutral dark.
03. Check contrast levels
Next, we'll need to check our colours for optimal colour contrast. There are a variety of colour tools that can do this, for example the Stark Plugin for Sketch and Adobe XD or Contrast for macOS. However, an online solution such as Contrast Checker or Colour Contrast Checker will do just fine.
Check the colour contrast for each combination and tweak the colours accordingly. If you're not sure which colours to use, try using Colorsafe's recommendations.
Next page: CTAs