Colour Palette Generator: Angles on the Wheel, Not Guesswork
Combinations that work together follow rules, and the rules are angular relationships on the colour wheel. Each one produces a distinctly different mood from the same starting colour.
Choosing colours is paralysing mainly because the field is so wide open. Fix one colour and derive the rest by rule and the problem shrinks to something you can actually decide.
This tool starts from your base colour and picks the others by their angle on the wheel. Change the rule and the same base colour yields a completely different feel.
What each rule gives you
Complementary colours sit directly opposite each other. The contrast is as strong as it gets, which makes them attention-grabbing and exhausting in equal measure if you split the page evenly between them. Use one as the ground and reserve the other for accents.
Analogous colours are neighbours on the wheel. They feel natural and calm, but the low contrast between them goes flat easily, so you have to build structure with lightness instead.
Triadic takes three colours evenly spaced around the wheel. Lively and balanced, but all three are assertive, so one has to be chosen as the lead.
Monochromatic varies only lightness and saturation within a single hue. It is the most unified and the hardest to get wrong, at the cost of being easy to make dull — which is why it is often paired with one accent from elsewhere.
How much of each matters more than which
A palette of five colours is not an instruction to use five colours equally. Distributing them evenly is what makes a design look busy.
The widely used split is 60/30/10: sixty per cent ground, thirty per cent secondary, ten per cent accent. An accent gets its power from being rare. Scatter it across the screen and it has stopped being an accent.
For interface work you also need greys that the palette does not provide. Most of a real screen is backgrounds, rules and body text, and the palette colours sit on top of that.
The label colour is computed, not guessed
The hex code shown on each swatch is set in whichever of black or white genuinely contrasts more with that colour, rather than estimated from average brightness.
The distinction has teeth. On a bright green the two approaches disagree, and the wrong pick lands under 2:1 — the code is barely visible. The right pick clears 10:1 on the same colour.
That judgement is only for the swatch label, though. Before using any pair in a real design, check it in the contrast checker. Combinations that look handsome in a palette are frequently unusable for body text.
A workable sequence
- •Pick one base colour that suits the brand or subject.
- •Cycle through the rules and compare the moods they produce.
- •From the palette you like, choose which colour leads.
- •Try distributing them 60/30/10 rather than evenly.
- •Check any pair you intend to set text in against 4.5:1.
- •Run it through the colour blindness simulator to confirm the colours stay distinguishable.
Extended FAQ
Can I use these colours for text as they are?
Check first. A palette makes colours that harmonise, which is not the same as colours that are readable together. Run anything destined for body text through the contrast checker.
How many colours should I actually use?
Most finished work uses two or three. A five-colour palette is a shortlist, not a requirement.
How will these look to colour-blind viewers?
Reds and greens are the pairing most often lost. Never rely on colour alone to carry meaning — add shape or a label. The colour blindness simulator will show you.
HEX or RGB?
Two notations for the same colour. HEX is shorter and dominates on the web; RGB notation is what you reach for when you need transparency.