Color Palette Generator

What is color harmony?

Color harmony refers to visually pleasing color combinations based on their positions on the color wheel. A harmonious palette creates a sense of balance and cohesion — essential for any design, whether it's a website, app, brand identity, or illustration.

Harmony modes explained

• Analogous: Colors adjacent on the wheel. Smooth, natural-looking palettes. Ideal for calm or nature-inspired designs.
• Complementary: Two colors directly opposite each other (e.g., blue and orange). High contrast — great for CTAs and highlights.
• Split-Complementary: One base color plus the two colors adjacent to its complement. High contrast with more flexibility than pure complementary.
• Triadic: Three colors evenly spaced 120° apart. Vibrant and balanced — popular in bold brand design.
• Tetradic: Four colors forming a rectangle on the wheel. Rich, complex palettes. Best used with one dominant color.
• Monochromatic: Variations of a single hue with different lightness and saturation. Elegant, cohesive, and easy to get right.

How do I use this tool?

1. Pick a base color with the color picker or type a HEX code. 2. Choose a harmony mode. 3. Adjust the number of colors, saturation, lightness, and hue spread. 4. Press Generate or hit Space to shuffle. 5. Lock any colors you like, then shuffle again to vary the rest. 6. Export in the format you need.

Export formats

CSS custom properties

The CSS Vars button copies a :root block ready to paste into your stylesheet:

:root {
  --color-1: #7C6AFF;
  --color-2: #FF6A9B;
  --color-3: #6AFFD4;
}

Tailwind CSS config

The Tailwind button copies an extend.colors snippet for tailwind.config.js, so you can use your palette as utility classes like text-color1 or bg-color2.

PNG image

Download the palette as a PNG image with the hex codes labeled below each swatch — ideal for design documentation, mood boards, or sharing with clients.

Frequently asked questions

What is the difference between analogous and complementary colors?

Analogous colors sit next to each other on the wheel, creating harmony and flow — great for backgrounds and neutral UI. Complementary colors are opposites, creating sharp contrast — ideal for buttons, alerts, or anything you want to stand out.

How many colors should a palette have?

Most design systems use 4–6 colors: a primary, a secondary, one or two neutrals, and an accent. For web and app design, starting with 5 and assigning roles (primary, secondary, background, text, accent) keeps things manageable.

Does this tool store my palettes?

No. Everything runs locally in your browser. No data is sent to any server. Your palettes exist only in the page — export them before closing the tab.