Color Palette Generator
Pick a base color, choose a harmony, and get a balanced five-color palette in a click. Copy any hex, grab them all, or export ready-made CSS variables — all in your browser.
Color harmony, without the guesswork
A good palette isn't random — it's a set of colors that share a relationship on the color wheel. This generator does that math for you: give it one color you like and it derives the rest, so the result hangs together instead of clashing.
How to use it
- Set a base color. Use the swatch picker or type a hex code — the two stay in sync.
- Choose a harmony. Switch between schemes to compare moods, from subtle analogous to high-contrast complementary.
- Copy what you need. Click a single swatch for its hex, or export the whole set as a comma list or CSS variables.
The schemes at a glance
- Analogous — neighbouring hues; harmonious and easy on the eye.
- Complementary — opposite hues; maximum contrast for accents.
- Triadic — three evenly spaced hues; vibrant but balanced.
- Tetradic — four hues in two complementary pairs; rich and varied.
- Monochromatic & shades — one hue, many lightnesses; clean and calm.
Frequently asked questions
How are the palettes built?
Each scheme picks colors by their relationship on the color wheel. Analogous takes neighbours either side of your base hue; complementary jumps to the opposite hue; triadic and tetradic space colors evenly around the wheel; monochromatic and shades keep the hue and vary only lightness. It's the same color theory designers use by hand.
Which scheme should I pick?
Analogous palettes feel calm and cohesive — good for backgrounds and gentle UIs. Complementary and triadic give you punchy contrast for calls to action. Monochromatic and shades are the safe choice for a clean, single-colour brand look.
How do I get the colors into my project?
Click any swatch to copy its hex code. Use 'Copy all' for a comma-separated list, or 'Copy as CSS' to get a ready-made :root block of custom properties (--color-1 … --color-5) you can paste straight into a stylesheet.
Can I get a completely random palette?
Yes — choose the 'Surprise me' scheme and hit Generate for a fresh random palette each time. The base color updates to match so you can keep tweaking from there.
Is anything sent to a server?
No. Every palette is computed in your browser with plain color math. Your colors are never uploaded or logged.