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: #37D4E2;
  --color-2: #2858E8;
  --color-3: #F054E3;
  --color-4: #DD7429;
  --color-5: #2FD420;
}

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand1: "#37D4E2",
        brand2: "#2858E8",
        brand3: "#F054E3",
        brand4: "#DD7429",
        brand5: "#2FD420",
      },
    },
  },
};

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.