How the generator builds a palette
Every palette here starts from your base colour, converted into HSL: hue (an angle from 0 to 360 around the colour wheel), saturation and lightness. Working in HSL makes colour relationships into simple arithmetic. Colours that sit near each other on the wheel feel related; colours that sit opposite each other create maximum contrast. So the generator keeps your base colour exactly as you chose it, then rotates the hue by fixed amounts to find its relatives, and varies lightness a little so the five swatches read as a usable set rather than five versions of the same brick.
A small random variation is added to the saturation and lightness of the supporting swatches each time you press generate, which is why repeated presses give fresh but recognisably similar palettes. The randomness comes from your browser's cryptographic generator, and your base swatch is never touched.
Worked examples
The classic schemes, briefly
Analogous palettes use hues within about 30 degrees of the base. They are the easiest to live with: think of a sunset, or the range of greens in a hedgerow. Because nothing clashes, they suit backgrounds, dashboards and anywhere calm matters more than punch. Complementary palettes pair the base with the hue directly opposite, which is where the strongest natural contrast lives: teal and raspberry, blue and orange, purple and yellow. Use the complement sparingly as an accent rather than half the design. Triadic palettes space three hues evenly around the wheel, giving variety with balance; they are popular for illustration and children's brands. The mixed scheme borrows a neighbour and a split of the complement, a pragmatic middle ground when a pure scheme feels too rigid.
Turning five swatches into a design
A palette is raw material, not a finished decision. The 60-30-10 rule is a sensible starting point: let one colour dominate about 60% of the design (usually the lightest or most muted swatch), give a second colour about 30%, and save the most saturated swatch for the 10% of accents, buttons and highlights. Keep at least one very light and one very dark swatch for backgrounds and text, and check any text-on-colour pairing with a contrast checker, because harmonious palettes can still fail readability. If a swatch is nearly right, copy its hex code into the colour picker and nudge the lightness until it earns its place. Generate a handful of variations, keep the ones that survive a day of looking at them, and be ruthless about the rest.
Frequently asked questions
How are the palettes generated?
Your base colour is converted to HSL, and the other swatches are made by rotating the hue around the colour wheel and adjusting lightness. Analogous palettes use neighbouring hues, complementary palettes use the hue directly opposite, and triadic palettes use three hues spaced 120 degrees apart.
Which scheme should I choose?
Analogous palettes are calm and harmonious, good for backgrounds and interfaces. Complementary palettes have the most contrast and energy, good when you need one colour to pop against another. Triadic palettes are balanced but lively, and mixed borrows a little from each.
Why do the swatches change slightly each time I press generate?
The generator adds a small random variation to the saturation and lightness of the supporting swatches, so pressing generate again gives you a fresh take on the same scheme. Your base colour itself is never altered.
How do I actually use a five-colour palette?
A common approach is the 60-30-10 rule: one dominant colour for about 60% of the design, a supporting colour for 30%, and an accent for the remaining 10%. The two extra swatches cover backgrounds and text. Check text and background pairs with a contrast checker before shipping.
Why does a grey base colour give a grey palette?
Greys have zero saturation, and a hue rotation only changes the hue, which is invisible when saturation is zero. Nudge your base colour towards an actual hue first, even slightly, and the schemes will start to show their character.