ZumaTools

Color palette generator

Generate five-color palettes from harmony rules, lock the ones you like and copy the hex codes.

Export

:root {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
}

Processed on your device — nothing is sent anywhere.

How it works

  1. Pick a harmony scheme and press Generate to get a fresh five-color palette.
  2. Click Lock under any swatch you want to keep, then generate again — only unlocked colors change.
  3. Click a swatch to copy its hex code, or export the whole palette as a hex list or CSS variables.

Frequently asked questions

What do the harmony schemes mean?
Each scheme picks hues by their positions on the color wheel. Analogous colors sit next to each other and feel calm, complementary colors sit opposite each other for strong contrast, and triadic colors are spaced evenly for a balanced but lively mix. Pastel and dark keep hues varied while constraining lightness.
How does locking work?
Press Lock under a swatch and that exact color is kept every time you press Generate; only the unlocked positions get new colors. This lets you keep one or two colors you like and reroll the rest until the palette fits together.
How do I apply a five-color palette to a real design?
A reliable starting point is the 60-30-10 rule: use one quiet color for roughly 60 percent of the design (backgrounds), a supporting color for 30 percent (cards and sections) and the boldest color for the final 10 percent (buttons and highlights). The remaining swatches work well for borders, hover states and charts.
Are the generated colors completely random?
No. Each palette starts from the harmony rule you chose, which fixes how the hues relate to each other on the color wheel; the generator then varies saturation and lightness within sensible ranges. That is why every result looks coherent rather than like five unrelated random colors.
How do I use the palette in my project?
Click any swatch to copy its hex code, or use the export buttons to copy all five as a plain list or as a ready-to-paste CSS custom properties block. Everything runs locally in your browser, so no colors or data are sent to any server.

About this tool

This free color palette generator builds five-color palettes from classic color-harmony rules rather than pure chance. Pick a scheme — analogous, complementary, triadic, pastel or dark — press Generate, and you get five swatches whose hues are mathematically related on the color wheel. Lock any swatch you want to keep, reroll the rest, and copy the results as individual hex codes, a plain hex list or a ready-to-paste block of CSS custom properties.

Everything happens in your browser. The generator picks a base hue, places the remaining hues at the angles the chosen harmony rule prescribes, and then varies saturation and lightness within ranges that keep the palette usable rather than garish. No colors, clicks or exports are sent to a server, nothing is stored remotely, and the page continues to work offline once it has loaded.

Palettes like these are useful well beyond websites: presentation decks, chart color scales, interior mood boards, game interfaces and social media templates all benefit from a small set of colors that already agree with each other. Locking is what makes the tool practical for real projects — keep your existing brand color locked and generate around it until the supporting colors fall into place.

Two habits produce better results faster. First, generate more palettes than you think you need; skimming twenty candidates takes a minute and beats tweaking one mediocre palette for an hour. Second, test your favorite on a quick mockup before committing — colors that look balanced as equal-width swatches behave differently at real proportions, which is exactly where the 60-30-10 rule from the FAQ earns its keep.

Related tools