Color Palette Generator
Generate five-color palettes from a harmony scheme, lock the colors you like, and export the rest as CSS or Tailwind.
How it works
Each palette starts from a random base hue. Analogousspreads colors ±30° around it, complementary pairs it with the opposite hue (180°), triadic uses three hues 120° apart, and monochrome varies only the lightness of a single hue. Saturation and lightness get small random variation so no two palettes look identical.
Click a swatch to copy its hex value. The lock icon keeps a color in place while you regenerate the others. The palette is stored in the URL, so any exact combination is shareable.
Frequently asked questions
What’s the difference between the schemes?
Analogous palettes are calm and natural (neighbors on the color wheel). Complementary palettes are high-contrast (opposites). Triadic palettes are vibrant but balanced (three evenly spaced hues). Monochrome palettes are subtle and elegant (one hue, many lightnesses).
How do I keep one color and reroll the rest?
Click the lock on that swatch, then hit Generate. Locked colors stay put; the others are redrawn around the scheme.
What does the CSS export look like?
You get CSS custom properties like --color-1: #…wrapped in a :root block, ready to paste into a stylesheet. The Tailwind export is a colors object for tailwind.config.js.
Can I start from my own base color?
Generate a palette, then lock the swatches you want to keep and regenerate until the rest fit. For exact starting colors, use the color picker tool and bring the hex back here.