Overview
Choosing colours is where many designs quietly fall apart. One strong colour is easy; five that behave together — across headings, backgrounds, buttons and accents — is genuinely hard, and guessing usually produces sets that clash or blur into sameness. This generator replaces guessing with geometry: pick a base colour, choose one of five time-tested harmony rules, and it computes a complete five-colour set that follows the rule exactly.
The rules are the ones art schools have taught for a century — opposites steady each other, neighbours blend, triads energise. You bring the taste, choosing the base and the rule; the tool brings the arithmetic. What comes out is a working set you can actually ship, not a mood board.
What is colour harmony?
Colour harmony is the idea that some combinations feel settled while others feel tense, and that the difference is structural rather than mysterious. On the colour wheel, certain geometric relationships — opposites, neighbours, evenly spaced trios — reliably produce combinations the eye reads as intentional. Designers have used these relationships since long before screens existed; painters called them chords.
A generator is honest about what it automates: it applies the geometry perfectly, which humans do sloppily. It cannot supply taste — a mathematically perfect triad in colours you dislike is still a palette you dislike. So the workflow is: you choose the starting colour and the rule, the tool enforces the rule, and you judge the result. Taste stays human; arithmetic goes to the machine.
Features
- Five classic harmony rules — analogous, complementary, triadic, monochromatic and split-complementary, the geometries designers actually reach for.
- Start anywhere — use the colour picker, or type in a brand colour you need to build around.
- Complete five-colour sets — enough for backgrounds, text, accents and states without running dry.
- Click-to-copy HEX — tap any swatch and its code lands on your clipboard.
- Copy the whole palette in one press, ready to paste into a stylesheet or design tool.
- Surprise mode — press Space for a fresh palette from a random base when you need a starting point.
- Private by design — all the colour maths runs locally; nothing is uploaded.
Benefits
- Skip the blank canvas. A rule plus a base colour beats staring at a picker.
- Palettes that behave. Geometry-backed sets clash less than guessed ones.
- Fast handoff. HEX codes copy straight into code or design tools.
- Learn by playing. Running one base through every rule teaches harmony faster than any article.
Who can use it
Web designers building a new site's colour system, developers who need a decent palette without hiring a designer, slide-deck makers tired of default themes, and brand owners extending one brand colour into a full set. It also suits students learning colour theory — generating palettes from each rule in turn makes the abstract geometries concrete in a way textbooks struggle to.
How to use
- Pick a base colour with the picker, or type one in.
- Choose a harmony rule — complementary is the safest first try.
- Judge the five colours honestly; regenerate or switch rules if they feel off.
- Click any swatch to copy its HEX code, or use copy-all for the full set.
- Paste the codes into your stylesheet, slides or design tool.
Frequently asked questions
Which harmony rule should I start with?
Complementary — your base plus its wheel-opposite — because it reliably produces palettes with both energy and balance, and it is hard to make look accidental. Analogous (neighbours) is the calm choice for background-heavy designs. Triadic is bolder and suits playful brands. Monochromatic is the minimalist's option: one hue, several depths. Try the same base through all five; the comparison teaches more than any single recommendation.
Can a generated palette be used as-is?
Often yes for side projects and mockups, but treat it as a strong draft for anything public. Real designs need tuning to content: text needs readable contrast against backgrounds, and interactive states need distinguishable shades. Use the generated set as the skeleton, then adjust lightness for legibility. The copy buttons make iterating cheap.
Why five colours?
Because that is roughly what an interface consumes: a background, a surface, a text colour, a primary accent and a secondary accent or state colour. Fewer and you start improvising mid-design; more and the palette stops feeling like a system. Five is the working minimum that covers a real page without waste.
Does the tool check contrast or accessibility?
No — harmony and legibility are different jobs. A beautiful analogous palette can still fail WCAG contrast badly. Once you have a palette you like, run its text and background pairs through a contrast checker and adjust lightness until they pass. Treat this generator as step one and contrast checking as step two.
Is my base colour stored anywhere?
No. The palette is computed in your browser's memory and vanishes when you leave the page. There is no account, no history and no analytics on what you generate.
Conclusion
Good palettes are geometry plus judgement. The generator supplies the geometry flawlessly; you supply the judgement. Start from a colour you trust, try the rules in turn, keep the set that feels inevitable — then check its contrast before it meets real text.