Color Palette Generator

Generate beautiful, harmonious color palettes from any base color. Choose a harmony rule, copy HEX values in one click and export as CSS variables or JSON.

CSS Variables

:root {
  --color-1: #155EEF;
  --color-2: #155EEF;
  --color-3: #155EEF;
  --color-4: #155EEF;
  --color-5: #155EEF;
}

What Is a Color Palette Generator?

A color palette generator creates harmonious color combinations based on color theory rules. Instead of guessing which colors work well together, you choose a base color and a harmony type, and the tool calculates palettes that follow proven aesthetic relationships — complementary, analogous, triadic, tetradic and more.

Harmony Types Explained

  • Complementary: Two colors opposite each other on the color wheel. Maximum contrast, ideal for calls-to-action and accents.
  • Analogous: Three to five colors next to each other on the wheel. Calm, cohesive and elegant.
  • Triadic: Three colors evenly spaced 120° apart. Vibrant yet balanced.
  • Tetradic: Four colors in two complementary pairs. Rich variety with structure.
  • Split-complementary: Base color plus the two neighbors of its complement. Softer contrast than pure complementary.
  • Monochromatic: One hue in multiple tints and shades. Minimal and sophisticated.
  • Shades and Tints: Progressively darker or lighter versions of the base color.

How to Use the Palette Generator

  1. Enter a HEX base color or click Random Base.
  2. Choose a harmony rule from the dropdown.
  3. Select the number of colors you want (3–8).
  4. Click any swatch to copy its HEX code.
  5. Copy CSS variables or download the palette as CSS or JSON.

Frequently Asked Questions