What is a complementary color palette?

A complementary palette uses two colors that sit opposite each other on the color wheel. They create high contrast and vibrant designs.

What is an analogous color palette?

An analogous palette uses colors that are next to each other on the color wheel. They create harmonious, comfortable designs.

Yes. Click Export CSS to copy the palette as CSS custom properties (variables) ready to paste into your stylesheet.

Click the lock icon on any color swatch to keep it while regenerating the rest of the palette.

🎨 Free Online Tool

Generate beautiful color palettes for your designs. Lock colors you love, export CSS, JSON or PNG.

Harmony Mode

🎲 Random

⚫ Monochrome

🌈 Analogous

🔵🟠 Complementary

△ Triadic

↗ Split-Comp

⬜ Tetradic

🌸 Pastel

🌿 Earth

💜 Neon

Base Color

Count

Strip

Grid

Press Space to generate a new palette · Click 🔒 to lock a color

Random

Mode

Colors

Locked

Saved

Export

Saved Palettes