What the harmony modes actually do
Each mode picks one base hue at random and then places the rest at fixed distances around the colour wheel. Knowing the rule tells you which mode suits the job.
How each harmony mode builds its five colours
| Mode |
How the hues are chosen |
Feels like |
| Complementary |
A base hue and its opposite (180° away), at three lightness levels |
High contrast; good when one element must dominate |
| Analogous |
Five hues spaced 30° apart, starting from the base |
Calm and cohesive; little internal contrast |
| Triadic |
Three hues 120° apart, with two repeated at other lightnesses |
Balanced variety; more energetic than analogous |
| Random |
Five unrelated colours |
Unpredictable — a starting point rather than a scheme |
Turning five colours into a usable scheme
A generated palette is raw material, not a finished design system. The usual mistake is to use all five in equal measure, which leaves nothing for the eye to settle on.
A more reliable structure is roughly 60/30/10: a dominant colour across most of the surface, a secondary for supporting elements, and an accent used sparingly for the thing you want clicked. Two of the five typically become neutrals — very light for backgrounds, very dark for text.
Because this tool fixes saturation at 70% and lightness between 40% and 60%, the palettes it produces are all mid-tone and vivid. You will usually want to lighten one for a background and darken one for body text. Paste a HEX into the colour picker's HSL output style of thinking — or adjust the lightness value directly in CSS — to derive those.
Contrast and accessibility
A palette that looks good is not automatically readable. WCAG asks for a contrast ratio of at least 4.5:1 between body text and its background, and 3:1 for large text and for the visual boundaries of interface controls.
Mid-tone colours are the risky ones, and every colour this tool produces is mid-tone. A vivid blue on a vivid orange can look striking and still fail badly as text. Check any text-on-background pair in a contrast checker before committing to it.
Also avoid carrying meaning in hue alone. Around one in twelve men has some form of colour vision deficiency, so a red/green status indicator needs a label or an icon as well as a colour.
Using a seed
The seed box turns a random generator into a repeatable one. Enter any text before generating and that palette can be reproduced later from the same seed and mode — useful when you want to note a palette in a brief without listing five HEX codes, or when a colleague needs to see exactly what you saw.
Leave the seed empty and every press gives a genuinely new palette.