What is a color harmony?

Color harmony refers to the arrangement of colors based on their position on the color wheel. Analogous colors sit next to each other (calm, cohesive), complementary are opposite (high contrast), and triadic are evenly spaced (vibrant, balanced).

Can I export the palette for CSS?

Yes. Click "Export CSS" to download a .css file with all colors as CSS custom properties (variables) ready to paste into your project.

What color formats are supported?

You can view and copy colors in HEX (#14b8a6), HSL (hsl(174, 79%, 40%)), or CSS variable format.

How do I find a complementary color?

Select your base color, choose "Complementary" from the harmony dropdown, and click Generate. The tool calculates the color directly opposite on the HSL color wheel.

🎨

Color Palette Generator

Generate harmonious color palettes from any base color. 7 harmony modes, CSS export, HEX and HSL values. Free online color tool.

About this tool

Generate beautiful, harmonious color palettes from any base color. Choose from 7 harmony modes — analogous, complementary, triadic, split-complementary, tetradic, monochromatic, or random. Export your palette as CSS variables, HEX codes, or HSL values.