Color Palette Generator

How this works

Every palette is generated by rotating your base color's hue around the color wheel (or, for monochromatic, only changing its lightness) — the same color theory rules a designer would apply by hand. Everything runs in your browser: nothing you type or generate here is sent anywhere.

FAQ

What's the difference between the harmony types?

They're different rules for picking hues off the color wheel relative to your base color. Complementary picks the exact opposite hue for maximum contrast. Analogous picks neighboring hues for a naturally cohesive look. Triadic and tetradic space three or four hues evenly around the wheel for a vibrant but balanced set. Split-complementary softens a complementary pairing by using the two hues next to the opposite, instead of the opposite itself. Monochromatic doesn't change the hue at all — it's the same color at different lightnesses.

Why do the Shades & tints codes look different from my base color?

The 50–900 ramp is built on a fixed lightness scale (the same one design systems like Tailwind use), not a rescale of your exact input. That keeps "500" a consistent mid-tone no matter how light or dark the color you typed in happens to be — useful when you need a full set of UI shades from one brand color.

Does clicking a swatch copy anything to my clipboard?

Yes — click the colored block itself to copy its HEX code, or click any of the HEX, RGB, or HSL lines underneath to copy that exact value. Nothing is sent anywhere; the copy happens entirely in your browser.

Which color model should I use — HEX, RGB, or HSL?

HEX and RGB describe the same thing (red/green/blue channels) in different notations, so use whichever your tool expects. HSL (hue, saturation, lightness) is often easier to reason about when you're adjusting a color by hand — e.g. "same hue, just darker" is a one-number change in HSL but a three-number change in RGB.