Color Palette Generator

What it does

The Color Palette Generator turns any base color into a harmonious palette using classic color-theory rules: complementary, split-complementary, analogous, triadic, tetradic, and monochromatic. Pick a color, choose a harmony, and get a ready-to-use set of swatches with one-click copy. Export the whole palette as CSS custom properties, a Tailwind config snippet, or plain JSON. Everything runs 100% client-side: nothing leaves your browser.

How to use it

1. Pick a base color with the color swatch, or type a hex value (e.g. #3B82F6) into the text field. Hit Randomize to roll a fresh base.
2. Choose a harmony scheme - Complement, Split-Complement, Analogous, Triadic, Tetradic, or Monochromatic. For Monochromatic, set the number of Steps (2-9).
3. Click any swatch to copy its hex - the value is shown right on the color, in black or white whichever reads clearer.
4. In the Export panel, pick CSS / Tailwind / JSON and Copy export to grab the whole palette at once.
5. Hit Copy link to capture a shareable URL - the base color, scheme, and step count are encoded in the link, so anyone opening it sees your exact palette.

Examples

Complementary palette from red

Base #FF0000 → [ #FF0000, #00FFFF ] - red and cyan, directly opposite on the wheel.

Tailwind export

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        palette: {
          '1': '#3b82f6',
          '2': '#f59e0b',
        },
      },
    },
  },
};

CSS variables export

:root {
  --color-1: #3b82f6;
  --color-2: #f59e0b;
}

Good to know

• Monochromatic holds the base hue and saturation, spreading lightness across the chosen number of steps - great for building UI tone scales.
• Private: all generation happens locally in your browser - safe for proprietary brand colors.
• Shareable: every palette has its own URL - base color, harmony, and step count live in the link’s

  hashhashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.

  , so bookmarking or sharing reloads the exact palette.
• Formats: hex is the source of truth; HSL is shown for reference and used internally for the harmony math.
• Related tools: look for the gradient and contrast tools in Color & Design.