Palette Generator

Generate a 5-color palette in one click. Lock the colors you love, regenerate the rest, and export to CSS or Tailwind.

Harmony

Random

Base color

CSS variables

:root {
  --color-1: #5DC12B;
  --color-2: #45E47A;
  --color-3: #3C73E0;
  --color-4: #CD39CD;
  --color-5: #E48323;
}

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand1: "#5DC12B",
        brand2: "#45E47A",
        brand3: "#3C73E0",
        brand4: "#CD39CD",
        brand5: "#E48323",
      },
    },
  },
};

Each palette is built around a base hue using a chosen harmony — monochromatic for tonal variations, complementary for high-contrast pairs, analogous for soft transitions, triadic and tetradic for richer, more dynamic systems. Pastel, dark and neon presets tune saturation and lightness for a specific mood.

Lock the colors you want to keep and regenerate the rest. When you're done, copy the palette as a set of CSS custom properties or a ready-to-paste Tailwind theme extension.

Frequently asked questions

What is a color palette?+

A color palette is a curated set of colors that work well together, used to keep a design visually coherent across UI, branding and content.

How many colors should a palette have?+

Five is a sweet spot — usually a primary, a secondary or accent, a neutral background, a mid neutral and a dark text color. You can always extend with shades and tints.

Can I lock a color and regenerate the rest?+

Yes. Click Lock on any swatch to keep it, then regenerate to refresh the unlocked colors.

Can I export to Tailwind?+

Yes. The Tailwind config block is generated automatically and you can copy it with one click into your tailwind.config.js.