How the schemes are built
All five come from rotating the hue wheel around your base color: the complement sits 180° opposite (maximum tension — use it for accents, not halves), analogous colors sit 30° to each side (calm, natural pairings), triadic at 120° intervals (balanced but lively), tetradic at 90° (rich, hardest to control). Shades keep the hue and walk lightness in even steps — that column is your UI's tints and hovers.
Turning a scheme into an interface
The classic split is 60-30-10: dominant neutral, secondary color, and a small accent. Pick your base as the secondary, one analogous neighbour for large surfaces, and the complement as the 10% accent. Copy-all exports everything as CSS custom properties so the palette drops straight into a stylesheet.
Frequently asked questions
Does anything get uploaded?
No. The harmonies are computed locally from your base colour.
Which harmony should I use?
Analogous for something calm and cohesive, complementary when you need one accent to stand out. Triadic is vivid and hard to balance.
How many colours does an interface need?
Fewer than most palettes give you. One brand colour, one accent and a neutral scale covers most of it — extra colours mostly create decisions.
Will these pass contrast requirements?
Not automatically — harmony and contrast are different things. Check any pairing you plan to put text on with the contrast checker.
Something wrong with this tool, or an idea for it? Tell us