Color Palette Generator

This palette generator works in the HSL colour model: H (hue) is an angle from 0 to 360° on the colour wheel, while S (saturation) and L (lightness) are percentages. Pick a seed colour and the tool rotates around the wheel using classic colour-theory rules to produce five colours at once. Because it changes only hue, or only lightness and saturation, the colours share a clear mathematical relationship and look naturally coordinated rather than thrown together.

Each mode suits a different job. Monochromatic keeps one hue and varies lightness and saturation; it is the safest choice for brands and data-heavy interfaces. Complementary takes the colour opposite at 180°, giving the strongest contrast for buttons and highlights. Analogous uses neighbours at ±15° and ±30°, soft and natural like many illustrations and landscape photos. Triadic splits the wheel into thirds (120° and 240°) for a rich palette that needs careful proportions. Random samples within sensible saturation and lightness ranges when you just want inspiration.

When applying a palette, try the 60-30-10 rule: 60% dominant colour for backgrounds and large areas, 30% secondary colour for sections and cards, and 10% accent for buttons and links. Complementary and triadic palettes look busy if every colour is used equally, so choose one lead and desaturate the rest. And remember legibility: text should reach at least the WCAG AA contrast ratio of 4.5:1 against its background, which you can check with our colour contrast analyzer.

Click any swatch to copy its HEX code, or export the whole palette as CSS variables, SCSS variables, a Tailwind config or JSON and paste it straight into your project. The CSS gradient generator below turns the palette into a background gradient. Everything is calculated in your browser.