How does the palette generator pick colors?

It converts your base color to HSL, then shifts the hue, saturation and lightness using a harmony rule (analogous ±40°, triadic +120°/+240°, complementary +180°, shades = same hue at different lightness).

Can I use these palettes in Tailwind or CSS variables?

Yes — click “CSS variables” to download a :root { --color-1 … --color-5 } file you can drop straight into your stylesheet.

Is my color data uploaded anywhere?

No. Every conversion runs in your browser. Open DevTools → Network and you'll see zero requests when you change colors.

How many colors are in each palette?

Five stops. That's enough for a foreground, mid, accent, muted and background tone without overwhelming your design.

Can I generate a random palette?

Yes — click “Surprise me” to pick a random base color, then choose any harmony to apply.

Color Palette Generator

Pick a base color and instantly generate a 5-stop harmonious palette.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Color Palette Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Pick a base color using the color swatch or type a HEX value.
2
Step 2. Choose a harmony: analogous, shades, complementary or triadic.
3
Step 3. Click any swatch to copy its HEX code, or hit “Surprise me” for a random base.
4
Step 4. Export the whole palette as CSS variables or JSON for your project.