Color Palette Generator
Generate coordinated color palettes for mockups and design systems. Click any swatch to copy its hex code, or export as CSS variables, Tailwind config, or JSON.
Why coordinated placeholder palettes?
Random single colors rarely look intentional together. A generated palette gives you a coherent set of colors you can drop straight into a mockup, prototype, or design system — useful for quickly testing layouts, charts, or UI themes before your final brand colors are locked in.
When to use each mode
- Random — a fresh, varied set of hues for general-purpose placeholder use.
- Monochrome — light-to-dark shades of one hue, ideal for UI states or data visualization scales.
- Analogous — neighboring hues on the color wheel for a naturally harmonious look.
- Complementary — a base color paired with its opposite for high-contrast accents.
Frequently asked questions
How are the colors generated — any external service?
Everything runs in your browser. Colors are generated with a local HSL-to-hex conversion, so nothing is sent to an external API or color service.
What's the difference between the modes?
Random picks fully independent hues for a varied palette. Monochrome varies the lightness of a single hue from light to dark. Analogous spreads hues within ±40° of a base color for a harmonious look. Complementary alternates between a base hue and its opposite on the color wheel.
Can I export straight to CSS or Tailwind?
Yes — pick "CSS variables" for a ready-to-paste :root block, or "Tailwind config" for a colors.palette snippet you can drop into your Tailwind theme. Hex list and JSON are also available.
Does clicking a swatch copy it?
Yes — click any swatch to copy its hex code to your clipboard instantly, with a confirmation toast.
Can I lock the palette to a specific hue?
Switch to Monochrome, Analogous, or Complementary mode and set the base hue (0-359) to build the palette around a specific color instead of a fully random one.