Color Palette Generator
Pick a base color and a harmony type to generate a matching palette, or skip straight to browsing a standard palette like Material Design, Tailwind CSS, Flat UI or Pastel — click any swatch to copy its hex code or use it as the new base color.
Generate from a color
Click the wheel to pick a new base hue, or click any swatch to use it as the base color.
Or browse a standard palette
How harmony-based palettes are built
Each harmony type is a rule for picking colors at specific angles around the color wheel (hue), keeping the same saturation and lightness as your base color so the set feels coherent. Complementary picks the color directly opposite (180° away) for high contrast. Analogous picks neighbors 30° to either side for a calmer, closely related set. Triadic and tetradic space colors evenly (120° or 90° apart) for a balanced, vibrant set. Split-complementary softens a complementary pair by using the two colors next to the opposite hue instead of the opposite itself. Monochromatic keeps the same hue and instead varies lightness, producing tints and shades of one color.
Clicking any generated swatch sets it as the new base color, so you can chain harmonies — for example, generate a triadic set, then pick one of its colors to explore its own analogous palette. The color wheel next to each palette plots every color by its hue angle, so you can see the harmony rule's geometry directly — you can also click anywhere on the wheel itself to jump straight to that hue.
About the standard palettes
Material Design and Tailwind CSS are widely used design-system color sets, each built to work well together across a UI. Flat UI is the classic flat-design palette that popularized the muted, high-contrast style common in modern web design. Pastel is a softer, low-saturation set suited to gentler designs. These are a fast starting point when you want a palette that's already been tested for visual harmony, rather than building one from scratch.
Frequently asked questions
- What's the difference between complementary and split-complementary?
- Complementary uses the single color directly opposite your base on the color wheel (180° away), giving maximum contrast. Split-complementary uses the two colors next to that opposite point instead, giving strong contrast with a bit more balance and less visual tension.
- Why do the generated colors keep the same saturation and lightness?
- Harmony rules are about hue relationships — keeping saturation and lightness constant isolates that relationship, so the palette reads as a coherent set rather than colors that also happen to differ in vividness or brightness.
- Can I use a palette color as my new starting point?
- Yes — click any swatch (in either section) to set it as the base color for the harmony generator above, so you can explore related palettes without retyping a hex code.
- Where do the standard palettes come from?
- They're based on well-known, widely used design-system color sets: Google's Material Design, Tailwind CSS's default palette, the classic Flat UI Colors set, and a general-purpose pastel set.
- What does the color wheel next to each palette show?
- Each color is plotted at its hue angle around the wheel, so you can see the harmony rule's geometry at a glance — an analogous set clusters closely, a triadic set spreads evenly, and so on. Click anywhere on the wheel to jump the base color straight to that hue.