Colour Palette Generator
Ten colours from one, arranged by the harmony you choose.
Picking a second colour that works with the first is the hard part of choosing a palette, and it is largely a geometry problem: harmonies are defined by the angle between hues on the colour wheel. This generator takes one colour, applies the relationship you choose, and returns ten values ready to paste — as a plain list or as CSS custom properties.
How it works
Start from one colour
A brand colour, or anything you already know has to be in the palette.
Choose a relationship
From a single-hue ramp to three evenly spaced hues.
Copy what you need
One swatch at a time, the whole list, or a block of CSS variables.
What the harmonies actually do
Each option is a rule about hue angles. Shades keeps one hue and walks the lightness from near-white to near-black, which is how a design system builds the 50-to-900 ramp behind a single brand colour. It is the safest choice and the one most interface work needs.
Complementary takes the hue 180° opposite, the strongest contrast two hues can have — excellent for a call-to-action against a dominant colour, exhausting if used in equal amounts. Analogous stays within 40° either side, producing the calm, closely-related sets that suit backgrounds and illustration. Triadic spaces three hues 120° apart for a lively palette that needs one clear leader, and split complementary replaces the direct opposite with the two hues beside it, keeping most of the contrast and losing the vibration.
The generator holds saturation roughly constant and varies lightness, which is what keeps the set looking like one family. A minimum saturation is enforced, because running these rules on a near-grey base produces ten near-identical greys — mathematically correct and useless.
Turning a generated palette into a usable one
A harmony gives you colours that sit together; it does not give you a design. The proportions matter more than the selection, and the old rule of thumb still holds: roughly 60% a dominant neutral, 30% a secondary, 10% an accent. Using three generated colours in equal thirds is the fastest way to make a page look like a swatch chart.
Check contrast before committing. The lightness steps here are HSL values, not perceptual ones, so two swatches that look evenly spaced can be far apart in measured luminance — and a mid-tone that looks perfectly readable can land under 4.5:1 against white. Run any pair you intend to use for text through a contrast check rather than trusting the ramp.
And leave room for the colours no harmony produces. Interfaces need a success green, a warning amber and an error red that people recognise instantly, and those meanings are conventional rather than aesthetic. Derive them separately, match their saturation and lightness to the palette so they do not look pasted in, and keep them out of the decorative set.