Overview
A palette is a small team: every member needs to get along with the others, and hiring them one by one on gut feeling is how teams end up dysfunctional. Colour harmony rules replace gut feeling with geometry — companions are derived from fixed relationships on the colour wheel, so the result is coherent by construction rather than by luck.
This generator implements the classic harmonies. Analogous takes neighbours of your base for calm, natural schemes. Complementary takes the direct opposite for maximum energy. Triadic takes three evenly spaced hues for balanced vibrancy — and further rules cover the in-betweens. Nudge the base colour and the whole family follows live, so exploring is play, not work.
What are harmony rules, exactly?
The colour wheel arranges hues by relationship: neighbours blend into each other, opposites contrast, evenly spaced trios vibrate. Harmony rules are named slices of this geometry, refined over centuries by painters, printers and interface designers who all converged on the same wheel because human vision works the same for everyone.
Analogous schemes borrow colours sitting beside your base — safe and serene, the palette of forests and oceans. Complementary schemes pair opposites — the tension shouts, which is why sports teams and sale banners love them. Triadic schemes space three hues evenly — lively but balanced. These are starting positions with centuries of evidence behind them, not laws; the generator gives you the geometry, and your eye makes the final call.
Features
- Classic harmony rules: analogous, complementary, triadic and more, from wheel math.
- Two ways to set the base: pick visually or type a HEX code.
- Five-colour palettes — the practical standard for real interfaces.
- Click-to-copy HEX on any swatch, straight to your clipboard.
- Live regeneration: nudge the base and watch the family follow.
- Honest by design: relationships computed, not random pretty colours.
- Fully local — every calculation stays on your device.
Benefits
- Skip the clash. Coherence is computed in, not hoped for.
- Explore fast: dozens of viable palettes in a minute of nudging.
- Learn the wheel by seeing rules applied to your own colours.
- Ship the codes: every swatch copies as HEX, ready for CSS.
Who can use it
Non-designers who need a decent palette without hiring one, developers styling side projects, bloggers refreshing their theme, students learning colour theory by doing, and designers who want a mathematically sound starting point to refine. If your last palette was 'blue, and... another blue?', start here.
How to use
- Set your base colour — click the visual picker or type a HEX code.
- Choose a harmony rule: analogous, complementary, triadic, or another.
- Review the five generated colours as a family.
- Click any swatch to copy its HEX code.
- Nudge the base to explore variations until one feels right.
Frequently asked questions
Which harmony rule should I pick?
For calm and professional, analogous — neighbours rarely argue. For energy and attention, complementary — opposites demand to be noticed. For playful but balanced, triadic. When in doubt, generate one of each from the same base and compare; the right one usually announces itself.
Five colours — is that enough for a whole site?
For most sites, yes: a background, a surface, a primary action colour, a text colour and an accent cover nearly everything. Larger systems add tints and shades of these five rather than new hues — which keeps the design coherent instead of rainbow-flavoured.
Can I trust math over my own taste?
Trust it as a starting point, not a verdict. Harmony rules encode centuries of what tends to work; your eye and your brand still decide. The generator's job is to hand you strong candidates fast — the final call is gloriously human.
Why do my two favourite colours clash?
Because liking colours individually says nothing about their relationship. Clashing usually means two mid-saturation hues fighting for attention with no clear hierarchy. A harmony rule fixes the relationship first; then adjust which colour leads and which supports.
Do these palettes consider accessibility?
Harmony is about relationships, not readability — a beautiful palette can still fail contrast checks. Once you have candidates, run your text/background pairs through a contrast checker (WCAG 4.5:1 for normal text) and adjust lightness until they pass.
Conclusion
Start with one colour you love and let geometry do the social work. Five swatches, one click each to copy — a palette that belongs together, in under a minute.