Color theory is a genuinely deep subject and you do not need any of it to pick a palette that works. What you need is a small number of decisions, made in the right order, with the right amount of restraint.
What follows takes about ten minutes and produces something you can use for years. It is not the only way. It is the way that fails least often.
Start with one color, not five
Every palette generator on the internet will happily hand you five swatches, and that is precisely the problem. Five colors of equal weight is not a palette, it is a paint chart. Real design uses one color a lot, one color a little, and neutrals for everything else.
So pick one. Not by browsing swatches, but by answering a question: what is this thing supposed to feel like? Calm and clinical points at blue and cool gray. Warm and human points at terracotta, ochre, deep red. Energetic points at saturated orange or a strong green. This is not mysticism, it is convention: we have all been trained by decades of packaging and signage, and working against that training costs energy you could spend elsewhere.
Build the rest out of that one color
Here is the trick that does most of the work. Take your color and read it in HSL: hue, saturation, lightness. Hue is the position on the color wheel, saturation is how intense it is, lightness is how close it is to white or black.
Now generate the family by moving only one of those at a time:
- Shades and tints: keep hue and saturation, change lightness. This gives you the hover state, the pressed state, the tinted background, all guaranteed to belong together.
- A quieter version: keep hue and lightness, drop saturation hard. This is the color you use for large areas, because a large area of a fully saturated color is exhausting to look at.
- An accent: move the hue a long way, one hundred and fifty to two hundred degrees around the wheel, and keep the saturation high. This is the color you use once per screen, for the thing you want clicked.
That is four colors from one decision, and they cannot clash, because they are mathematically related.
Neutrals are not gray
The fastest way to make a design look cheap is to build it on pure gray. Pure gray is what you get when you have not made a decision, and it reads that way: flat, cold, slightly institutional.
Mix a little of your main color into the neutrals instead. A background that is 96 per cent lightness with a trace of your blue in it will look like a considered off-white; the same background in pure gray will look like a default. The effect is almost invisible when you point at it and completely obvious when you compare two versions side by side.
The same applies to dark interfaces. A near-black with a hint of blue reads as deliberate. Pure black reads as a hole.
The sixty thirty ten split
Once you have the colors, the question is how much of each. The old interior design rule transfers almost perfectly: about sixty per cent of the surface is your dominant neutral, thirty per cent is a secondary tone, ten per cent is the accent.
The important number is the ten. Accents work by being rare. Put your accent color on the button, the active state and the one number you want people to read, and nowhere else. The moment it appears on five elements it stops meaning anything, and you have to invent a second accent to point at the first, which is how palettes get to nine colors.
Check the contrast before you fall in love
A palette can be beautiful and unusable. The measure is contrast ratio, a number from 1 to 21 comparing the relative luminance of two colors. Body text needs at least 4.5 to 1 against its background. Large text and interface components can go down to 3 to 1.
Two things surprise people the first time they measure. Yellow and orange are much brighter than they feel, so white text on them almost never passes. And a mid-tone blue that looks perfectly readable on a good monitor in a dim room often fails outright, which is why the number exists rather than the opinion.
Check it while you are choosing, not after the design is finished, because a failing accent color usually means picking a different accent rather than adjusting the text.
Steal, but steal structurally
Looking at work you admire is not cheating, it is how everyone learns. But copy the structure rather than the values. Ask: how many distinct colors are actually on this screen, ignoring shades of the same one? Where is the saturated color, and how much of it is there? What is the background, really, when you sample it?
The answers are almost always more restrained than they look. A page that feels rich with color usually has one strong hue, a family of tints from it, and a warm neutral. The richness comes from the arrangement, not the count.
Write it down and stop deciding
The last step matters more than it sounds. Record the palette somewhere your tools can reach: the exact values, which one is the accent, which neutral is the page background. Most editors have some notion of a saved kit or set of swatches, and the one described elsewhere on this site keeps colors, fonts and a logo together for exactly this reason.
The value is not organization. It is that a written palette ends the argument. Six months later, at the end of a long day, you will not be tempted to invent a new blue for one banner, because the blue already exists and is two clicks away. That single piece of friction is what keeps a body of work looking like it came from one place.
The short version
- Choose one color based on how the thing should feel.
- Derive tints, a desaturated version and one opposite accent from it.
- Tint your neutrals with a trace of the main color.
- Split the surface roughly sixty thirty ten.
- Measure the contrast, and change the palette rather than the text if it fails.
- Save it, and use it.
