Color Palette Generator
Generate a harmonious 5-color palette, lock the colors you like, fine-tune saturation and brightness, and export it however your workflow needs.
Palette Settings
Click the lock icon on any swatch to keep it fixed while Regenerate or these ranges reshuffle the rest.
How to use this tool
Pick a scheme and a starting hue, narrow the saturation and brightness ranges if the colours are too loud or too dark, and regenerate until something fits. Lock a swatch, such as your existing brand colour, to keep it while the others change. Copy the result as CSS variables, a Tailwind colour block or JSON, or download a PNG of the swatches.
What each scheme builds
- Complementary: your hue in a light, a middle and a dark shade, plus two shades of the hue opposite it (180° round the colour wheel).
- Analogous: five neighbouring hues, 15° apart, from 30° below your hue to 30° above.
- Triadic: your hue plus the hues 120° and 240° away.
- Split-complementary: your hue plus the two hues either side of its opposite, at 150° and 210°.
- Monochromatic: one hue in five steps from very light to very dark.
Worked example: which colours can carry text
Complementary on indigo (hue 243) with the default ranges gives #C3C1EE, #6962E9, #1910C8, #E2E962 and #BFC810. Their contrast with white text is 1.72, 4.64, 10.77, 1.31 and 1.83 to 1. WCAG asks for at least 4.5 to 1 for normal text, so only #1910C8, comfortably, and #6962E9, just, can hold white text. The light lavender and both yellows work as backgrounds for dark text instead. Check this before using a generated colour for a button, since the palette is chosen for harmony, not readability.
Frequently Asked Questions
How do I use the Tailwind export?
It is a tailwind.config.js block (the format Tailwind 3 uses) that adds the five colours as palette-1 to palette-5, giving classes such as bg-palette-2 and text-palette-5. In Tailwind 4, which is configured in CSS, add them in an @theme block instead, for example --color-palette-1: #C3C1EE; for each one.
What is the difference between saturation and brightness here?
Saturation is how vivid a colour is, from grey to full colour; brightness here is HSL lightness, from black through the pure colour to white. The two range sliders limit where the five colours may fall, so raising the minimum brightness removes near-black shades and lowering the maximum saturation calms neon colours.
Why would I lock a color instead of just copying it separately?
Locking keeps that swatch fixed while you keep exploring — regenerating, switching schemes, or adjusting saturation/brightness ranges — so you can build a palette incrementally: lock a brand color you already have, then let the generator find colors that harmonize with it rather than starting over each time.
Related Tools
Related Blog Posts
HEX, RGB and HSL: How the Conversions Work and Where They Round
#4F46E5 converted to RGB and HSL step by step, why 89.4% of all colours change when copied as whole-number HSL, why HSL lightness is not brightness (yellow and blue at 50% differ eightfold in contrast), and the alpha that hex can't write exactly.
Read moreHow to Use QR Codes for Marketing, Docs, and Events
How much a QR code can hold, why a shorter or uppercase link gives a code that scans more easily, what error correction actually protects against, and how to size one for print.
Read more10 CSS Gradient Ideas You Can Copy and Customize
Ten copy-ready CSS gradients (buttons, dark surfaces, progress bars, stripes, glows, gradient text, photo overlays), plus how gradient angles work and how to avoid the muddy grey middle.
Read more