Stop making colour palettes

How to build a dynamic, accessible system with OKLCH

Over my career I have created so many colour palettes, but I really don’t like making them. It takes a long time to pick the ‘right’ colours that work together and create accessible UI that still feels on-brand.

To show you what I mean here is the palette I made for Vouchsafe:

So many colours! This is a standard practice in UI design, but most of these have not been used at all in our app. Even worse we use them randomly. There’s not a huge difference between Grey 400 and Grey 500 but we’re somehow using both.

When I started our rebrand late last year I absolutely did not want to make another bloated palette. Instead I set myself a challenge:

Could I get everything I needed from just one colour token?

Turns out that yes, I can.

You can construct an entire colour system from a single colour, in a way that passes accessibility and looks nice. This article will explain my methods and give you a starting point for trying it out yourself.