Skip to main content

Master the golden rules of incredible UI design

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

Colour can be used for visual hierarachy  (Image credit: Daniel Schwarz / InVision)

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

Contrast example

Ensure your contrast meets accessibility standards (Image credit: Daniel Schwarz / InVision)

Next, we'll need to check our colours for optimal colour contrast. There are a variety of colour tools (opens in new tab) that can do this, for example the Stark Plugin (opens in new tab) for Sketch and Adobe XD or Contrast (opens in new tab) for macOS. However, an online solution such as Contrast Checker (opens in new tab) or Colour Contrast Checker (opens in new tab) 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 (opens in new tab).

Next page: CTAs

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Previously a design blog editor at Toptal and SitePoint, and before that a freelance product/UX designer and web developer for several years, Daniel Schwarz now advocates for better UX design alongside industry leaders such as InVision, Adobe, Net Magazine, and more. In his free time, Daniel loves gaming, café culture and Wikipedia, and also travels perpetually when there isn’t a pandemic.