Colour harmony is geometry on the colour wheel. The classic schemes are simply different angular relationships between hues — which is why they can be generated reliably rather than guessed at.
How to use the Color Palette Generator
- Pick a base colour
- Choose a harmony type
- Review the generated palette
- Check any text and background pairings for contrast before using them
The standard schemes
- Complementary — two hues opposite each other, 180° apart. Maximum contrast and energy. Effective for calls to action, exhausting across a whole interface.
- Analogous — three hues adjacent on the wheel, around 30° apart. Calm and cohesive; common in nature. Low contrast, so pair with a neutral for legibility.
- Triadic — three hues evenly spaced at 120°. Vibrant and balanced, but needs one dominant colour and two accents or it becomes chaotic.
- Monochromatic — one hue at varying lightness and saturation. Always coherent, and the safest choice for interfaces where content should dominate.
The 60-30-10 rule
A generated palette tells you which colours work together. It does not tell you how much of each to use, and that proportion is what actually determines whether a design looks considered or loud.
The convention from interior design transfers well: roughly 60% a dominant neutral, 30% a secondary colour, 10% an accent. In an interface that usually means a near-neutral background, a secondary for surfaces and borders, and the brand colour reserved for actions.
The most common mistake with a nice palette is using all of it equally. Restraint is what makes it read as designed.
Frequently asked questions
How many colours should a palette have?
For most interfaces: one primary, one accent, and a neutral scale of four to six steps, plus semantic colours for success, warning and error. More than that is usually harder to keep consistent.
Does a harmonious palette mean accessible?
No, and this trips people up. Harmony is about hue relationships; accessibility is about luminance contrast. An analogous palette can be beautiful and completely illegible. Always check contrast separately.
How do I pick a brand colour?
Consider the associations in your market, check it is distinguishable from your main competitors, and make sure it survives as a small UI element and in greyscale. Then verify it works as both a background and a text colour.
What about colour-blind users?
Around 8% of men have some form of colour vision deficiency, most commonly red-green. Never encode meaning in hue alone — pair colour with text, icons or patterns, and check your palette in a colour-blindness simulator.