Free tool

Free Color Palette Generator — Harmonies, Hex, CSS Variables

Pick a base color, choose a harmony rule, get 5 matching swatches plus a 50–900 shade scale. Click any swatch to copy its hex. Math runs locally in HSL — your color never leaves your browser.

Inputs

Defaults to violet (#7c3aed). Change the base and rule below — the palette regenerates instantly.

Palette

Click any swatch to copy its hex.

Shade scale (50–900)

Tailwind-style brightness ramp from the base hue and saturation.

How this works

We convert your base hex to HSL, rotate the hue by a known offset for each rule (analogous = ±30°, triad = ±120°, complementary = 180°, etc.), then convert back to hex. The shade scale holds hue and saturation constant and only changes lightness, which is exactly how design-system color ramps are built.

Need designs, not just colors?

Our Brand-in-a-Box templates ship with matching palettes, fonts, and printable layouts — ready to drop your name on.

Browse templates
No subscriptions. One-time $17.
Copied!