Free tool · No sign-up

Color Palette Generator

Pick a base color and a harmony — analogous, complementary, triadic, tetradic, or monochromatic — and this tool builds a matching color palette with copy-ready hex codes. Hit Surprise me for a random starting color. It runs entirely in your browser: free, instant, and no sign-up.

Base colorHarmony

#64c5f2

#6496f2

#6467f2

#9164f2

#c064f2

Copy as CSS variables

:root {
  --color-1: #64c5f2;
  --color-2: #6496f2;
  --color-3: #6467f2;
  --color-4: #9164f2;
  --color-5: #c064f2;
}

Frequently asked questions

Choose a base color, then pick a harmony rule. Analogous uses neighbouring hues for a calm look, complementary pairs opposite hues for contrast, and triadic and tetradic spread evenly around the color wheel. The palette and its hex codes update instantly, and you can copy any swatch.

A color harmony is a rule for combining colors that look good together, based on their positions on the color wheel. This tool computes each harmony from your base color's hue, saturation, and lightness, so every palette stays balanced.

Yes — each swatch shows its hex code with a copy button, and you can copy the whole palette at once as CSS custom properties to drop straight into a stylesheet.

Yes — free, no sign-up, and the palette is generated entirely in your browser, so nothing you pick is sent anywhere.