Colour Palette Generator
Build a harmonious palette from a base colour using real HSL maths. Lock the ones you like, randomise the rest, check contrast, and export.
Last updated
How to make a colour palette
- Pick a base colour and a harmony, such as complementary or analogous, and click Apply base colour.
- Lock the swatches you like and click Randomise to reshuffle the rest.
- Export as CSS variables, a HEX list or a Tailwind config, or copy the palette as a link.
About this tool
Pick a base colour and a harmony rule, and this tool computes the rest of the palette with plain HSL maths run in your browser — hue rotations for complementary, triadic, split-complementary and tetradic schemes, small hue offsets for analogous, and lightness steps for monochromatic. Click the lock icon on any swatch before hitting Randomise to keep that colour fixed while the rest reshuffle around it.
Each swatch shows its contrast ratio against pure white and pure black text, along with a WCAG AA pass/fail badge (4.5:1 for normal text), so you can tell at a glance which colours are safe to put text on.
Export the palette as CSS custom properties, a plain HEX list, or a Tailwind config snippet — or copy the palette as a URL. The link encodes the harmony mode, every colour, and which ones are locked directly in the query string, so anyone who opens it sees the exact same palette.
Questions about colour palettes
What are colour harmonies?
Rules for picking colours that go together, based on the colour wheel: complementary (opposite), analogous (neighbours), triadic (three evenly spaced), and monochromatic (shades of one colour).
Which colours can I put text on?
Each swatch shows its contrast with white and black text and whether it passes WCAG AA (4.5:1), so you can see which are safe for text.
Can I share or save a palette?
Yes. Copy palette as URL gives a link with every colour and lock in it, so anyone who opens it sees the same palette.
Can I use it with Tailwind CSS?
Yes. Choose Tailwind config and paste the snippet into your theme’s colours.