Color Palette Generator
Generate harmonious colour palettes from scratch. Complementary, analogous, triadic, tetradic and monochromatic schemes, lock swatches, copy HEX or CSS variables.
Click a swatch to copy its hex. Lock 🔒 a colour to keep it while you regenerate the rest.
Colour harmony, briefly
Harmonies are recipes for picking colours that sit at pleasing angles on the HSL colour wheel. Instead of guessing hex codes, you choose a base hue and a scheme, and the related hues fall out mathematically — which is why generated palettes feel coherent.
This tool builds palettes in HSL, varying lightness across the row so you always get a usable light-to-dark ramp, not five colours of the same value.
The schemes
- Complementary: two hues 180° apart — maximum contrast, great for call-to-action against a background.
- Analogous: neighbours within ~40° — calm, cohesive, natural; pick one as the dominant colour.
- Triadic: three hues 120° apart — vibrant and balanced; let one lead and use the others as accents.
- Tetradic: four hues in two complementary pairs — rich but needs careful balance.
- Monochromatic: one hue at many lightness levels — elegant, easy, very safe for UI.
Lock & iterate
Found one colour you love? Hit the lock icon and keep pressing Generate — locked swatches stay put while the rest re-roll around them. This is the fastest way to converge on a palette: anchor a brand colour, then explore companions until the row feels right.
Exporting to code
Copy CSS variables gives you a ready :root block (--color-1 … --color-n) to paste into a stylesheet or design-token file; the HEX list is handy for Figma, Tailwind config, or a quick share. For real products, always re-check text/background pairs for WCAG contrast — harmony and legibility are separate concerns.