Pick a colour, pick a harmony, and this tool rotates the hue by fixed amounts to produce a set that goes together. The rules are inherited from colour theory taught in art schools, and they are a genuinely useful starting point. They are also arithmetic on a colour space that does not model how you see, which is why the output usually needs a human afterwards.
What the harmonies actually are
Each option is one instruction: rotate the hue by a fixed number of degrees. Complementary is 180 — the opposite side of the wheel. Triadic is two rotations of 120, giving three colours evenly spaced. Split-complementary takes the complement and backs off 30 degrees either side of it, which softens the confrontation. Monochromatic does not rotate at all; it holds the hue and moves lightness and saturation instead.
These are not laws of perception. They are conventions that came from painters mixing pigment, and they survive because they reliably produce sets that do not clash — not because there is anything physically special about 120 degrees. Knowing they are arbitrary is what lets you leave them when the result looks wrong.
The hue wheel is not evenly bright
Here is what the arithmetic cannot know. Rotate the hue while holding HSL lightness at 50% and you have not held anything constant. Yellow at that lightness reaches 92.8% of white's luminance. Blue at the same setting reaches 7.2%. The yellow emits thirteen times the light.
So a triadic palette anchored on blue produces two partners that will visually flatten it, and one anchored on yellow produces two that vanish beside it. The numbers say the three colours are equally light. Your eyes are not consulted.
This is the same fault that makes gradients go muddy in the middle and #808080 not half as bright as white: HSL was built in the 1970s to be cheap to compute, and its lightness axis is a piece of arithmetic over RGB channels rather than a measure of light. If you want a palette whose members genuinely feel equally weighted, generate it here for the hue relationships and then fix the lightness by eye — or work in Oklch, where holding lightness constant actually holds it constant.
A palette is not a set of equals
The most common way to misuse output like this is to take five colours and use all five at equal volume. That is not a palette, it is a fight. Every set of colours that works in practice has a hierarchy: one dominant, one supporting, and the rest as accents deployed sparingly.
The old designer's heuristic is 60-30-10 — sixty percent of the surface in the dominant colour, thirty in the secondary, ten in the accent. It is not a rule so much as an observation about what balanced work tends to look like when you measure it. If a design feels noisy and you cannot say why, measuring the proportions is usually where the answer is.
It also means the harmony matters less than people think. Almost any two hues can be made to work if one is desaturated and the other is not. Most professional palettes are one colour with a range of tints, plus a single accent that appears in about a tenth of the area — which is closer to monochromatic than to anything the wheel would generate.
None of this checks contrast
A harmony says two colours have a pleasing hue relationship. It says nothing about whether text in one is legible on the other, and those are unrelated questions that people routinely conflate.
Complementary pairs illustrate it well. Blue and yellow are complements and reach about 8:1, which is fine for body text. Red and cyan are also complements and land far lower. The wheel does not know or care — it is measuring angular distance between hues, and legibility is about luminance difference.
So generate the palette here and then take each pair you intend to put text on through a contrast checker. WCAG asks for 4.5:1 for normal text and 3:1 for large. That check is two seconds and it is the only thing that answers the question the harmony cannot.
Common questions
Is anything sent to a server?
No. This tool is marked "client": the harmonies are hue arithmetic done in your browser tab. Nothing is transmitted.
Why do the colours in my palette not look equally bright?
Because they are not, and HSL cannot tell you so. Equal lightness values across different hues produce wildly different amounts of light — thirteen times between yellow and blue at the same setting. The palette is right about the hue relationships and silent about everything else. Adjust the lightness by eye, or rebuild it in Oklch where the axis means what it says.
Which harmony should I choose?
Monochromatic if you are unsure, and that is not a cop-out. It is the hardest to get wrong, it looks deliberate, and most professional interfaces are closer to it than to anything else — one hue, a range of tints, one accent. Reach for complementary when you need one thing to stand out sharply, and triadic when you have three genuinely distinct categories to distinguish and the energy is the point.
How many colours do I need?
Fewer than you think. A neutral, one brand colour, and one accent will carry an entire interface, with tints of each for the states. Where you actually need more is semantics — success, warning, error — and those are decided by convention rather than by harmony. Nobody will thank you for a red that is on-palette if it does not read as an error.
Can I use these colours for text?
Check first. A harmony is about hue and contrast is about luminance; a palette can be perfectly harmonious and completely illegible. Run each pair through a contrast checker and look for 4.5:1 on body text. If your accent fails, darken it for text and keep the bright version for shapes and fills — that is the normal way out, and it is why design systems tend to have two versions of every accent.