Choosing brand colours: how many, and where do they go?
Picking a palette looks like a matter of taste, but in practice you are building a system. How many colours you need, where each one goes, and how dark mode works.
Clients usually start like this: "Let's go blue, but a bright blue, maybe orange next to it, and a bit of green would look nice." Put three bright colours side by side and none of them stands out.
A good palette has few colours, and each one has a job.
How many colours do you need?
One accent colour
Your brand colour, used on buttons, links and anything that needs attention. You should have exactly one.
Each screen should have one place that draws the eye. If a page has three red buttons, the eye can't tell where to go and none of them reads as the main action.
One neutral range
An 8-10 step grey scale from white to black. Text, borders, backgrounds and shadows all come from here.
Don't make the neutrals pure grey. Mix in a trace of your accent, so everything comes from one family and the page holds together.
Three status colours
Success (green), warning (amber) and error (red). These are for functions like form errors and notifications, and they don't count as brand colours.
If your accent is red, make it clearly different from the error colour so the two don't get confused.
Colour should never carry information on its own
This is the accessibility rule people break most often. A form that says "fill in the red fields" tells a colourblind user nothing.
Always pair colour with something else: an icon, a word or a line weight. If a chart has three lines, give them different patterns as well as different colours.
Check contrast from the start
The most common palette mistake is using the brand's bright colour for text. Bright orange on white gives about 2:1 contrast, which is unreadable.
Make two versions of every accent colour. Use the bright one for backgrounds and a darker one for text.
Dark mode
Dark mode isn't just inverted colours. Pure white text on pure black (#000) tires the eye and makes the text seem to shimmer.
Use a very dark navy or grey for the background and a slightly off-white for the text. The contrast is still enough and your eyes get less tired.
If your accent doesn't stand out enough on a dark background, use a lighter shade in that theme. On this site the red moves one step lighter in dark mode.
A practical method
Don't write colours straight into your code. Define each one as a variable and use the variable in your components. When you want to change the brand colour later, you edit one line instead of searching through two hundred files.